IE 5.x 3px Fehler beim Positionieren von DIV's

Status
Nicht offen für weitere Antworten.
M

M@rk

Mitglied
Hallo Leute,

ich mache gerade eine Web-Site mit DIV's und CSS. http://schlosserei-kerner.de/test_css.php Jetzt habe ich beim voläufigen Layout das Problem, daß MSIE 5.x das Inhalts-DIV mit einem Abstand auf der rechten Seite positioniert. Alles andere passt bis jetzt bei FF, Opera, MSIE 6.x, Konqueror... Ich habe mich bereits durchgegoogelt und einige Vorschläge probiert, leider ohne Erfolg. Vielleicht kann mir ja einer der Cracks hier weiterhelfen! Ich denke mal, des es eine einfache Lösung dafür gibt.



Gruß M@rk
 
Hi Maik,

sorry ich schon wieder... Ich habe das im angegebenen Link mal versucht, aber irgendwie komme ich ncht so auf ein Ergebnis. Der Erfolg ist < = "0"... Irgendwie bin ich zu ungeschickt diesen IE 5.x Bug zu umgehen.

Gruß M@rk
 
...ah so, sorry hier mal mein css...

HTML: 
body {
    font-family: Verdana;
    font-size: 10px;
    background: #EFEBFF; 
    text-align: center;
    margin: 15px;
    color: #000000;
}

#header {
    height: 96px;
    width: 774px;
    background: url('../pics/header.jpg') no-repeat;
}

#header_bottom {
 /* Angabe für den IE 5.x */
    width: 774px;
    height: 20px; 
    text-align:left;
    padding-left: 5px;
    padding-right: 20px;
    padding-top: 3px;
    padding-bottom: 2px;
    background-color: #000099;
    color: #FFFFFF;
    voice-family: "\"}\"";
    voice-family: inherit;
/*Angabe für die anderen Browser */    
    width: 749px;
    height: 16px; 
    padding-left: 5px;
    padding-right: 20px;
    padding-top: 3px;
    padding-bottom: 2px;
    text-align:left;
    background-color: #000099;
    color: #FFFFFF;
}

.dummy1 {
margin: 0; /* Dummy-Angabe für IE 5.0 Bug*/
}

#main {
    width: 100%;
    background: #B5B6FF;
    width: 774px;
}


#menu {
    width: 165px;
    line-height:15px;
    padding-left: 0px;
    background-color: #B5B6FF; 
    border-style: none;
    float: left;
    padding-top: 20px;
} 				

#content {
/* Angabe für den IE 5.x */
    width: 607px;
    padding-left: 5px;
    float: left;
    background: #FFFFFF;
    line-height:15px;
    voice-family: "\"}\"";
    voice-family: inherit;
/*Angabe für die anderen Browser */    
    width: 599px;
    padding: 5px;
    float: left;
    background: #FFFFFF;
    line-height:15px;
}

.dummy2 {
margin: 0; /* Dummy-Angabe für IE 5.0 Bug*/
}


#footer {
    border-top: solid 1px #000099;
    height: 30px;
    width: 774px;
    clear: both;
    background: url('../pics/footer.jpg') no-repeat;
}
 
Wenn du Probleme bei der Umsetzung der Hacks hast, dann befolge doch meinen Tipp von gestern abend und entferne alle padding -Angaben aus den relevanten DIVs und übergebe sie den Kindelementen innerhalb der DIVs ;-]
 
Hi Maik,

den Hack mit der Padding Sache ist doch erledigt. Jetzt geht es doch meines Erachtens um den IE 5.x 3px Fehler bei floating DIV's... oder?

Gruß M@rk
 
Hallo M@rk,

dir ist ein Rechenfehler bei der Weitenermittlung für #content unterlaufen, denn 774px - 165px = 609px, oder nach dem Box-Modell 599px + 2 * 5px (padding left/right) = 609px. Du hast für den IE 5.x aber nur 607px notiert, und diese Differenz erzeugt den 2px-Abstand zum rechten Aussenrand ... ;-]

Hier der korrigierte CSS-Code:

Code: 
#content {
/* Angabe für den IE 5.x */
    width: 609px;
    padding-left: 5px;
    float: left;
    background: #FFFFFF;
    line-height:15px;
    voice-family: "\"}\"";
    voice-family: inherit;
/*Angabe für die anderen Browser */
    width: 599px;
    padding: 5px;
    float: left;
    background: #FFFFFF;
    line-height:15px;
}
[ Browsercheck: IE 5.5, Moz 1.6, NN 7.0, Op 7.23 ]


greez, maik.l
 
Hallo Maik,

oh mann "shame on me..." Aber ist oft so wenn man ewig vor was hockt sieht man zum Schluß gar nichts mehr...

Vielen vielen Dank Maik


Was ich schon lange mal loswerden wollte ist, dass ich tutorials.de eine absolut geile Adresse finde bei der Anfängern auch mit Taten geholfen wird und nicht nur dumme Sprüche von oben herab fallen wie in anderen Foren.

Macht weiter so, alle die hier drin sind und die, die helfen...



Gruß M@rk
 
Wie heisst es doch so schön: der Fehler liegt im Detail und vier Augen sehen immer mehr als zwei ;-]


greez, maik.l
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück