nicht angemeldet
Feststehender CSS-Footer: IE-Workaround funktioniert nicht...
0 0 0 Neuer Versuch
Feststehender CSS-Footer: IE-Workaround funktioniert nicht...
Hallo!
Bitte entschuldigt meine vermutlich sehr laienhafte Frage - aber ich bin Anfänger und komme jetzt nicht mehr weiter. Mit Hilfe von SELFHTML habe ich eine Site gebaut mit festem Header (fürs Logo) und festem Footer (für die Navigation). Der content soll ggf. gescrollt werden. Dabei habe ich den IE-Workaround unter http://aktuell.de.selfhtml.org/artikel/css/footer/#footer_feststehend_alle benutzt, damit auch der Explorer das anzeigt. Unter Firefox und Safari funktioniert es auch wunderbar - nur nicht im IE - da fliegt das ganze Design auseinander.
Vielleicht könnt Ihr ja mal einen Blick auf CSS und HTML werfen und sieht auf Anhieb, woran es liegt. Vielen Dank schon mal für die Hilfe!
Hier das CSS - unten der IE-Teil:
body { background-color:white;
color:gray;
max-width:500px;
text-align:left;
margin:0;
padding:0; }
#content_container { margin-top:100px; margin-left:100px; margin-bottom:120px;
font-family:"Courier New",Courier,sans-serif;
line-height:135%;
text-align:left;
font-size:9pt; }
a[href^="http://"]:before { content: "\2197\a0" }
a:link { text-decoration:none;
color:gray }
a:visited { text-decoration:none;
color:gray }
a:hover { text-decoration:none;
color:black }
a:active { text-decoration:none;
color:black }
li { display:inline;
list-style:none; }
h1 { text-transform: uppercase;
font-weight: bold; font-size: 125%}
#header { position:fixed;
top:0px; left:0px; right:0px;
background:white;
font-family:Verdana,sans-serif;
text-transform:uppercase;
font-size:14pt;
color:#FF6600;
text-align:left; margin-left:50px;
padding:20px;
padding-bottom:60px; }
#footer { position:fixed;
bottom:0px; left:10px; right:0px;
background:white;
text-align:left;
padding:10px; padding-top:50px;
font-family:Verdana,sans-serif;
text-transform:uppercase;
font-size:12pt;
color:#FF6600; }
/* Angaben nur für den Internet Explorer mit Star-HTML-Hack */
* html, * html body
{
height:100%;
overflow:hidden;
}
* html #header
{
margin:0;
height:10%;
}
* html #content_container
{
padding:0.5em;
height:85%;
overflow:auto;
}
* html #footer
{
height:5%;
padding-top:1%;
}
---------------------------------------------------------------------
eine HTML-Seite:
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<?php
$current_page = "profil";
include('menue.php');
?>
<?php include("head.php"); ?>
<body>
<div id="header">
<?php include("logo.php"); ?>
</div>
<div id="content_container">
<h1>Lorem ipsum</h1> <p>dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt tellus vel ante. Phasellus nec arcu a diam molestie pretium. Nulla facilisi. Donec laoreet mattis nibh. Vestibulum sit amet felis. Etiam scelerisque vehicula tortor. Etiam luctus, tellus et lacinia laoreet, dolor mauris volutpat lacus, et venenatis nunc mauris porttitor nunc. Etiam condimentum. Ut vel ante vel nisi tincidunt egestas. Etiam non tortor. Fusce eros est, imperdiet non, consectetuer ac, dictum id, nibh. Sed volutpat est vitae nibh. Sed libero ante, ultrices id, auctor feugiat, facilisis eget, ante. Nulla nec sapien id est pulvinar elementum. Nullam dignissim.
Curabitur vel diam ac nisl ullamcorper nonummy. Quisque porttitor consectetuer purus. Mauris pharetra varius arcu. In gravida leo eget nisi. Aliquam dictum viverra sem. Aenean arcu. Integer non tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Aliquam condimentum, diam quis vestibulum scelerisque, ligula nulla tristique nisl, eget eleifend nunc justo id tortor. Sed eget metus egestas felis elementum vehicula. Ut elementum pharetra orci.
</p>
<h1>Lorem ipsum</h1> <p>Curabitur vel diam ac nisl ullamcorper nonummy. Quisque porttitor consectetuer purus. Mauris pharetra varius arcu. In gravida leo eget nisi. Aliquam dictum viverra sem. Aenean arcu. Integer non tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Aliquam condimentum, diam quis vestibulum scelerisque, ligula nulla tristique nisl, eget eleifend nunc justo id tortor. Sed eget metus egestas felis elementum vehicula. Ut elementum pharetra orci.</p>
</div>
<div id="footer">
<?php echo $navi ?>
</div>
</body>
</html>
-
hi,
Vielleicht könnt Ihr ja mal einen Blick auf CSS und HTML werfen
Gerne - wenn du uns CSS und HTML zeigst.
Aktuell hast du etwas serverseitiges gepostet, wo noch PHP-Code drinsteht.
Bitte merke dir für alle Zukunft, dass du wenn du ein clientseitiges Problem diskutieren willst, auch den Code zur Verfügung stellst, der beim Client ankommt - serverseitiger Code interessiert in so einem Falle kein Borstentier.Und bei dem Umfang, stelle bitte lieber ein Onine-Beispiel bereit, anstatt hier kilobyteweise Code in einem Posting abzuladen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Gerne - wenn du uns CSS und HTML zeigst.
Sorry - dass der serverseitige Code nicht ausreicht, darauf hätte ich ja auch selbst kommen können. Hier steht z.B. eine Seite, die im Firefox gut aussieht, im IE aber ganz und gar nicht...
-
hi,
Hier steht z.B. eine Seite, die im Firefox gut aussieht, im IE aber ganz und gar nicht...
Nun, da ist der position:fixed-Workaround ja auch nur sehr halbherzig umgesetzt worden.
Zuerst mal: IE <=6 kann nicht nur position:fixed nicht, er baut damit auch Unfug. Also ist es für den Workaround zwingend nötig, position:fixed durch eine andere Positionierung wieder aufzuheben.
Und dann wäre es auch noch gut, wenn du einen vollständigen Doctype inkl. Adressangabe nutzt, um den IE 6 nicht in den Quirks Mode zu schicken.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
Zuerst mal: IE <=6 kann nicht nur position:fixed nicht, er baut damit auch Unfug. Also ist es für den Workaround zwingend nötig, position:fixed durch eine andere Positionierung wieder aufzuheben.
alternativ kann position:fixed natürlich auch vor den betr. IEs
versteckt werden, z.B.
body > #divfixed {position:fixed}Grüsse
Cyx23
-
-
-
-
Hallo,
vielleicht helfen dir diese Beispiele etwas weiter:
Position Fixed für alle Browser per CSS
Zwei Spalten Layout
position fixed per DHTML und expressionBeim IE kommt es auch auf den jeweiligen Rendermodus an, abhängig vom Doctype.
Grüsse
Cyx23 -
Hi!
Die Extra-Codes für den IE verstehe ich nicht ganz, sorry. Ich habe jetzt mit trial and error einfach einen neuen Versuch gestartet, diesmal mit dieser Anleitung hier, mit einer eigenen CSS-Datei für den Explorer.
Sieht schon besser aus auf dem IE. Jetzt muss ich es nur noch schaffen, den Test auf 360px Breite zu bekommen. Dann dürfte auch die horizontale Scrollleiste wegfallen.
Und wie lasse ich den Text ("content_container") erst ab einer bestimmten Position anfangen? (Das Problem sieht man ganz gut hier.
Wäre echt nett, wenn Ihr mir noch mal kurz helfen könntet. Idiotensicher, wenn's geht ;-) Danke!
-
Hallo,
Sieht schon [...
Dafür haben wohl alle diese Lösung zunächst kleine Einschränkungen bei
der Ergonomie, so kann ich nach dem Klicken in die Seite (oben, i.d.
fixed-Bereich) beim Firefox nicht per Mausrad scrollen, obwohl der
durchgehende senkrechte Scrollbalken erstmal einen solchen Versuch nahelegt.Wäre echt nett, wenn Ihr mir noch mal kurz helfen könntet. Idiotensicher, wenn's geht ;-) Danke!
Ist aber hier das Self-Forum und nicht das Idiotenforum...
Grüsse
Cyx23-
...
der Ergonomie, so kann ich nach dem Klicken in die Seite (oben, i.d.
fixed-Bereich) beim Firefox nicht per Mausrad scrollen...Bei meinem Firefox geht das.
Ist aber hier das Self-Forum und nicht das Idiotenforum...
Danke!
-
Hallo,
fixed-Bereich) beim Firefox nicht per Mausrad scrollen...
Bei meinem Firefox geht das.
Erstaunlich. Das Scrollrad wird normalerweise auf das unter dem
Mauszeiger befindliche Objekt bezogen, dann kann die darunter liegende
Seite eigentlich nicht scrollen.Ist aber hier das Self-Forum und nicht das Idiotenforum...
Danke!
Bitte.
..] wie lasse ich den Text ("content_container") erst ab einer bestimmten Position anfangen? (Das Problem sieht [..
Da geht es doch um unterschiedliche Bildgrössen? Also vielleicht
Bildeigenschaften oder ein zusätzlicher Container mit einer
bestimmten _Höhe_.Grüsse
Cyx23
-
-
-