nicht angemeldet
3 Spaltenlayout vs. IE 7
Hallo!
Ich bin für die Gestaltung einer Internetseite zuständig, die in den kommenden Tagen online gehen soll. Nun, bevor ich lang drumrum schnacke, schaut euch das Problem am besten einmal an:
So schaut es im Firefox (noch nicht auf 3 aktualisiert) aus:
Klick!
Und so im IE 7:
Klick!
Das ganze basiert auf dem 3-Spalten-Layout von de.selfhtml.org.
Die Boxen links und rechts sind gefloated und der Contentbereich (rot eingerahmt) drückt sich sozusagen um die breite der beiden Boxen von links bzw. rechts ab und nutzt so die gesamte restbreite. nun sackt im Internetexplorer leider der Inhalt soweit hinunter, dass er erst auf Höhe Unterkante der linken Navigation beginnt.
Ist dieses Problem bekannt oder kann mir jemand eine Vermutung schildern, wodurch es entstanden sein könnte? Die Breite des Contentbereiches dürfte es nicht sein, da ja wie zu sehen ist der Bereich zwischen die beiden Boxen passt, jedoch wird auch die border zwischendurch unterbrochen.
Relevanter Quellcode:
<body>
<div id="container">
<div id="header_le"> </div>
<div id="header_ri"> </div>
<div id="header"> </div>
<div id="content">
<div id="sidebar_left"> </div>
<div id="sidebar"> </div>
<div id="text_shop"> </div>
<div id="clear"></div>
</div>
</div>
</body>
CSS:
div#text_shop {
margin: 0 18em 0 15em;
padding: 0 6px;
font-size: 100%;
border: 1px solid red;
line-height: 18px;
letter-spacing: 0.6px;
text-align: justify; }
div#sidebar {
margin: 0px;
padding: 0px 0px 6px 18px;
border-left: 1px solid #000;
width: 15em;
float: right; }
div#sidebar_left {
margin: 0 2% 0 4px;
padding: 0;
width: 14em;
float: left; }
Ich hoffe ihr habt genügend Informationen und könnt mir ein paar hilfreiche Tipps geben =)
LG Leon
-
Ist dieses Problem bekannt oder kann mir jemand eine Vermutung schildern, wodurch es entstanden sein könnte? Die Breite des Contentbereiches dürfte es nicht sein, da ja wie zu sehen ist der Bereich zwischen die beiden Boxen passt, jedoch wird auch die border zwischendurch unterbrochen.
Ich hatte damit auch schon so meine Probleme und musste im CSS-Code immer eine Änderung extra für den IE einbauen.
Das sieht z.B. so aus, dass du eine Navigation mit folgenden Elementen hast:
#portal-globalnav {
background-color: #FFF;
height:auto;
line-height:normal;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:100%;
margin:0;
padding:0;
margin-bottom: 1px;
border: 1px solid #FFF;
white-space:nowrap;
}Für den IE müsstest du das folgendermaßen ändern:
/*Änderung für den IE*/
* html #portal-globalnav {
margin-bottom: -25px;
margin-top: 20px;
height: 0px; /*setzt die Umrandung der Navigationspunkte auf Null !!!*/
}Probier es aus. Ist leider nicht unumgänglich!
Ich hoffe, das hilft dir!Viel Erfolg!!!
-
Hi,
So schaut es im Firefox (noch nicht auf 3 aktualisiert) aus:
Klick!und fallen Dir dort die Überlappungen nicht auf? Der IE setzt - abgesehen bei absoluter Popsitionierung - nicht nebeneinander passende Elemente untereinander, anstatt sie zu überlappen.
Relevanter Quellcode:
<body>der relevante Code fängt beim DOCTYPE an. Anhand der Screenshots sollte der allerdings vorhanden sein und nicht den quirks mode auslösen.
div#sidebar {
padding: 0px 0px 6px 18px;
width: 15em;Du solltest die Einheiten nicht mixen.
freundliche Grüße
Ingo