|
|||
IE 6/7 Footer rutscht
Ich habe meine Seiten mal gründlich entdivt und nach dieser Vorlage umgebaut; musste jedoch einige Änderungen machen, weil mein Footer transparent ist.
Auf der linken Seite habe ich eine Grafik per background eingebunden, darunter steht ein ©2004-2010 welches per span aus dem Menu eingebunden wird. In den gängigen Browsern sieht alles ok aus, im IE6/7 wird jedoch das Menü zu hoch gesetzt und das ©rutscht in die Grafik. Habe dem Menu im Hack schon testweise Höhe gegeben, was aber leider nicht geholfen hat. Der relevante css-Teil: Code:
html { background : #ffffcc; background-image : url('/hp/verlauf.gif'); background-position : top left; height : 100%; padding : 0; margin : 0; background-attachment:fixed; } body { font-family: "Book Antiqua", Georgia, Arial, sans-serif; text-align : center; color : #008080; padding: 0; margin: 0; height: 100%; } #container { background-image : url('/hp/seite.gif'); background-attachment:fixed; background-position : right; background-repeat : no-repeat; padding-bottom : 6.3em; } #content { width: 100%; } #inhalt { margin-left : 160px; text-align: center; } #footer { background-color : #ffffcc; background-image : url('/hp/footerlogo.gif'); background-repeat : no-repeat; background-position : left; width: 100%; position: fixed; left: 0; bottom: 0; height: 6em; } #footer-inner{} /* ====================================== Hacks für IE´s ====================================== */ * html body { height: 100%; overflow: hidden; } * html #container{ overflow: auto; height: 100%; } *html #inhalt { margin-left : 150px; margin-right: 17px; } * html #footer { position: absolute; height: 5.4em; h\eight: 6em; } * html #footer-inner { margin-right: 17px; /*height: 110px;*/ } /* ====================================== Menu im Footer und copyright/anker ====================================== */ .menu { margin : auto; width : 45em; height : 10%; text-align : center; } .menu ul { margin-top : 0.063em; } .menu li { margin : 0.063em; display : block; background-image : url('/hp/footerbutton.gif'); float : left; color : teal; width : 128px; height: 20px; } .menu a:hover { font-style : italic; } .menu .aktiv { font-style : italic; font-weight : bold; color : #ff6600; } a { color : #008080; text-decoration : none; } .anker { font-style : italic; font-size: 0.8em; float: right; margin-right: 3px;} .copy { font-style : italic; font-size: 0.6em; color: #9af3cf; float: left; margin-left: 6px; margin-top: 42px;} Ich weiß, das es nicht besonders gut lesbar ist, es soll auch einfach nur "da" sein und die Schrift im Footer muss ich kleiner machen, sonst bricht der Text teilweise um. Helft Ihr mir auf die Sprünge? Tanja |
Sponsored Links |
Sponsored Links |
|
||||
Zitat:
Zitat:
Zitat:
Zitat:
Danke Tanja |
|
||||
zoom: 1; für sämtliche divs ist allerdings eh nicht verkehrt (natürlich nur für IE < 8 ) - div { zoom: 1; } Nur in Ausnahmefällen muss man dies mal für ein einzelnes div per "normal" zurücksetzen - wann das nötig ist, merkt man dann schon
collapsing margins ist dennoch ein wichtiges Thema - man muss immer vorsichtig sein, wenn man einem "first-child" margin-top gibt, denn falls es nicht floatet o.ä., kann es sein Elternelement runterrutschen lassen, sofern dieses nicht z.B. border-top oder padding-top hat. Du hattest einige entsprechende Kandidaten im CSS (wenngleich nicht Dein Copyright-span, da dieses floatet).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Zitat:
Damit macht man mindestens so viel kaputt wie gut.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Doch, wenn man weiß was man tut Wenn ich eine neue Seite schreibe, mache ich das immer so, weil ich genau weiß, wo hasLayout bei divs kontraproduktiv wäre (und es dann zurücksetze).
Oder momentan bei einer sehr umfangreichen CMS-Website, deren CSS ich komplett neu schreibe, habe ich dasselbe gemacht. Denn dieses CMS hat so unendlich viele divs, und die alle gezielt zu erfassen, würde halt ewig dauern (und bisher musste ich bei keinem einzigen dieser divs hasLayout zurücksetzen).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Sorry, ich halte das für absolut keine gute Idee -- unabhängig vom Projektumfang und Wissen des Ausführenden.
hasLayout/zoom ist ein Hack. Ich bin der Überzeugung, diese (unvermeidlichen) Hacks sollten nur gezielt eingesetzt werden -- und kommentiert werden. Damit man auch später noch weiß, was man warum getan hat.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Ja, aber ich fühle mich bei meinen Projekten wohler, wenn alle divs, die hasLayout bekommen dürfen (und das sind fast immer alle), es auch tatsächlich bekommen. So kann man das ja auch kommentieren, und ebenfalls eine hasLayout-Zurücksetzung (z.B. damit das betreffende div nicht komplett neben einen Float rutscht o.ä.).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Nein, tut mir leid -- absolut keine Zustimmung.
Viel zu extrem sind die Auswirkungen von hasLayout. Mit der gleichen Begründung könnte man allen Elementen overflow:hidden geben -- man weiß ja, was man tut und kann es gegebenenfalls zurücksetzen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
||||
overflow: hidden; mit seinen extremen Risiken ist allerdings imho nicht vergleichbar mit hasLayout, und außerdem betrifft letzeres ja auch nicht alle Browser, sondern nur den IE < 8.
Und wie gesagt, für mich ist die Alternative, entweder gebe ich allen divs pauschal hasLayout, und setze es für diejenigen zurück, die es nicht haben dürfen, oder ich gebe es allen, die es haben dürfen, gezielt per Selektor. Aber unterm Strich wäre das Ergebnis dasselbe, d.h. von z.B. 20 divs hätten 19 hasLayout.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Footer container werden untereinander dargestellt... | Ntracks | CSS | 10 | 07.08.2010 19:24 |
cssstickyfooter.com | horizontales Scrollen --> Footer verschwindet | daigo | CSS | 0 | 19.05.2009 11:56 |
Footer im Blog rutscht hoch | wuntzt | CSS | 4 | 28.01.2008 17:33 |
Layout - footer und layer[links] - Probleme - (CSS-Anfänger) | Basti_LRT | CSS | 1 | 08.10.2007 23:03 |
Footer Problem | blub19 | CSS | 6 | 25.01.2005 12:46 |