ungewollter Rand unter Bild

[MrMonkey]

Hallo.

Ich habe eine Seite mit XHTML Strict 1.0 und CSS entworfen.

Links ist eine Navi, darüber ein Bild mit der Aufschrift "Navigation".
Mein Code sieht so aus:
<div id="navi">
<img src="images/navigation.jpg" alt="Navigation"/>
<ul>
<li><a href="index.php?section=news">News</a></li><!--
andere navipunkte...
--></ul>
</div id="navi">

Zwischen dem Bild und der Navi lassen Firefox und IE beide ein paar Pixel platz.
Habe auch schon mit den margin Werten rumgespielt, hat alles nicht geholfen... Wisst ihr wie ich die Lücke zwischen Bild und Navi schließen kann?

Thx

 

[Tankred]

Wieso führst Du die ID am Schluß nochmal auf?

 

[MrMonkey]

Wieso führst Du die ID am Schluß nochmal auf?

huch, Fehler beim abschreiben, steht im Quelltext nicht drin.

 

[Tankred]

Okay, dann gib doch noch den CSS-Code an, der hier relevant ist.

 

[MrMonkey]

ich kopier dir einfach mal alles die Navi betreffend heraus:

#navi
{
text-align:center;
font-weight:bold;
width:150px;
line-height:20px;
float:left;
}

#navi img
{
margin:0;
}

#navi ul
{
background-color:black;
padding:0;
margin:0;
}

#navi li
{
font-size:0.9em;
list-style-type:none;
width:150px;
}

#navi li a
{
display:block;
color:white;
background-image:url(../images/navi.jpg);
text-decoration:none;
width:150px;
}

#navi li a:hover
{
color:black;
background-image:url(../images/navi2.jpg);
}

 

[Tankred]

Okay... probiere mal, die Bildzeile so zu ändern:

<div><img src="images/navigation.jpg" alt="Navigation"/></div>

 

[MrMonkey]

ändert sich leider nichts, dafür hab ich nen screenie für euch:

 

[Tankred]

Dann liegt es aber NICHT an dem Code, den Du hier gepostet hast.

So sieht es im IE und im FF aus:

Das rote Ding ist ein Bild, darunter ist Deine Dir bekannte Navigation.

 

[MrMonkey]

woran könnte es dann liegen? habe aus sowohl auf meinem apache als auch auf einem ohost-space getestet, hat beides den selben effekt gezeigt.

 

[MrMonkey]

ein einfaches

display:block;

in #navi img

hat geholfen.