float will nicht wie ich es will in firefox und Netscape7

[dante]

hallihallo,

nachdem ich nun genug über den tollen aprilscherz hier "gelacht" habe, versuch ich trotzdem mal was zu posten.

ich habe ein div "bar" element mit mehreren unterelementen. für bar habe ich nun float left definiert, damit der anchfolgende content (der im div "content" liegt) schön rechts rumfliessen kann. (hier im blauen rahmen)

soweit funktioniert es auch alles im IE und im opera.
firefox und netscape 7 machen mir damit aber probleme. "bar" wird viel weiter rechts positioniert. es sieht so aus, als ob es hinter einer formatierten liste "hängt", welche in einem sparatem div "header" liegt. (header hier im gelbem ahmen)

bilder sagen mehr als worte:
das header div hat einen gelben rand, der content hat einen roten rand und die bar hat einen blauen rand.

so sieht es im IE aus:
<img src="http://www.volk-marketing.de/test/0104/ie.gif" border="0" alt="">

und so im opera (7er):
<img src="http://www.volk-marketing.de/test/0104/opera.gif" border="0" alt="">

firefox ist der erste der damit probleme macht:<img src="http://www.volk-marketing.de/test/0104/firefox.gif" border="0" alt="">

netscape 7 mag es so auch nciht

<img src="http://www.volk-marketing.de/test/0104/netscape7.gif" border="0" alt="">

was sehr komisch ist, dass auch die liste aus ihrem gelben bereich (div "header") rausspringt.

ok jetzt noch der code zum verständnis:

HTML:
-------------------------------------------------------
<div id="header">

<div id="globi"><img src="schwarz_claim.gif" alt="relax and enjoy." /></div>
  <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">ausgeschwärzt</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a class="help" href="#">FAQ</a></li>
    <li><a href="#">Press</a></li>
  </ul>

</div>

<div id="bar">

(...)

</div><!-- bar ende -->

<div id="content"><p>Nein, meine Texte les ich nicht, so nicht, sthnte Oxmox. Er war mit Franklin,
  Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel)
  zugange. Sie warteten auf die fette Gill, um bei der Bank of Helvetica die Kapitlchen
  in Kapital umzuwandeln. F </p></div>

-------------------------------------------------------

und die css angaben:

CSS:

-------------------------------------------------------

#header {
width:100%;
line-height:normal;
background:#00A079 url("navi_bg.gif")
 repeat-x bottom;
z-index:20;
border: 5px solid yellow;
}

#header ul {
margin:0 0 0 209px;
list-style:none;
padding:10px 10px 0;
}

#header li {
float:left;
background:url("navi_links.gif")
   no-repeat left top;
margin:0;
padding:0 0 0 5px;
border-bottom:1px solid #000000;
}

#header a {
float:left;
/*fixt klickbaren block IE-Win
F*** M$ */ width:0.1em;
display:block;
background:url("navi_rechts.gif")
 no-repeat right top;
padding: 5px 15px 4px 9px;
text-decoration:none;
font-weight:bold;
color:#000000;
}

#wrapper {
/* kommt wenn die seite fertig ist
dient zum überspringen der oberen
sachen wenn es kein css gibt.*/
}

#header > ul a {width:auto;}
/*Kommentierter Schrägstrich Hack
versteckt Regel vor IE5-Mac \*/
#header a {float:none;}
/* Ende IE5-Mac Hack*/

#header a:hover {
color:#008D6B;
}

#header #current {
background:url("navi_links_on.gif")
 no-repeat left top;
border: 0px;
}

#header #current a {
background:url("navi_rechts_on.gif")
 no-repeat right top;
padding-bottom: 5px;
color:#008D6B;
}

#bar {
width:209px; /*box model hack reinmachen*/
height:100%;
/*top:0px;
left:0px;*/
background-color:#E5E5E5;
z-index:10;
float:left;
padding:0px;
border: 5px solid blue;
}

#content {
border: 1px solid red;
padding-top: 0,3em;
padding-right: 1em;
z-index:5;
margin-top:50px;
}

-------------------------------------------------------

ist alles validiertes xhtml 1.0.
ich hoffe ich habe mich verständlich ausgedrückt und ihr könnt mir einen tipp zu dem problem geben!

gruss markus

[dante]

was stimmt mit meinem post nicht?

[nag]

Hallo,

es sieht so aus, als ob es hinter einer formatierten liste "hängt",

das sieht nicht nur so aus... der grund liegt beim "float:left" für die Links in der Liste.
gib der "bar" die css-eigenschaft "clear:left".

bilder sagen mehr als worte:

super große bilder sagen aber nicht unbedingt mehr ;)

was stimmt mit meinem post nicht?

es ist sehr unübersichtlich, außerdem nervt mich persönlich der april"scherz" beim lesen der thread-headlines.

mfg NAG