✔ Abstände DIV im IE

[tinella]

Liebe Loite

Ich bin echt langsam am verzweifeln.

Ich habe eine Navigation, Buttons die in Div's angeordnet sind.
Hier ein Navigationspunkt (restliche sind alle gleich)

<!-- HOME WITHOUT SUBMENU -->	
<div class="navipoint">
	<a href="<?php echo $_SERVER['PHP_SELF'];?>?textContent=content/home&amp;titleContent=images/titles/hometitle">
		<img src="/images/navigation/<? if (preg_match("/\/home/msi", $_SERVER['REQUEST_URI'])) echo"_";  ?>
		home.gif" name="Home" vspace="6" border="0" id="Home" onmouseover="MM_swapImage('Home','','/images/navigation/_home.gif',1)" 
		onmouseout="MM_swapImgRestore()" />
	</a>
</div>

Das dazugehörende CSS sieht folgendermassen aus:

.navipoint{
background-color:#336699;
border-bottom:1px solid #fabf00;
border-right:1px solid #000000;
}

Mein Problem besteht darin, dass die Navigation im Mozilla richtig dargestellt wird, aber im IE erstellt es mir oben und unten zwischen dem Bild und dem Border einen Abstand von etwa 4 Pixel.

Also etwa so:

Border
Abstand
Bild
Abstand
Border

Die Abstände müssen unbedingt weg.
Ich habe die verschiedensten Padding- & Marginvariationen ausprobiert - ohne Resultat.


Hat jemand von euch eine Idee, wie ich diesen dämlichen Bug beseitigen kann?

Wäre euch sehrrrr dankbar.

Ich grüsse euch, Tinella

 

[Maik]

Das wird wohl zum einen an dem Attribut vspace="6" und zum anderen an den Zeilenumbrüchen (= white spaces) im HTML-Code zwischen <div> ... </div> und den Grafik-Links liegen.

Lezteres kannst du mit folgender CSS-Regel beheben:

a img {
display:block;
}

Da vermutlich die Buttons horizontal ausgerichtet sind, müsstest du in der Regel noch zusätzlich die float:left-Eigenschaft hinzufügen.

 

[tinella]

Super, genau das war's!

Vielen Dank!

Ich wünsche euch allen ein wunderschönes Wochenende!

Tinella

 

[Maik]

Danke, ebenso