|
|||
Internet Explorer vs. Firefox
Hallo.
Warum passt das im Firefox (rot und blau nebeneinander) und nicht im Internet Explorer 6 (blau rutscht runter)? Code:
<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 100.01%/1.5 Arial, Helvetica, sans-serif; width: 100%; background: white; color: black; } ul { background-color: red; float: left; width: 25%; min-height: 25em; list-style: none; } a { display: block; padding: 1em; } #inhalt { background-color: blue; margin-left: 31%; } #wrapper { min-width: 800px; max-width: 50em; margin: 0 auto; border: 1px solid black; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } </style> <!--[if lt IE 8]> <style type="text/css"> .clearfix { display: inline-block; } /* IE-Mac \*/ * html .clearfix { height: 1px; } .clearfix { display: block; } /* Ende */ /* Whitespace Bug */ * html ul a { height: 1px } /* min/max-width IE < 7 */ * html #wrapper { width: 800px; } </style> <![endif]--> </head> <body> <div id="wrapper" class="clearfix"> <ul> <li><a href="#">einseinseins</a></li> <li><a href="#">zweizweizwei</a></li> <li><a href="#">dreidreidrei</a></li> </ul> <div id="inhalt" class="clearfix"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <b>Der blaue Absatz schließt das grüne Bild ein und beginnt auf gleicher Höhe wie die gefloatete Liste.</b> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><img src="test.jpg" style="float:right;" /></div> </div> </body> </html> Hier das Bild: http://www.bilder-space.de/show.php?...Gq2dx7k4hl.jpg Geändert von Kendis (07.09.2009 um 17:20 Uhr) |
Sponsored Links |
|
||||
Bei mir rutscht im IE 6 nix runter, aber ich würde es eh anders lösen: Um innerhalb von #inhalt uneingeschränkt clearen zu können, sollte Inhalt ebenfalls floaten (width in % kann es bekommen).
Dann klappen zwar Deine gleich hohen Spalten per clearfix nicht mehr, aber die funktionieren eh in zuvielen Browser nicht, daher würde ich FAQ 1 anwenden (funktioniert auch bei Prozentbreiten, durch bg-pos. mit horiz. Prozentwert).
__________________
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 |
|
|||
Hallo heiko_rs.
Auch nicht wenn du #inhalt margin-left erhöhst (35% z.B.)? Wenn ich #inhalt ebenfalls floate, führt dass nicht dazu dass ich nachher quasi alles floaten muss? Gibt das keine anderen Probleme? Habe gehört, man soll mit Floats möglichst sparsam umgehen, weil ältere Browser mit zunehmender Anzahl schnell Fehler machen. Welche Browser kommen denn mit clearfix nicht zurecht? |
|
||||
Auch dann nicht. Wie breit ist test.jpg?
Zitat:
Zitat:
In IE < 8 gibt es nicht den hier gewünschten clearfix-Nebeneffekt, ebensowenig in älteren Geckos.
__________________
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.) |
|
|||
test.jpg ist 550px breit (siehe 1. Post, da kannst du es auch runterladen).
Hat es denn überhaupt mal Vorteile, wenn man nur eine der beiden Boxen floatet und die andere per margin daneben platziert, oder ist es immer ratsam "soviel wie möglich" per Float zu regeln? |
|
|||
Zitat:
Zitat:
Zitat:
|
|
|||
Nochmal zum verdeutlichen, wie ich es meine:
http://www.bilder-space.de/show.php?...Vro2biQWFH.jpg |
|
||||
Tust Du eh nicht, denn margin-left: 31%; ist gleichbedeutend mit width: 69%; (und rechts floatend). Das beantwortet auch gleich Deine nächste Frage.
__________________
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 |
|
|||
Zitat:
Zitat:
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Firefox ok, Internet Explorer viel zu groß. | Tobb | (X)HTML | 1 | 22.10.2010 13:30 |
Firefox zeigt mittig / Internet Explorer 8 links *** warum ?? | i_dont_know | CSS | 2 | 09.11.2009 11:19 |
Firefox und Internet Explorer | messerjocke | CSS | 0 | 15.09.2008 18:33 |
Internet Explorer und Firefox Css?? | p.rogge | CSS | 4 | 24.06.2008 18:26 |
Firefox und Internet Explorer 7 vertragen sich immer noch nicht | kadees | Offtopic | 3 | 01.08.2007 13:53 |