Navigation "andocken" - Opera will nicht

[murat]

Hi.

Ich habe, wie auf Expedia.de eine Navigationsleiste. Die einzelnen sehen aus wie bei Expedia, nur dass sie standardmäßig gelb sind und einen schwarzen Rand haben. Der große Unterschied ist jedoch, dass die Beschriftung nicht im HTML/CSS gemacht ist, sondern auf dem Bild gemalt ist (nicht falsch verstehen bitte, es ist trotzdem nur _ein_ Bild, das eben beschriftet ist).

Unter all diesen Navipunkten habe ich ein Inhalts-div. Das hat einen 1px Rand.

Zwischen den Navigationspunkten und dem Inhalts-div ist jetzt natürlich ein Abstand. Ich möchte aber, dass die Linie der Navigations-Bilder direkt auf der 1px-Linie des Inhalts-div liegt.

Versucht habe ich es so:

  
<div class="header">Banner</div>  
  
<div class="navi">  
 <a href="#"><img alt="" src="img/png/btn_home2.png"></a>  
 <a href="#"><img alt="" src="img/png/btn_gen2.png"></a>  
 <a href="#"><img alt="" src="img/png/btn_akti2.png"></a>  
 <a href="#"><img alt="" src="img/png/btn_gast2.png"></a>  
</div>  
  
  
  
<div class="inhalt">  
 Inhalt  
</div>  

Das ist mit diesem CSS formatiert:

  
body{  
 font-size:14px;  
 font-family:Arial, Helvetica, sans-serif;  
}  
  
.header{  
 width:100%;  
 text-align:center;  
 line-height:150%;  
 font-size:16px;  
 border:1px solid #000000;  
 background-color:#CCCCCC;  
}  
  
.navi img{  
 margin-top:1%;  
 border:0;  
}  
  
.inhalt{  
 border:1px solid #000000;  
 margin:-0.3em 0 0 0.15em;  
 padding:2% 0 2% 2%;  
}  

Der Mozilla/Firefox - und erstaunlicherweise auch der IE - haben das jetzt so, wie ich es gerne haben würde, gemacht. Doch Opera nicht. Hat jemand eine Idee?

danke, euer murat aus Berlin

[Maz]

Moinsen,

versuch doch mal global ein *{padding:0; margin:0;} und schau ob das was verändert. Wenn ja, dann entweder so lassen oder nach dem Element suchen, welches das padding oder margin verursacht und dem gezielt den Nullwert zuweisen. Ohne Definition sind in den Browsern die Defaultwerte dafür unterscheidlich. Allerdings tritt eine ungewollte Lücke eher im IE auf... aber versuch macht kluch.

Ansonsten kann man auch gut Listen für Menus benutzen. <ul> und <ol> sind wie <div> Blockelemente. Horizontale Listen kannst Du per float der <li> erreichen.