Firefox ignoriert margin-bottom

[Luke]

Hi,

ich habe eine Menüleiste in dem sich mehrere Menüs befinden die durch margin-bottom einen Abstand zwischen sich haben. Dadurch sollte auch zwischen dem letzten Menü in der Leiste und dem unteren Leisten-Ende ein Abstand sein (alle Menüs haben per klassendefinition dieses margin-bottom). Im IE ist er auch da, nur im Firefox wird er nicht angezeigt, da ist einfach gar kein Abstand am Ende (zwischen den Menüs aber schon!). Der Code:

HTML

<div id="menu">  
 <div id="menu_header">  
  <div id="menu_footer">  
  
   <div class="menuitem">  
    <div class="menutitle">Mein blogage (Autor)</div>  
    <div class="menubody">  
     - <a href="#">Mein Profil</a><br />  
     - <a href="#">Meine Weblogs</a><br />  
     - <a href="#">Nachrichten</a><br />  
     - <a href="#">Freunde und Gruppen</a><br />  
     - <a href="#">Meine Dateien</a><br />  
     - <a href="#">Einstellungen</a>  
    </div>  
   </div>  
  
   <div class="menuitem">  
    <div class="menutitle">Seiten</div>  
    <div class="menubody">  
     - <a href="#">Why I'm so insanely cool</a><br />  
     - <a href="#">Another cool fact about me</a><br />  
     - <a href="#">About my insanely cool blog</a>  
    </div>  
   </div>  
  
  </div>  
 </div>  
</div>

CSS:

.menuitem {  
 margin-bottom: 27px;  
}  
  
.menuitem .menutitle {  
 font-family:  Arial, sans-serif;  
 font-size: 16px;  
 font-weight: bold;  
 background: url('images/menu_separator.gif') no-repeat bottom;  
 padding-bottom: 6px;  
}  
  
.menuitem .menubody {  
 margin: 8px 0px 0px 0px;  
}

Grüße,
Luke

[MudGuard]

Hi,

ich habe eine Menüleiste in dem sich mehrere Menüs befinden die durch margin-bottom einen Abstand zwischen sich haben. Dadurch sollte auch zwischen dem letzten Menü in der Leiste und dem unteren Leisten-Ende ein Abstand sein (alle Menüs haben per klassendefinition dieses margin-bottom). Im IE ist er auch da, nur im Firefox wird er nicht angezeigt, da ist einfach gar kein Abstand am Ende (zwischen den Menüs aber schon!). Der Code:

Beispielseite?

Ansonsten kann man nur raten, evtl. ist es ein Fehler im IE, daß dieser die collapsing margins nicht richtig anwendet.

cu,
Andreas

[Luke]

Beispielseite?

http://www.bombach.info/luke/selfhtml/margin-bottom/

Das Menü rechts, da sollte unten noch Platz zwischen Menü und Leistenende sein.

Ansonsten kann man nur raten, evtl. ist es ein Fehler im IE, daß dieser die collapsing margins nicht richtig anwendet.

Das Problem tritt ja nicht im IE auf, sonst würd ich mich über gar nichts wundern, sondern im Firefox!

Grüße
Luke

[wahsaga]

hi,

Ansonsten kann man nur raten, evtl. ist es ein Fehler im IE, daß dieser die collapsing margins nicht richtig anwendet.

Das Problem tritt ja nicht im IE auf, sonst würd ich mich über gar nichts wundern, sondern im Firefox!

Dann könnte es ja gut sein, dass nicht nur der IE den (Denk-)Fehler macht, sondern auch du.

Hast du dich zum Stichwort Collapsing Margins informiert?

gruß,
wahsaga

[Luke]

Hm, ja gut. Ich krieg aber nicht raus wie man jetzt das unterschiedliche Verhalten von IE und Firefox / normalen Browsern unter einen Hut kriegt.

[Detlef G.]

Hallo Luke

http://www.bombach.info/luke/selfhtml/margin-bottom/

Das Menü rechts, da sollte unten noch Platz zwischen Menü und Leistenende sein.

Ansonsten kann man nur raten, evtl. ist es ein Fehler im IE, daß dieser die collapsing margins nicht richtig anwendet.

Das Problem tritt ja nicht im IE auf, sonst würd ich mich über gar nichts wundern, sondern im Firefox!

Doch, das Problem tritt im IE auf, er beachtet die zusammenfallenden Ränder nicht. (Du kannst die Seite ja auch mal im Opera aufrufen, meiner ist sich mit Firefox einig.)

Du müsstest dafür sorgen, dass margin-bottom von .menuitem nicht direkt mit margin-bottom von #menu_footer zusammenstößt. Dies könntest du am einfachsten so erreichen:

#menu_footer {  
  background: url('images/menu_footer.gif') no-repeat bottom;  
  padding: 34px 21px 1px 26px;

^
  ...

Auf Wiederlesen
Detlef

[floater]

Hallo,

probier doch mal aus vor ".menuitem" im css die ID eines der übergeordneten elemente zu notieren, also so:

--
#ID_übergeordnetesElement .menuitem
--

Manchmal hilft das schon...

Gruß,
Floater