|
|||
Problem mit "Footer Stick Alt"
Hi,
habe mir aus der FAQ den Punkt 4) 100% mit "Footer Stick Alt" genauer angeschaut und ausprobiert. Im FF funktioniert es auch wunderbar, aber der IE zickt mal wieder rum: WAN - BAUTEC Sobald der Text zu lang wird, verschwindet der Footer komplett (Startseite) oder wird teilweise überblendet (bei 1024 x 800 hier zu erkennen: Baustellen -> Rechnungen). Ausserdem ist im IE unter Baustellen -> Rechnungen zu erkennen, das der Text unter dem links floatenden Submenü einen kleinen Sprung nach links vollzieht. Wenn der Text nicht lang genug ist um bis dahin zu kommen werden an genau der Stelle sogar 2 Buchstaben angezeigt, die garnicht dahin gehören... So langsam verzweifle ich am IE... //EDIT: Eines aber noch vorab, bei der valedierung wird in der baustellen.php die Zeile mit den index-Links bemängelt. Das ".....&show=...." darf wohl nicht da rein. Warum? OK, hab den Fehler gefunden, diese blöden Sonderzeichen . Der Rest klappt deswegen aber immer noch nicht korrekt. Hier die interessantesten Codeteile: index.php Code:
<?php error_reporting(E_ALL); include "config/config.php"; //entfernt die von PHP eingefuegten Backslashes vor ' und " if(get_magic_quotes_gpc()) { array_stripslashes($_GET); array_stripslashes($_POST); array_stripslashes($_COOKIE); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta name="robots" content="all" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> <title>WAN - BAUTEC</title> </head> <body> <div id="nonFooter"> <div id="layout_banner"> <?php include "layout/banner.php";?> </div> <!--END layout_banner--> <div id="layout_menu1"> <?php include "layout/menu1.php";?> </div> <!--END layout_menu1--> <div id="layout_content"> <?php include "layout/content.php";?> </div> <!--END layout_content--> </div> <!--END nonFooter--> <div id="footer"> <div id="layout_footer"> <?php include "layout/footer.php";?> </div><!--END layout_footer--> </div> <!--END footer--> </body> </html> PHP-Code:
Code:
/*Class Submenue*/ div.content_submenu { float: left; width: 12em; line-height: 0; /*Whitebox-Hack*/ border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid; margin: 1em 0 0 0; background-color: #F5FAEE; } div.content_submenu a{ display: block; height: auto !important; /*Whitebox-Hack*/ height: 1.5em; /*Whitebox-Hack*/ line-height: 1.5; /*Whitebox-Hack*/ margin: 0.5em 0.6em 0.5em 0.5em; padding: 0.2em 0.2em 0.2em 0; text-align: right; } /*Main Bereiche, Grundeinstellungen*/ div.content_main { margin: 1em 0 0 13em; } Code:
/*Layout*/ /*Grundwerte zuruecksetzten ===========================================*/ * { padding: 0; margin: 0; border: 0; font-family: Verdana, sans-serif; list-style-type: none; /*Alle Listensymbole entfernen*/ } /*(DEAKTIVIERT! NOCH TESTEN)Fuer dauerhafte Scrollbalken im FF*/ /*Zum aktivieren, body auf 101% stellen*/ html {height: 100%;} body {height: 100%;} h1 { font-size: 1.5em; font-weight: bold; } h2 { font-size: 1.2em; font-weight: bold; } h3 { font-size: 1.0em; font-weight: bold; } /*Footer am unteren Rand positionieren*/ #nonFooter { position: relative; min-height: 100%; } * html #nonFooter { /*Nur IE 5+6*/ height: 100%; } #footer { position: relative; margin: -3.6em auto 0 auto; } * html #footer { /*Nur IE 5+6*/ margin-top: -3.4em; } /*Grundgeruest erstellen =======================================*/ #layout_banner { float: left; width: 100%; height: 1.2em; } #layout_menu1 { clear: both; float: left; width: 100%; height: 3em; } #layout_content { clear: both; float: left; width: 100%; /*height:auto !important; /*fuer alle Browser ausser IE 5+6*/ /*height:400px; /*fuer IE 5+6*/ /*min-height: 400px; /*Fuer alle ausser IE 5+6*/ } #layout_footer { clear: both; float: left; width: 100%; } Geändert von Thuroc (25.10.2007 um 16:14 Uhr) |
Sponsored Links |
|
|||
Zitat:
Zitat:
Zitat:
Mit den bei PIE gelisteten Bugs sollte man sich vertraut machen. Im IE wird es weiterhin zu einer Überlappung des Inhaltsbereiches mit dem Footer kommen, da der IE den Footer trotz Float und Clear über den Inhaltsbereich schiebt. Ich würde empfehlen, für deinen Bereich #layout_content nicht Float in Float zum Einschließen zu nutzen, sondern nach den Floats ein hr-Element einzuführen und mit diesem zu Clearen (der Footer braucht dann kein Clear). Mit einer passenden Höhe schafft dieses Hr gleich den nötigen Abstand für den Footer. |
Sponsored Links |
|
|||
Hi und danke für deine ausführliche Hilfe.
Der Punkt eins, das Layout für den Footer, klappt leider nicht. Er hat bereits Layout durch die Eigenschaft width: 100% zugewiesen bekommen (layout.css). Trotzdem habe ich zusätzlich folgendes ausprobiert: Code:
<!--[if lt IE 7]><style> /*IE 5+6 "Layout" aktivieren*/ .gainlayout { height: 0; } </style><![endif]--> <!--[if IE 7]><style> /*IE 7 "Layout" aktivieren*/ .gainlayout { zoom: 1;} </style><![endif]--> Die anderen beiden Punkte werde ich mir heute zu gemüte führen, PIE scheint ja eine top Informationsquelle zu sein. Leider komplett in English, was ich nicht so gut verstehe, aber deutsche Übersetzungen oder ähnliche Artikel lassen sich mit entsprechenden Stichwörtern bestimmt via Google finden. Grüße und besten Dank Geändert von Thuroc (26.10.2007 um 09:32 Uhr) |
|
|||
Zitat:
Einer davon ist sowieso überflüssig. |
|
|||
Ah, jetzt hats Klick gemacht
Den darüberliegenden DIV hatte ich ganz vergessen Und du hast recht, noch ist ein DIV überflüssig. Ich hatte das nur drin, um die Übersicht bei dem "Footer Stick Alt" zu behalten. Ist noch alles relativ neu für mich, komme halt aus der Programmierer Ecke und hatte mit XHTML und CSS bisher kaum Kontakt... Leider funktioniert es mit den IE Comments immer noch nicht ;( //EDIT Ich werde heute einfach mal ein bisschen mit DIV-Layouts rumspielen und schauen, wer wann wo wie reagiert. Da lernt man wohl am besten bei. Vielleicht schaffe ich es ja sogar eine relativ absolute DIV-Box zu bauen *grins* Geändert von Thuroc (26.10.2007 um 10:23 Uhr) |
|
|||
Conditional Comments sind HTML-Kommentare! Sie können nicht im Stylesheet stehen.
Wenn du eine Klasse .gainlayout im Stylesheet verwenden willst, dann brauchst du eine solche auch im HTML. Zauberei funktioniert nicht. |
|
|||
Ich sehe schon, ich muss noch einiges lernen...
So funktioniert es jetzt aber: Ausschnitt aus der layout.css Code:
* html div.addlayout { height: 0; } Code:
<div id="nonFooter" class="addlayout"> ... </div> <!--END nonFooter--> <div id="footer" class="addlayout"> ... </div> <!--END footer--> Code:
<div id="layout_content"> <?php include "layout/content.php";?> <hr class="hrClear"> </div> <!--END layout_content--> Code:
* html hr.hrClear { clear: both; height: 0.8em; color: white; background: white; } Geändert von Thuroc (26.10.2007 um 11:09 Uhr) |
|
|||
Zitat:
Zitat:
|
|
|||
Dann werde ich mir für IE7 noch was einfallen lassen müssen. Dem non-Footer hab ich nun die classe wieder gestrichen und siehe da, der IE Duplicate Characters Bug ist auch verschwunden...
Jetzt hab ich nur noch den Three Pixel Gap vor mir Geändert von Thuroc (26.10.2007 um 11:22 Uhr) |
Sponsored Links |
|
|||
Im IE7 besteht das Problem doch gar nicht.
edit: jetzt seh ich ja erst die hr. Das Clear braucht nicht nur IE! Mit der visibility-Eigenschaft wird die HR transparent. Float und width bei #layout_content weg. Geändert von fricca (26.10.2007 um 11:20 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Beispiel: "Footer Stick Alt" fehlerhaft? | wuschba | CSS | 2 | 20.10.2007 14:18 |
"Footer Stick Alt": Ich bekomms nicht umgesetzt! | Achmed | CSS | 16 | 20.09.2007 14:20 |
Design zu CSS/HTML verarbeiten - Problem häufen sich. | Grafikamateur | CSS | 2 | 06.08.2007 09:57 |
Problem mit WordPress und dem Bilder Upload | Maxefix | Serveradministration und serverseitige Scripte | 0 | 19.12.2006 14:58 |
Problem bei Div's - zwei mal das gleiche und doch nicht ... | Niriel | CSS | 10 | 09.06.2005 17:39 |