IE 2px zu viel height...

Status
Nicht offen für weitere Antworten.
H

herrgarnele

Erfahrenes Mitglied
Hi zusammen!

Ich habe ein ganz simples Layout. Klappt auch fast perfekt.. Nur leider macht mir der IE6 und abwärts ein Problem:
Ich habe ein Wrapper-div, das zusammen mit einer 1px starken border 600px hoch sein soll. Sollte doch eigentlich border:1px und height:598px sein!?
Der IE zeigt mir aber meine Wrapper-div in einer Höhe von 602px an. :eek:
Hilfe!

Der verdeutlichung halber der Code:
Code: 
<body>
<div id="wrapper">
    <div id="logo"></div>
    <div class="break"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div class="break"></div>
</div>
</body>

Css:
Code: 
body {
text-align:center;
margin:0px;
padding-top:56px;
}


/*------ wrapper / background verlauf ------*/
#wrapper {
background-image:url(BG_content.jpg);
background-color:#00ff00; /* nur für Demo */
background-repeat:repeat-x;
width:798px;
height:598px;
margin:0px auto;
padding:0;
text-align:left;
border:1px solid #f89b38;
}


/*------ logo ------*/
#logo {
background-image:url(logo.gif);
width:192px;
height:76px;
margin:21px 30px 23px 0;
padding:0;
float:right;
}


/*------ left column ------*/
#left {
background-color:#dfe1e3;
width:200px;
height:460px;
margin:120px 10px 18px 24px;
padding:0 12px 0 12px;
float:left;
display:inline; /* for ie double margin bug */
}


/*------ right column ------*/
#right {
background-color:#dfe1e3;
width:510px;
height:460px;
margin:0 30px 20px 0;
padding:0;
float:right;
display:inline; /* for ie double margin bug */
}


/*------ clear float ------*/
.clear {
height:0;
margin:0;
padding:0;
font-size:1px;
clear:both;
}


Danke schonmal im Voraus!

// EDIT: Da der Beitrag erstmal nach wahnsinnig viel ausschaut, hab ich übersichtlichkeitshalber die Screenshots von FF und IE6 angehängt!
 

Anhänge

  • ff.jpg
    ff.jpg
    20,3 KB · Aufrufe: 12
  • ie6.jpg
    ie6.jpg
    19,3 KB · Aufrufe: 15
Zuletzt bearbeitet:
Hi nochmal!

Ich habe es nun so gelöst, dass ich den div #right absolut positioniert habe.
Also so:
Code: 
#right {
background-color:#dfe1e3;
width:510px;
height:460px;
margin-left:258px !important;
margin:0 30px 20px 0;
padding:0;
float:right;
display:inline; /* for ie double margin bug */
position:absolute;
top:177px;
}

Ist das semantisch okay so, oder grausts da jeden, der ein wenig mehr Ahnung hat? :rolleyes:
 
Ups, Beitrag gepostet bevor och Deinen gelesen habe..
Du meinst das erste 'break'-div?

Hm.. Ich habe testhalber beide 'break'-divs rausgenommen. Da ändert sich leider nüschts..
 
Zuletzt bearbeitet:
Okay, war nur eine Annahme ;)

Versuch es mal hiermit:

Code: 
/*------ left column ------*/
#left {
background-color:#dfe1e3;
width:200px;
height:460px;
margin:120px 10px 18px 24px !important; /* Für moderne Browser */
margin:120px 5px 18px 12px; /* Für IE */
padding:0 12px 0 12px;
float:left;
}


/*------ right column ------*/
#right {
background-color:#dfe1e3;
width:510px;
height:460px;
margin:0 30px 20px 0 !important; /* Für moderne Browser */
margin:0 15px 20px 0; /* Für IE */
padding:0;
float:right;
}
 
Nope, da tut sich leider nichts!
Ich versteh das nicht, es sind exakt 2 Pixel, die der #wrapper zu hoch ist.
Ich habe schon gemutmaßt dass der IE die boder von 1 Pixel falsch interpretiert, aber das stimmt so leider nicht.

Seltsamerweise klappt das mit dem Lösungsansatz von oben (position:absolute).
Das heisst, der Wurm muss in der Positionierung von #left oder #right liegen!?
 
Das ist ein Mysterium, auf das ich keine Antwort bzw. Lösung weiß - das soll's auch mal geben.

Wenn es mit der absoluten Positionierung im IE funktioniert, dann bedien ihn halt mit Hilfe eines "Conditional Comments".

Nur noch eine Frage: entspricht das DIV break der Klasse .clear im Stylesheet?

Wenn ja, dann setz doch mal in der Regel die Schriftgröße auf null.
 
:eek: :eek: :eek:
Oh Mann, ich Depp!
Da setz ich divs zum clearen der floats ein, benenn sie aber anders als im Stylesheet...
Ziemlich doof!

Die korrekte Benennung behebt das Problem aber leider trotzdem nicht - nun Beträgt das Plus an Höhe nicht mehr 2, sondern 6 Pixel!

PS.: Wenn selbst Du keine Lösung findest, dann wohl gar keiner :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück