Float bei Bildern - Fehlende Rahmen

[Zeromancer]

Hallo alle,

neben meinem Problem mit den PNG ärgert mich schon eine ganze Weile ein Darstellungsproblem auf unserer Vereinsseite http://www.bbl-online.com/.

Der Headbereich ist ein <div> mit Hintergrundgrafik von links aus. Um die Sache in die Breite skalierbar zu machen, wird der Abschluss auf der rechten Seiten mittels kleinem Bild und float realisiert und enthält einen Anker, um zum Seitenanfang zu gelangen:

  
<div id="head">  
<a name="oben"><img src="/pixx/layout/header_kl.jpg" width="30" height="150" alt="" style="float:right;" /></a>  
<ul id="navi_head">  
<li><a href="http://www.example.org/" title="Example">Example</a></li>  
<li><a href="http://www.example.org/" title="Example">Example</a></li>  
</ul>  
<br style="clear:right;" />  
</div>  

  
div#head {  
  background:transparent url('/pixx/layout/header_gr.jpg') no-repeat;  
  width:100%;  
  height:150px;  
  overflow:hidden;  
  padding-right:1px;  
}  
div#head img {  
  margin:0px 0px 0 0;  
}  
                 /*HORIZONTALE NAVIGATION*/  
ul#navi_head {  
  list-style-type:none;  
  text-align:center;  
  height:1.2em;  
  padding-top:110px;  
  margin-top:0px;  
  width:80%;  
  float:right;  
}  
ul#navi_head li {  
  width:6.4em;  
  float:right;  
  margin:auto 0.1em auto 0.1em;  
  text-align:center;  
}  
  
ul#navi_head a {  
  display:block;  
  width:100%;  
  float:left;  
  background:transparent;  
  color:#09f;  
  font-weight:bold;  
  font-size:0.6em;  
  text-decoration:none;  
  border-left:solid 4px #09f;  
}  
  
ul#navi_head a:hover {  
  color:#fb0;  
  background:transparent;  
}  

Mein Problem ist die rechte obere Ecke, die im Firefox/Opera verschoben aussieht. Leider finde ich den Fehler nicht. Habe ich eine Kombination von Anweisungen benutzt, die sich nicht vertragen?

IE 6

Firefox 1.0.7

Opera 8.01

Ein fehlendes Semikolon habe ich mittels CSS-Validator schon gefunden. Aber daran liegt es nicht.

Mit freundlichen Grüßen,
André

[Martin Hölter]

Hi!

Denk nochmal über

div#head {  
  width:100%;  
  padding-right:1px;  
}
~~~ nach.  
  
  
Gruß aus [Iserlohn](http://www.iserlohn.de/)  
  
Martin

-- 
Selfcode: [ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%7B+fl%3A%28+br%3A%5E+va%3A%29+ls%3A%23+fo%3A%7C+rl%3A%28+n4%3A%28+ss%3A%7C+de%3A%3E+js%3A%29+ch%3A%3F+sh%3A%28+mo%3A%7C+zu%3A%29)  
Geht zum [Weltspartag](http://www.sparkasse-iserlohn.de/ihre_sparkasse/weltspartag/)!

[Zeromancer]

Hallo Martin,

Denk nochmal über

div#head {

width:100%;
  padding-right:1px;
}

  
stimmt! Ein Div ist eh ein Blockelement (=100% Breite per default). Mit "padding-right" hatte ich ich gespielt, um den Rahmen rechts nicht vom Bild überdecken zu lassen. Ist auch entfernt.  
  
Im Opera und IE funktioniert es jetzt wie gewünscht. Der Rahmen ist sichtbar. Firefox sträubt sich noch...  
  
Mit freundlichen Grüßen,  
André