✔ Darstellungsproblem bei padding im IE 7.0

[keiplan]

Tag,

ich habe ein Problem mit der Darstellung der Hintergrundfarbe bei padding im IE 7.0. Links und rechts vom Menü soll die Farbe #2b477f angezeigt werden. Im FF und IE 6.x wird die Farbe richtig dargestellt, nur im IE 7.0 bleibt es weiß.

Der Code:

        <div id="mainnavbox"><a name="mainnavbox"></a>
            <h2 class="hide">Hauptmenu</h2>
            <ul id="mainnav">
                <li><a href="../../index.php">Startseite</a></li>
                <li><a href="../../standort/index.html">Standort</a></li>
                <li><a href="../../aktuelles.php">Aktuelles</a></li>
                <li><a href="../../fachinformationen/index.html">Fachinformationen</a></li>
                <li><a href="../../service/index.html">Service</a></li>
            </ul>
        </div>

zugehörige css:

div#mainnavblock, div#mainnavbox, div#mainnav {
    background-color: #2b477f;
}
ul#mainnav {
    margin: 0;
    padding: 6px 10px 0 274px;
    background-color: #2b477f;
    list-style: none;
}
ul#mainnav li {
    padding: 0;
    margin: 0 0px 0 0;
    float: left;
    background-color: #2b477f;
}

Ich habe es schon wie folgt versucht, aber diese Variante ist sehr unellegant und bringt nur nervende Fehldarstellungen bei unterschiedlicher Fenstergröße mit sich:

Der Code:

        <div id="mainnavbox"><a name="mainnavbox"></a>
            <h2 class="hide">Hauptmenu</h2>
            <ul id="mainnav">
                <li style="padding: 14px 10px 0 274px; background-color: #2b477f"></li>
                <li><a href="../../index.php">Startseite</a></li>
                <li><a href="../../standort/index.html">Standort</a></li>
                <li><a href="../../aktuelles.php">Aktuelles</a></li>
                <li><a href="../../fachinformationen/index.html">Fachinformationen</a></li>
                <li><a href="../../service/index.html">Service</a></li>
                <li style="padding: 14px 10px 0 307px; background-color: #2b477f"></li>
            </ul>
        </div>

zugehörige css:

div#mainnavblock, div#mainnavbox, div#mainnav {
    background-color: #2b477f;
}
ul#mainnav {
    margin: 0;
    /*padding: 6px 10px 0 274px;*/
    background-color: #2b477f;
    list-style: none;
}
ul#mainnav li {
    padding: 0;
    margin: 0 0px 0 0;
    float: left;
    background-color: #2b477f;
}

 

[Maik]

Hi.

ich habe ein Problem mit der Darstellung der Hintergrundfarbe bei padding im IE 7.0. Links und rechts vom Menü soll die Farbe #2b477f angezeigt werden. Im FF und IE 6.x wird die Farbe richtig dargestellt, nur im IE 7.0 bleibt es weiß.

Mit deinen Quellcode-Angaben wird der linke und rechte Bereich bei mir im FF und IE6 ebenfalls weiss dargestellt, was am fehlenden "clearen" der Floatumgebung liegt.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<ul id="mainnav" class="clearfix"> ... </ul>

 

[keiplan]

Nein daran liegt es nicht.
Die Quellcodes sind rießig, deshalb habe ich nur Aussschnitte gepostet.

Hier mal der gesammte Bereich der CSS, der für das obere Menü zuständig ist:

/*
    SECTION: primary navigation
*/
div#mainnavblock, div#mainnavbox, div#mainnav {
    background-color: #2b477f;
}
ul#mainnav {
    margin: 0;
    padding: 6px 10px 0 274px;
    background-color: #2b477f;
    list-style: none;
}
ul#mainnav li {
    padding: 0;
    margin: 0 0px 0 0;
    float: left;
    background-color: #2b477f;
}
ul#mainnav a {
    display: block;
    padding: 6px 6px 8px 6px;
    border-top: 2px solid #2b477f;
    background-color: #2b477f;
    line-height: 100%;
    white-space: nowrap;
}
ul#mainnav a:link,
ul#mainnav a:visited {
    color: #FFF;
    font-weight: bold;
    white-space: nowrap;
}
ul#mainnav a:hover,
ul#mainnav a:focus {
    color: #2b477f;
    background-color: #e8eeee;
    text-decoration: none;
}
ul#mainnav a:active {
    color: #000;
    background-color: #c6d3d3;
}
ul#mainnav li.open a:link,
ul#mainnav li.open a:visited  {
    padding-top: 3px;
    padding-bottom: 11px;
    border-color: #c6d3d3;
    color: #2b477f;
    background-color: #c6d3d3;
}
ul#mainnav li.open a:hover,
ul#mainnav li.open a:focus,
ul#mainnav li.open a:active {
    color: #000;
    background-color: #c6d3d3;
    text-decoration: none;
}

Wenn ich deinen Vorschlag mit einbaue verändert sich im IE 7.0 nichts... Kann das ein bug des 7er sein? Weil in FF und 6.x funktioniert es nachweislich wunderbar.

 

[Maik]

Wenn ich deinen Vorschlag mit einbaue verändert sich im IE 7.0 nichts... Kann das ein bug des 7er sein? Weil in FF und 6.x funktioniert es nachweislich wunderbar.

Dann zeig ich dir mal, wie Firefox bei mir deinen Quellcode interpretiert (gleiches gilt für IE6):



Und so stellt der IE7 (sowie FF und IE6) das Menü mit meinem Vorschlag dar:

 

[keiplan]

Ich habe einen Vergleich in den Anhang gesetzt...

 

[Maik]

Wenn dir mein Lösungsvorschlag nicht weiterhilft, dann kann ich für dich leider nichts machen, denn dass der Grund am fehlenden Clearing der Floatumgebung innerhalb des Listenmenüs liegt, und mein Vorschlag bei mir in allen Browsern funktioniert, habe ich eben dokumentiert, und dass hier im IE7 ein Bug vorliegt, ist auch sehr unwahrscheinlich.