css layout - Unterschied zwischen FF + IE

[mr.jones]

Hi an alle.

ich schlage mich gerade wieder mal mit dem leidigen Thema FF vs. IE rum. Mache im Auftrag gerade eine Seite für ein Versicherungsbüro und der Kunde möchte das Menü was da oben schon drin ist. Mein Problem, wenn ich es mit FF ansehe dann passt das Menü und der Header zusammen,keinerlei Probleme,schließt bündig ab.
Wenn ich es mit dem IE ansehe,dann fehlt ein Stück und nur bei Kontakt schließt es richtig ab.

Kann jemand helfen? Es soll überall gleich aussehen, in Opera und FF gehts schon nur der IE macht wieder mal zicken. Das Menü muss genau so breit wie der Header sein.

style.css

PHP-Code:

.menu {
font-family: arial, sans-serif;
color:#F6F5FA;
width:100%;
height:100px;
position:absolute;
font-size:12px;
top:17px;
left:140px;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:118px;
height:20px;
text-align:center;
color:#0000FF;
border:1px solid #0069CB;
border-top-style:0px solid;
background:#F6F5FA;
line-height:20px;
font-size:11px;
overflow:hidden;
}
.menu ul {
padding:0;
margin:0;
list-style:none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li ul {
display: none;
}

/* speziell für Browser außer IE */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:118px;}
.menu ul li:hover ul li a.hide {background:#0069CB; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#ffffff; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#ffffff; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:123px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
/*ende Menu*/ 


html code

PHP-Code:

<div class="menu">
      <ul>
        <li><a class="hide" href="index.html">Startseite</a></li>
        <li><a class="hide" href="uberuns.html">Über Uns</a></li>
        <li><a class="hide" href="aktuelles.html">Aktuelles</a></li>
        <li><a class="hide" href="produkte.html">Produkte</a>
<!--[if lte IE 6]>
<a href="index.html">LAYOUTS
<table><tr><td>
<![endif]-->
       <ul>
           <li><a class="hide" href="privat/pprodukte.html" title="private Produkte">private Produkte</a>
    <!--[if lte IE 6]>
    <a class="sub" href="privat/pprodukte.html" title="private Produkte">HOVER/CLICK</a> &gt;
    <table><tr><td>
    <![endif]-->
    <!-- Untermenü für private Produkte 
              <ul>
                   <li><a href="privat/palter.html" title="Altersvorsorge">Altersvorsorge</a></li>
                   <li><a href="privat/pabsicherung.html" title="Absicherung">Absicherung</a></li>
                   <li><a href="privat/pschutz.html" title="Schutz">Schutz</a></li>
                   <li><a href="privat/pzusatz.html" title="Zusatz">Ergänzung</a></li>
              </ul>
        -->
    <li><a class="hide" href="business/gprodukte.html" title="gewerbliche Produkte">gewerbl. Produkte</a>
       <!--[if lte IE 6]>
    <a class="sub" href="business/gprodukte.html" title="gewerbliche Produkte">HOVER/CLICK</a> &gt;
    <table><tr><td>
    <![endif]-->
    <!-- Untermenü für Businessprodukte
              <ul>
                   <li><a href="business/galter.html" title="Altersvorsorge">Altersvorsorge</a></li>
                   <li><a href="business/grisiken.html" title="Risiken der neuen Welt">Risiken der "neuen Welt"</a></li>
                   <li><a href="business/gabsicherung.html" title="Absicherung des Eigentum">betriebl.Eigentum</a></li>
              </ul>
        -->
      </ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="kontakt.php" title="Kontakt Versicherungsbüro Wabnitz">Kontakt</a>
<!--[if lte IE 6]>
    <a class="sub" href="kontakt.php" title="Kontakt Versicherungsbüro Wabnitz">HOVER/CLICK</a> &gt;
    <table><tr><td>
    <![endif]-->
  <ul>
<li><a class="hide" href="anfahrt.html" title="Anfahrt Versicherungsbüro Wabnitz">Anfahrt</a></li>
<!--[if lte IE 6]>
    <a class="sub" href="kontakt.php" title="Kontakt Versicherungsbüro Wabnitz">HOVER/CLICK</a> &gt;
    <table><tr><td>
    <![endif]-->
    </ul>
</li>
<li><a class="hide" href="impressum.html" title="Impressum">Impressum</a></li>
</div> 


Browser: IE 7, FF 3, Opera 9.5

WEBSEITE: versicherung-wabnitz.braintwist.de (vorläufig zur Erstellung)

[Padimi]

Also so richtig steige ich grad nicht durch, aber du meinst das die Grafik im ie rechts über das Menü drüber ragt oder?
Warum legst du nicht alles in ein Div welchem du eine feste Breite gibst.
Außerdem hätte ich margin und padding für alle Elemente am Anfang der Seite auf 0 gesetzt und nicht erst in der "menu ul" Class.
Das verschieben könnte auch damit zusammenhängen das du die Breite vom "head" div in EM angegeben hast und nicht in Pixel.
Am einfachsten ist es glaube ich wenn du dein Menü in das "head" Div legst und #head eine feste größe in pixel gibst.

[urvater]

Line 75, Column 5: end tag for "UL" omitted, but its declaration does not permit this.

</div>

✉
You forgot to close a tag, or
you used something inside this tag that was not allowed, and the validator is complaining that the tag should be closed before such content can be allowed.

The next message, "start tag was here" points to the particular instance of the tag in question); the positional indicator points to where the validator expected you to close the tag.
Line 20, Column 6: start tag was here.

<ul>
Line 90, Column 8: element "MARQUEE" undefined.

<marquee><a href="aktuelles.html" title="aktuelles">Hier mal eine Überschrift lä

✉

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case)

Der Validator sollte dir hier weiter helfen. Habs mal für dich gemacht