|
|||
Problem mit dreispaltigem Layout im IE
Hallo!
Zur Zeit schreibe ich ein überschaubares CMS und habe mir meine Seiten immer wieder mit FireFox, Opera und Netscape angeschaut. Auf den IE hatte ich bis jetzt verzichtet, der verstaubt immer mehr auf meiner Festplatte aber heute war es dann soweit. Und wie es der Zufall will gabs natürlich direkt ein Problem. Eigentlich sieht, bzw. soll es so aussehen: http://wp1022120.wp037.webpack.hoste...er/richtig.png Das Problem sieht folgendesmaßen aus: http://wp1022120.wp037.webpack.hoste...ns/problem.png Das Problem habe ich bereits rausgefiltert, es liegt an Tabellen mit width:100%; bei width:99%; funktioniert es auch im IE... sieht dann natürlich nicht mehr gut aus. Welche CSS-Anweisung brauchen meine Tabellen damit sie sich nicht unter die beiden DIV Container drücken? Folgend noch CSS des Layouts: Code:
#left { float: left; width: 150px; } #middle { padding: 0px 153px 5px 153px; margin: 0px; } #right { float: right; width: 150px; } Header und Footer haben beide clear:both; Ich hoffe mir kann geholfen werden. MfG, Chris Geändert von Breezah (12.08.2006 um 16:19 Uhr) |
Sponsored Links |
Sponsored Links |
|
||||
Zitat:
Zitat:
|
|
|||
Hier ist das ganze mal rausgefiltert ohne den restlichen schnick schnack.
Beispiel Schauts euch im FF und dann im IE an. hier direkt nochmal der Quelltext: Code:
<!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"> <head> <title>Drei Spalten</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- * { font-size:12px; font-family:Verdana; padding:3px; } body { margin: 0px; padding: 0px; } div#mainbox { margin:0 auto; width:800px; } div#header { clear: both; height: 50px; background-color: aqua; padding: 1px; } div#left { float: left; width: 150px; background-color: red; } div#right { background-color: lime; float: right; width: 150px; } div#middle { padding: 0px 160px 5px 160px; margin: 0px; background-color: silver; } div#footer { background-color: yellow; clear: both; } --> </style> </head> <body> <div id="mainbox"> <div id="header"> <h1>Titel</h1> </div> <div id="left"> <i>Linke Spalte</i> <p>Eu fugiat nulla pariatur. Velit esse cillum dolore duis aute irure dolor ut aliquip ex ea commodo consequat. </p> </div> <div id="right"> <i>Rechte Spalte</i> <p>In reprehenderit in voluptate eu fugiat nulla pariatur. Cupidatat non proident, consectetur adipisicing elit, duis aute irure dolor. . </p> </div> <div id="middle"> <i>Mitte</i> <table style="width:100%;"> <tr> <td> <b>Dieser Bereich wird im IE wegen width:100%; dieser Tabelle unter die beiden Seitenspalten gedrückt.<br /> Opera und FireFox stellen es korrekt dar.</b> </td> </tr> </table> </div> <div id="footer"> <i>Fußzeile</i> <p>Velit esse cillum dolore ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, sed do eiusmod tempor incididunt cupidatat non proident. Ut enim ad minim veniam, mollit anim id est laborum. </p> </div> </div> </body> </html> Geändert von Breezah (13.08.2006 um 13:41 Uhr) |
|
||||
#middle bekommt "Layout" in Form von height: 1px; (nur für IE 5 und 6). Dann mußt Du nur noch das seitliche padding gegen margin austauschen (ist wie gesagt eh sauberer) und alles paßt.
|
|
|||
vielen lieben dank...
habs jetzt so gemacht: Code:
#middle { margin:0px 153px 5px 153px; padding:0px; } * html #middle { height:1px; } * html #middle { margin:0px 150px 5px 150px; } |
|
||||
Zitat:
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
problem mit layout --> testcase | andip | CSS | 5 | 29.02.2008 14:10 |
Problem mit 3-Zeiligem Layout | guenterfrosch | CSS | 6 | 10.08.2006 12:41 |
Layout Problem | smooth-graphics | CSS | 3 | 08.08.2006 17:59 |
Flexibles 3-Spalten Head-Foot Layout Problem | crucho | CSS | 4 | 26.08.2004 21:27 |
Layout Problem ohne Tabellen | Alex | CSS | 6 | 03.10.2003 15:26 |