✔ Linker Rand (5px); ist bei IE 10px, bei FX 5px

Status
Nicht offen für weitere Antworten.
exitboy

exitboy

Erfahrenes Mitglied
Warum? Drüber gibt es nichts weiter ... kann mir das jetzt wirklich nicht mehr erklären ... wenn ich margin:0px und padding auch auf 0 setze, habe ich gar keinen Rand ...
aber das muss doch mit margin gehen. Padding ist es hier nicht ... da ich ja ansonsten den innenabstand vergrößere und nicht den Aussenabstand eines Menüpunktes.


<div id="inhalt">
<div id="navibar">
<div id="navilink">test</div>
</div>
</div>

Code: 
#inhalt
{
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px; /* neg. Hälfte von width:400px = horizontal zentriertes DIV */
background: #transparent;
font-family: verdana;
font-size: 11px;
text-align:left;
}

#inhalt #navibar
{
float:left;
margin:0px; padding:0px; /*padding musste auf 0px gesetzt werden um verschiebungen zu verhindern beim FX IE*/
width: 180px;
height: 400px;
background: #f90;
}


#inhalt #navilink
{

margin:0px 0px 0px 5px; padding:0px; /*FEHLER !*/
float:left;
width: 120px;
font-size:11px;
background: #fa3;
border-style: solid;
border-width: 1px;
border-color: #fff;
}
 
Zuletzt bearbeitet:
es lag einfach am float:left bei dem link.

Nur warum darf das da nicht rein und verursacht hier diese Pixelverschiebung?
 
Im IE tritt bei Elementen, die mit der CSS-Eigenschaft float formatiert sind, der sogenannte 3-Pixel-Abstand auf, womit der IE den gewünschten 5px-Abstand zwischen den beiden (verschachtelten und 'floatenden') DIVs mit 8 Pixel darstellt.

CSS-Lösung:
Code: 
#inhalt
{
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px; /* neg. Hälfte von width:760px = horizontal zentriertes DIV */
background: #transparent;
font-family: verdana;
font-size: 11px;
text-align: left;
}

#inhalt #navibar
{
float: left;
margin: 0px; 
padding: 0px; 
width: 180px;
height: 400px;
background: #f90;
}

#inhalt #navilink
{
float: left;
margin: 0px 0px 0px 5px;  
padding: 0px;
width: 120px;
font-size: 11px;
background: #fa3;
border-style: solid;
border-width: 1px;
border-color: #fff;
}

* html #inhalt #navilink /* Korrektur für IE-3px-Bug  */
{
margin: 0px 0px 0px 2px; 
}
 
Hallo,

ich habe das jetzt wie folgt geändert:

diesen 3px Unterschied macht er immernoch. Beim neusten IE 6

Code: 
#inhalt .navilink
{
float:left;
margin:5px 0px 5px 10px; padding:0px; /*FEHLER !*/
width: 120px;
font-size:11px;
background: #fa3;
border-style: solid;
border-width: 1px;
border-color: #fff;
}

* html #inhalt .navilink /* Korrektur für IE-3px-Bug  */
{
margin: 5px 0px 5px 7px; 
}


mit dem hier funktioniert es:
Code: 
* html #inhalt .navilink /* Korrektur für IE-3px-Bug  */
{
width: 122px;
margin: 5px 0px 5px 5px; 
}

WARUM?
 
Zuletzt bearbeitet:
So sollte es auch funktionieren:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
}

#inhalt
{
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px; /* neg. Hälfte von width:760px = horizontal zentriertes DIV */
background: #transparent;
font-family: verdana;
font-size: 11px;
text-align:left;
}

#inhalt #navibar
{
float:left;
margin:0px;
padding:0px;
width: 180px;
height: 400px;
background: #f90;
}

#inhalt #navilink
{
margin:5px 0px 5px 10px;
padding:0px;
width: 120px;
font-size:11px;
background: #fa3;
border-style: solid;
border-width: 1px;
border-color: #fff;
}
-->
</style>

</head>
<body>

<div id="inhalt">
<div id="navibar"><div id="navilink">test</div>
</div>
</div>


</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück