✔ IE-Firefox Problem mit margin-top

[HTTT]

Hallo,

in CSS hab ich 2 verschiede "mouse over" Effekte
der erste "BPC1" hat eine Bildeinblendung bei margin-top 99px die IE und Firefox verstehen
der zweite ist "BPC2" mit dem identischen Code aber bei 97px was nur Firefox versteht, IE lässt das Bild weiter unten einblenden
WARUM, der CSS Code ist doch identisch

CSS:

ul#listmenu {
margin:0, 0, 0, 0;
list-style:none;
}

ul#listmenu li a.bpc1:link, ul#listmenu li a.bpc1:visited {
display:block;
position: absolute;
margin-top: 99px;
margin-left: -36px;
width:84px;
height:118px;
text-decoration:none;
padding: 0,0,0,0;}

ul#listmenu li a.bpc1:hover {background:url(../pictures/BPC1.jpg);}

ul#listmenu li a.bpc1 span.popup {display:none;}

ul#listmenu li a.bpc1:hover span.popup {
display:block;
position:absolute;
left:-4px;
top:70px;
width:1016px;
height:637px;
background:url(../pictures/Shop_BPC1.jpg);
text-decoration:none;
padding: 0,0,0,0;

}

ul#listmenu li a.bpc2:link, ul#listmenu li a.bpc2:visited {
display:block;
position: absolute;
margin-top: 97px;
margin-left: 50px;
width:85px;
height:122px;
text-decoration:none;
padding: 0,0,0,0;

}

ul#listmenu li a.bpc2:hover {background:url(../pictures/BPC2.jpg);}

ul#listmenu li a.bpc2 span.popup {display:none;}

ul#listmenu li a.bpc2:hover span.popup {
display:block;
position:absolute;
left:-90px;
top:73px;
width:1021px;
height:641px;
background:url(../pictures/Shop_BPC2.jpg);
text-decoration:none;
padding: 0,0,0,0;

}

html:

<ul id="listmenu">
<li><a href="../index.html" class="bpc1"><span class="popup"></span></a></li>
<li><a href="../index.html" class="bpc2"><span class="popup"></span></a></li>
</ul>

Danke für Tips

 

[Maik]

Hi,

was beim Überfliegen des Stylesheets auf den ersten Blick gleich auffällt: die Kommatas zwischen den vier Wertangaben bei der margin- und padding-Deklarationen sind unzulässig.

mfg Maik

 

[HTTT]

Hi,

was beim Überfliegen des Stylesheets auf den ersten Blick gleich auffällt: die Kommatas zwischen den vier Wertangaben bei der margin- und padding-Deklarationen sind unzulässig.

mfg Maik

wenn ich alle margins/paddings einfach mal lösche erhalte ich den gleichen Fehler
BPC1 wird in beiden Browsern korrekt angezeigt
BPS 2 nicht

ul#listmenu {list-style:none;}

ul#listmenu li a.bpc1:link, ul#listmenu li a.bpc1:visited {
display:block;
position: absolute;
margin-top: 99px;
margin-left: -36px;
width:84px;
height:118px;
text-decoration:none;}
ul#listmenu li a.bpc1:hover {background:url(../pictures/BPC1.jpg);}
ul#listmenu li a.bpc1 span.popup {display:none;}
ul#listmenu li a.bpc1:hover span.popup {
display:block;
position:absolute;
left:-4px;
top:70px;
width:1016px;
height:637px;
background:url(../pictures/Shop_BPC1.jpg);
text-decoration:none;}

ul#listmenu li a.bpc2:link, ul#listmenu li a.bpc2:visited {
display:block;
position: absolute;
margin-top: 97px;
margin-left: 50px;
width:85px;
height:122px;
text-decoration:none;}
ul#listmenu li a.bpc2:hover {background:url(../pictures/BPC2.jpg);}
ul#listmenu li a.bpc2 span.popup {display:none;}
ul#listmenu li a.bpc2:hover span.popup {
display:block;
position:absolute;
left:-90px;
top:73px;
width:1021px;
height:641px;
background:url(../pictures/Shop_BPC2.jpg);
text-decoration:none;}

 

[Maik]

Hi,

nimm mal die folgende Regelerweiterung im Stylesheet auf, um die Listeneinträge innerhalb des Listenelements horizontal auszurichten:

ul#listmenu li {
display:inline;
}

mfg Maik

 

[HTTT]

Hi,

nimm mal die folgende Regelerweiterung im Stylesheet auf, um die Listeneinträge innerhalb des Listenelements horizontal auszurichten:

ul#listmenu li {
display:inline;
}

mfg Maik

Nein die Antwort ist falsch
Man muss im html Code ein Browserweiche zu 2 verschiedenen CSS Dateien einbauen!

 

[Maik]

Wenn du (aus Trotz wegen deines gelöschten Doppelthreads) meinst, dass meine Antwort falsch ist, und meine Vorschläge hier nicht fundiert sind, dann lass ich dich gerne in deinem (Irr-)Glauben, denn ich weiß für meinen Teil, dass die empfohlene Regelerweiterung für deinen vorgestellten CSS-Code in allen mir zur Verfügung stehenden gängigen Browsern, darunter auch im IE (6 + 7), zu dem Ergebnis führt, dass die Links mit ihren "CSS-Popups" wie gewünscht ausgerichtet / positioniert werden, und das Problem der fehlerhaften margin-top-Deklaration von seitens des IE damit behoben ist - und das alles ohne jegliche CSS-Browserweiche zu zwei unterschiedlichen Stylesheets.

mfg Maik

 

[HTTT]

Hallo Maik,

ups, diesmal ichbin ich wohl dran!
Tschuldigung!

Hab in deinem CSS-Vorschlag überlesen das, es listmenu li ist

ul#listmenu li {display:inline;}

Antwort somit korrekt ;-)