✔ alter Internet-Explorer verschiebt divs

D

denisSCR

Mitglied
Hallo, folgendes Problem:
Internet Explorer 7 und Firefox zeigen meine Seite richtig an,
alle älteren Internet Explorer verschieben die Divs. Und zwar "ausbildung", "ausbildung-text", "moderation" und "moderation-text"
Ich denke dass es am float liegt, darauf kann ich jedoch nicht verzeichten.
Hat jemand ne Idee wie ich das Problem in den Griff kriege?

body {
background-image: url(img/hintergrund.jpg);
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
color:#445A91;
font-family: Verdana;
font-weight: bolder;

}

#karte {

background-image: url(img/karte.jpg);
position:absolute;
left: 50%;
width: 1010px;
margin-left: -505px;
top: 50%;
height: 654px;
margin-top: -326px;

}

#menu {

width:570px;
height:156px;
margin-top:290px;
margin-left:5px;
}

#seminare{

width:167px;
height:44px;
float:left;
}

#ausbildung{

width:182px;
height:44px;
margin-left:28px;
margin-top:9px;
float:left;

}

#moderation{

width:179px;
height:42px;
margin-left:74px;
margin-top:10px;
float:left;
}

#seminare-text{

width:364px;
height:44px;
float:left;
text-align:right;
font-size:13px;
line-height:46px;
}

#ausbildung-text{

width:323px;
height:44px;
margin-top:9px;
float:left;
text-align:right;
font-size:13px;
line-height:46px;
}

#moderation-text{

width:280px;
height:42px;
margin-top:10px;
float:left;
text-align:right;
font-size:13px;
line-height:40px;
}

#footer{
margin-top:100px;
font-size:13px;
text-align:center;
}
Zum Vergrößern anklicken....

HTML: 
<body>
<div id="karte">
<div id="menu">

<div id="seminare"><a href="http://www.link" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/seminare.gif',0)"><img src="img/seminare_in.gif" name="Image1" width="167" height="44" border="0" alt="Seminare"></a></div>
<div id="seminare-text">[ Kommunikationstraining | Cross - Culture ]</div> 
<div id="ausbildung"><a href="http://www.link"" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','img/ausbildung.gif',0)"><img src="img/ausbildung_in.gif" name="Image2" width="182" height="44" border="0" alt="Ausbildung"></a></div>
<div id="ausbildung-text">[ Wertanalyse - Zertifizierung VM 1 - VM 3 ]</div>
<div id="moderation"><a href="http://www.link"" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','img/moderation.gif',0)"><img src="img/moderation_in.gif" name="Image3" width="179" height="42" border="0" alt="Moderation"></a></div> 
<div id="moderation-text">[ Value-Management (VM) - Projekte ]</div>

</div>

<div id="footer">

Text

</div>
</div>
 
Hi,

hier dürfte der "Doubled-Float-Margin-Bug" in Erscheinung treten, bei dem der horizontale margin-Wert verdoppelt wird.

Lösung: die betroffenen Blöcke zusätzlich mit display:inline formatieren.

mfg Maik
 
funktioniert! danke! :)

klasse sieht schon viel besser aus!! :)
jetzt sind die beiden divs noch um ca. 5 pixel verschoben ?!
 
Von welchen beiden DIVs sprichst du, und wie lautet nun der aktuelle CSS-Code?

mfg Maik
 
"ausbildung" und "moderation"

Code: 
body {
	background-image: url(img/hintergrund.jpg);
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	color:#445A91;
	font-family: Verdana;
	font-weight: bolder;
	
}

#karte {

background-image: url(img/karte.jpg);
position:absolute;
left: 50%;
width: 1010px;
margin-left: -505px;
top: 50%;
height: 654px;
margin-top: -326px; 

}

#menu {

width:570px;
height:156px;
margin-top:290px;
margin-left:5px;
}

#seminare{

width:167px;
height:44px;
float:left;
display:inline;
}

#ausbildung{

width:182px;
height:44px;
margin-left:28px;
margin-top:9px;
float:left;
display:inline;
}

#moderation{

width:179px;
height:42px;
margin-left:74px;
margin-top:10px;
float:left;
display:inline;
}

#seminare-text{

width:364px;
height:44px;
float:left;
text-align:right;
font-size:13px;
line-height:46px;
display:inline;
}

#ausbildung-text{

width:323px;
height:44px;
margin-top:9px;
float:left;
text-align:right;
font-size:13px;
line-height:46px;
display:inline;
}

#moderation-text{

width:280px;
height:42px;
margin-top:10px;
float:left;
text-align:right;
font-size:13px;
line-height:40px;
display:inline;
}

#footer{
margin-top:100px;
font-size:13px;
text-align:center;
}
 
Kannst du mir auf die Sprünge helfen, in welcher Richtung die beiden Blöcke verschoben sein sollen - ich erkenne da nämlich keinen Unterschied zu den anderen Browsern.

mfg Maik
 
Diese Maßabweichung von den gesetzten Außenabständen kann ich bei mir nicht messen.

mfg Maik
 
vielleicht liegts ja am html, bzw. an den bildern an sich?
HTML: 
<div id="menu">

<div id="seminare"><a href="http://www.link" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/seminare.gif',0)"><img src="img/seminare_in.gif" name="Image1" width="167" height="44" border="0" alt="Seminare"></a></div>
<div id="seminare-text">[ Kommunikationstraining | Cross - Culture ]</div> 
<div id="ausbildung"><a href="http://www.link" " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','img/ausbildung.gif',0)"><img src="img/ausbildung_in.gif" name="Image2" width="182" height="44" border="0" alt="Ausbildung"></a></div>
<div id="ausbildung-text">[ Wertanalyse - Zertifizierung VM 1 - VM 3 ]</div>
<div id="moderation"><a href="http://www.link" " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','img/moderation.gif',0)"><img src="img/moderation_in.gif" name="Image3" width="179" height="42" border="0" alt="Moderation"></a></div> 
<div id="moderation-text">[ Value-Management (VM) - Projekte ]</div>

</div>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück