✔ Platz zwischen IMG - BG

[unlord]

Guten Abend,
habe mal wieder eine Frage zu HTML/CSS... und zwar hab ich ein Leerraum zwischen einem Bild und einem BG, der in einem DIV steckt, der nicht auftreten sollte:

<tr>
   <td width="825" height="70" colspan="2">
	<map name="basic_navi" id="basic_navi">
  		<area shape="rect" coords="131,7,160,18" href="index.php?page=news">
  		<area shape="rect" coords="210,7,243,18" href="index.php?page=profile">
  		<area shape="rect" coords="288,7,332,18" href="index.php?page=auftritte">
  		<area shape="rect" coords="362,7,418,19" href="index.php?page=downloads">
  		<area shape="rect" coords="451,6,493,19" href="index.php?page=gallerie">
  		<area shape="rect" coords="527,7,583,18" href="index.php?page=gaestebuch">
  		<area shape="rect" coords="610,7,665,19" href="index.php?page=sponsoren">
  		<area shape="rect" coords="699,7,741,18" href="index.php?page=kontakt">
	</map>
	<img id="basic_navi" src="./images/layout/basic_navi.jpg" width="825" height="31" alt="" border="0" usemap="#basic_navi">
	<div style="width: 825px; height: 39px;">
		<div style="float: left; width: 289px; height: 39px; background-image: url('./images/layout/basic_bottom_left.jpg'); background-repeat: no-repeat;"></div>
	</div>
   </td>
</tr>

...hier habe ich den Leerraum zwischen dem bild "basic_navi.jpg" und dem BG "basic_bottom_left.jpg" im DIV... warum entsteht der? wie bekomme ich ihn weg?

thx 4 hlp
unlord

 

[Maik]

Sollte so funktionieren:

<div style="width:825px; height:39px; margin-top:-3px;">
     <div style="float: left; width: 289px; height: 39px; background-image: url('./images/layout/basic_bottom_left.jpg'); background-repeat: no-repeat;"></div>
</div>

 

[unlord]

sry hatte was vergessen zu sagen... das problem tritt nur beim IE auf... wenn ich jetzt das margin-top auf -3 setze sieht das ganze im Firefox verbugt aus

 

[Maik]

CSS-Code

div#box
{
width: 825px; 
height: 39px;
}

* html div#box /* Für IE */
{
margin-top: -3px;
}

<div id="box">
    <div style="float: left; width: 289px; height: 39px; background-image: url('./images/layout/basic_bottom_left.jpg'); background-repeat: no-repeat;"></div>
</div>

 

[unlord]

ok geht mit -4 perfekt... vielen Dank

 

[Inspector]

Hi,

solche Ränder sind immer die Kombination aus margin und padding. Über die Default-Einstellungen dazu gibt's keine Vorgaben, daher verhält sich hier keiner der Browser falsch. Wenn Du sicher gehen willst, gib margin und padding sowohl für das Bild als auch für den umgebenden Container explizit an.