[FF/CSS] tekst in bug op positie van vorige

[Verwijderd]

Goededag allen,

Ik heb een FireFox/CSS probleem waar ik niet uitkom. Ik heb een menu gemaakt, met daarboven ook een breadcrumb menu. Deze twee zitten elk in een eigen div, en staan onder elkaar, met niets van positioning in de css.

In IE werkt het goed; zowel in de breadcrumb als het normale menu begint de tekst helemaal links. Echter, in Firefox begint de tekst van het onderste menu, waar de bovenste is afgelopen (dus verder naar rechts)

Plaatjes zeggen meer dan duizend woorden: IE - FF

Doe ik hier nu gewoon iets heel stoms, of zit het probleem echt verstopt?

Alvast bedankt!

De html:

HTML:

<div class="heading">
  <div class="topline"></div>
  <div class="midsection">
    <div class="toplogo"><a href="./"><img src="/themes/images/logo/logo.117x49.gif" alt="" width="117" height="49"/></a></div>
    <div class="metanav">
    <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
    </div>
  </div>
  <div class="topmenu">
    <div style="float: left; margin-left: 11px;"><p><strong><?php if ($breadcrumb): print $breadcrumb; endif; ?></strong></p></div>
  </div>
</div>
<div class="secondmenu">tekst</div>

De css:

Cascading Stylesheet:

.heading {
    background-color:#FFFFFF;
    font-size: 12px;
}
.heading .topline {
    background-color: #5668AA;
    width: 100%;
    height: 4px;
}
.heading .midsection {
    width: 760px;
    height: 60px;
    margin: 0 auto;
    padding-top: 10px;
}
.heading .midsection .toplogo {
    float: left;    
}
.heading .midsection .metanav {
    float:right;
    width: auto;
    height: 49px;
    vertical-align: middle; 
}
.heading .midsection .metanav ul {
    list-style-type: none;
}
.heading .midsection .metanav li {
    display: inline;
    margin-left: 15px;
}
.heading .midsection .metanav li a{
    color: #5668AA;
    font-weight: bold;
    text-decoration:none;
}
.heading .midsection .metanav li a:hover{
    color: #5668AA;
    font-weight: bold;
    text-decoration:underline;
}
.heading .midsection .metanav input {
}


.topmenu {
    margin: 0 auto;
    background-image:url(images/border/topmenu_top.gif);
    width: 760px;
    height: 20px;
    font-size: 12px;
}
.topmenu ul {
}
.topmenu p {
    margin-top: 3px;
    xmargin-left: 15px;
    margin-right: 15px;
}
.topmenu p a {
    color: #5668AA;
    font-size: 12px;
    text-decoration: none;
}

.topmenu p a:visited {
    text-decoration: none;
}

.breadcrumb a {
    text-decoration: none;
    color: #5668AA;
    }


.secondmenu {
    width: 760px;
    margin: 0 auto;
    text-align: left;
    xbackground-color: #5668AA;
    background-color: green;
    font-weight: bold;
    padding-top: 4px;
}

edit: wil een mod de titel wijzigen naar: [FF/CSS]tekst op positie van vorige div

[bulle bas]

Cascading Stylesheet:

xmargin-left: 15px; 
xbackground-color: #5668AA; 

Dit is geen geldige css. Als je deze eigenschappen wilt uitschakelen, zet er dan /**/ omheen; nu is het gedrag ongedefinieerd.

Zowel in IE en Firefox springen lijstonderdelen <LI/> in. Ze doen dat wel verschillende; de een doet dat door padding en de ander door marin geloof ik. Zorg dus dat je deze beide eigenschappen instelt.
Ik doe dat altijd door een 'CSS-reset':

Cascading Stylesheet:

UL, LI {
margin:0; padding0;
}
UL#eenLijstje LI {
margin-left: 12px;
padding: 4px; /* nu totaal 16px witruime links in deze lijst*/
}

Ga er maar vanuit dat FF je css goed interpreteert trouwens, dus werkt eerst naar een goede weergave in die browser!