✔ Mouseover beim IE

[Falloutboy6]

Hi,

habe folgendes Problem. Wie man beim Bild unten sieht soll der Menupunkt bei einem Mouseover mit einem Balken unterstrichen werden. Geht man weg soll es halt so aussehen wie Menupunkt "Über uns".
Nun mein Problem, der Orange Balken sollte eigentlich gleich unter dem Menupunkt erscheinen.
Bei Mozilla funktioniert es einwandfrei beim IE nicht. Wer weiss was das Problem ist?
Anbei das Bild und der Quelltext.

Danke schonmal.

http://test.focus-werbestudio.de/groetsch/mouseover.jpg

<table cellspacing="0" cellpadding="0" border="0" height="20px">
<tr>
<td height="20px" align="center"><a href="index.php?action=1" class="menu" onmouseover="home.src='images/menu_aktiv.gif';"
onmouseout="home.src='images/menu_inaktiv.gif';">Home</a></td>
<td height="20px" width="25px" align="center">•</td>
<td height="20px" align="center"><a href="home.php?action=2" class="menu" onmouseover="ueber_uns.src='images/menu_aktiv.gif';"
onmouseout="ueber_uns.src='images/menu_inaktiv.gif';">&Uuml;ber uns</a></td>
<td height="20px" width="25px" align="center">•</td>
<td height="20px" align="center"><a href="home.php?action=3" class="menu" onmouseover="zertifizierung.src='images/menu_aktiv.gif';"
onmouseout="zertifizierung.src='images/menu_inaktiv.gif';">Zertifizierung</a></td>
<td height="20px" width="25px" align="center">•</td> 
<td height="20px" align="center"><a href="home.php?action=4" class="menu" onmouseover="produkte.src='images/menu_aktiv.gif';"
onmouseout="produkte.src='images/menu_inaktiv.gif';">Produkte</a></td>
<td height="20px" width="25px" align="center">•</td> 
<td height="20px" align="center"><a href="home.php?action=5" class="menu" onmouseover="kontakt.src='images/menu_aktiv.gif';"
onmouseout="kontakt.src='images/menu_inaktiv.gif';">Kontakt</a></td> 
</tr>
 
<tr>
<td height="3px" valign="top">
<img src="images/menu_inaktiv.gif" width="35px" height="3px" alt="" border="0" name="home">
</td>
<td height="3px"></td>
<td height="3px">
<img src="images/menu_inaktiv.gif" width="59px" height="3px" alt="" border="0" name="ueber_uns"> 
</td>
<td height="3px"></td>
<td height="3px">
<img src="images/menu_inaktiv.gif" width="89px" height="3px" alt="" border="0" name="zertifizierung"> 
</td>
<td height="3px"></td>
<td height="3px">
<img src="images/menu_inaktiv.gif" width="59px" height="3px" alt="" border="0" name="produkte">
</td>
<td height="3px"></td>
<td height="3px">
<img src="images/menu_inaktiv.gif" width="50px" height="3px" alt="" border="0" name="kontakt"> 
</td> 
</tr> 
</table>

 

[Maik]

Der Grund dafür sind die Zeilenumbrüche im HTML-Quelltext zwischen <td> ... </td> und dem img-Element, auf die der IE mit Verschiebungen im Layout reagiert:

<td height="3px" valign="top">
<img src="http://www.tutorials.de/forum/images/menu_inaktiv.gif" width="35px" height="3px" alt="" border="0" name="home">
</td>

Erweitere das Stylesheet (CSS-Datei) mit folgender CSS-Regel und alles wird gut im IE

img {
    display: block;
}

 

[Falloutboy6]

super einwandfrei danke dir. Genau das Hilft.

Thanks

Schönes Wochenende

 

[Maik]

Dann markiere bitte zukünftig ein "gelöstes" Thema auch selbständig als erledigt.