|
|||
Design Float IE6 Problem
Hallo
Ich hab ein kleines Problem bei meinem Design mit dem IE6, in FF3 und IE7 tritt das Problem nicht auf (welch ein Wunder). Im Maincontent hab ich ein 3 Spalten Layout verschachtelt, nur für die Background pictures, im IE6 verschiebt sich der Container ganz links, und ich hab keine Ahnung warum. Am besten seht selbst auf : Soul-Side Männedorf mit dem IE6 und mit z.B. Firefox. Hier der HTML Code: Code:
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="kokson"> <title>Soul-Side Männedorf</title> <!--[if lte IE 6]> <style type="text/css"> #content { height: 500px;} #content_middle {height: 500px;} </style> <![endif]--> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="maincontainer"> <div id="header"></div> <div id="navi"></div> <div id="content"> <div id="content_left"> <div id="content_left_inner"></div> <div id="content_right"> <div id="content_middle"> <div id="maincontent-left"></div> <div id="maincontent-right"> <!--<div id="ruler"></div> <div class="box"> <div><div><div><div><div><div><div> <div class="inhalt"> </div> </div></div></div></div></div></div></div> </div> --> </div> <div class="nofloat"></div> </div> <div id="content_right_inner"></div> </div> <div class="nofloat"></div> </div> </div> <div id="footer"></div> </div> </body> </html> Code:
/* Hauptdesign */ body { font-family: Helvetica, sans-serif, Arial; text-align:center; padding:0; margin:0; background-image: url(pictures/background.png); background-repeat: repeat-x; } #maincontainer { text-align:left; margin:0 auto 0 auto; width: 859px; } #header { width: 859px; height: 218px; background-image: url(pictures/Header.png); } #navi { width: 859px; height: 19px; background-image: url(pictures/navi.png); } #content { width: 859px; min-height: 500px; background-image: url(pictures/back_content.png); background-repeat: repeat-y; } #content_left { background-image: url(pictures/verlauf_left.png); background-repeat: no-repeat; } #content_left_inner { width: 33px; float:left; } #content_middle { /*padding: 10px 10px 10px 10px;*/ min-height: 500px; } #content_right { width: 826px; float: right; background-image: url(pictures/verlauf_right.png); background-position: right top; background-repeat: no-repeat; } #content_right_inner { width: 26px; float:right; } #maincontent-left { width: 200px; float: left; } #maincontent-right { width: 600px; margin-left: 200px; } #footer { width: 859px; height: 27px; background-image: url(pictures/footer.png); } #ruler { width: 570px; height: 3px; background-image: url(pictures/header_line.png); } /* Content Box */ div.box {background:url(pictures/box_left.png) repeat-y; background-color: white; width: 570px;} div.box div {background:url(pictures/box_right.png) right repeat-y;} div.box div div {background:url(pictures/box_top.png) repeat-x;} div.box div div div {background:url(pictures/box_bottom.png) bottom repeat-x;} div.box div div div div {background:url(pictures/box_top_left.png) left top no-repeat;} div.box div div div div div {background:url(pictures/box_top_right.png) right top no-repeat;} div.box div div div div div div {background:url(pictures/box_bottom_left.png) left bottom no-repeat;} div.box div div div div div div div {background:url(pictures/box_bottom_right.png) right bottom no-repeat;} div.inhalt { padding: 10px 10px 10px 10px; min-height:100px; } /* Hilfs zeugs */ .nofloat { overflow: hidden; clear: both; height: 1px; margin: -1px 0 0 0; font-size: 1px; } |
Sponsored Links |
|
|||
schreib alles auf "float:left" und "display: inline" dann alle drei container eine feste breite geben!
dann sollte es klappen! Code:
<div id="content"> <div style="float:left; display: inline; width: 200px;">test1</div> <div style="float:left; display: inline; width: 200px;">test2</div> <div style="float:left; display: inline; width: 200px;">test3</div> </div> Geändert von Basti82 (05.09.2008 um 16:49 Uhr) |
Sponsored Links |
|
|||
Bei meinem Test hat hasLayout für #content_left den Fehler behoben.
Was genau hat dich dazu gebracht, <?xml version="1.0" ?> in die erste Zeile deines Codes zu schreiben? edit: Ach, in deinem Code hier im Forum warst du noch bei XHTML. Jetzt, wo du HTML schreibst, muss das auf jeden Fall weg.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Da IE 6 kein min-height kennt, kann er auch keine haben. Aber vermutlich meinst du etwas völlig anderes. Bitte Frage präzisieren, am besten am Beispiel zeigen, was du meinst.
Du hast immernoch die xml-Deklaration im Code (sieh da, jetzt ist es wieder XHTML...). Das einzige, was du damit erreichst, ist den IE 6 in den Quirksmodus zu werfen. Ich glaube nicht, dass du das wirklich willst.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Es ist nun raus..
Ich meine damit, ich habe ne trennlinie als Grafik, die pack ich in ein div als Hintergrund, und dimensioner das div so gross wie die Grafik, IE6 macht da was komisches... Siehe die Linie unter der Box... |
|
|||
Ja, IE 6 dehnt Element auf, bis Text hineinpassen würde.
Aber jetzt hör erstmal auf, mit leeren Divs um dich zu werfen. Wenn du eine grafische Box mit fester Breite willst genügen maximal drei Hintergrundbilder. Du musst nicht in links-rechts-mitte zerschnipseln. Und lass doch die obere und untere Linie an der Boxgrafik dran. edit: Jetzt hast du also inline-block genutzt, um hasLayout für IE zu erhalten. Dann lass das aber auch nur den IE sehen! Du hast doch schon einen CC.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (05.09.2008 um 17:58 Uhr) |
|
|||
Die Linie gehört nicht zur Box, die ist freistehend.
Wie ich die grafische Box mit weniger Bildern hinkriege weiss ich leider nicht, bin ziemlicher Anfänger mit XHTML und CSS, das ist ein Beispiel das ich kopiert habe, die Box brauch ich auch noch auf anderen Seiten, wo sie dann auch unterschiedliche Dimensionen aufweist. |
Sponsored Links |
|
|||
Zitat:
Zitat:
Das ergibt dann eine vollflexible Box mit "nur" vier statt deiner 9 Divs. PNG-24 brauchst du nicht für deine Box. Nimm Gif oder PNG-8, das ergibt bestimmt kleinere Dateien. Beachte auch das Edit in meinem vorigen Beitrag.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS relative, absolute & float | FrageHabe | CSS | 3 | 13.08.2010 15:40 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
IE6 zerschiesst das Design | scupidu | CSS | 2 | 15.01.2010 19:39 |
IE6 Und IE7 Problem bei Float | Piet | CSS | 12 | 12.11.2009 13:22 |
IE zeigt gewisse Texte nicht an | zitronenbaum | CSS | 2 | 16.01.2008 16:25 |