Style funkt in IE, jedoch nicht unter Firefox???

[SunnyHill]

Hallo zusammen!

Da ich alles andere als ein HTML-Coder und -Kenner bin, kann ich mein kleines Problemchen leider nicht selber lösen.... was ist an folgendem Code falsch, dass FireFox diesen "falsch" darstellt, und IE diesen "richtig"

Hier der Codeschnipsel:

<style type="text/css">
<!--
#container  {width:100%; margin:5px; padding:5px; text-align:left; background:#ffffff; color:#303030;}
#header     {height:80px; width:99%; background: #336699; color:#ffffff;}
#header h1  {padding:10px 0 0 20px; font-size:2.8em; background-color:inherit; color:#ffffff; letter-spacing:-2px; font-weight:normal;}
#header h2  {padding:10px; margin:20px 0 0 20px; font-size:1.6em; background-color:inherit; color:#f0f2f4; letter-spacing:-1px; font-weight:normal;}
-->

</style>

<div id="container" >

 <div id="header">
  <h1>blablabla</h1>
  <h2>blablabla</h2>
 </div>

</div>

Danke für eure Mithilfe!

SunnyHill

 

[berla]

Also den IE habe ich zwar nicht, aber der Code sieht im Firefox (links) und Safari (rechts) zumindest ordentlich aus:

Wie sieht er denn im IE aus?

 

[SunnyHill]

So wie bei dir schauts bei mir sowieso nicht aus

Außerdem habe ich vergessen zum Codeschnipsel noch ein paar Textpassagen nach dem Container-Div anzufügen. Erst unter Hinzufügen von Text wird bei mir der Unterschied bemerkbar.

Hier meine Darstellungen:

FireFox V3.5.3:
http://666kb.com/i/bdiq58nfvm15vnahv.jpg

IE 8:

 

[berla]

Antatt der Anweisung "ID", würde ich mit "class" arbeiten. Sollte aber nicht das Problem an sich sein. Mich irritiert etwas die Anweisung height:80px; ind der #header Definition. Die ganzen Höhenangaben haben mir auch schon des öfteren Probleme bereitet, da diese von den Browsern zum Teil sehr unterschiedlich interpretiert werden.

Ich würde diese Höhenangabe mal zu Testzwecken entfernen und schauen, ob der Rest dann passt.

 

[Broken Sword]

Hi, das ist ganz einfach gelöst. Du hast dem div#header eine genaue Höhe verpasst. Da reagiert Firefox stur und bleibt bei dieser. IE oder auch Opera hingegen lassen das Ding größer werden. Brauchst also nur deine Höhenangabe weg zu nehmen.

Gruß
Broken Sword

 

[SunnyHill]

Super, funktioniert

Danke Broken Sword (und berla) :bier2:

 

[Broken Sword]

=> Closed

Gruß
Broken Sword