Navigation

[Silar]

Hallo,
ich komme gerade nicht bei meiner Übungssite weiter. Ich möchte das Menü am 'Hintergrund' von <h1> heften. Bin mir aber nicht sicher, ob das der richtige Ansatz ist, wie ich es gemacht habe. Mit meiner Methode funktioniert es im Firefox- und im Opera-Browser, nicht jedoch im IE.

Hier der Link(Feedback zum Design sind irrelevant, weil ich da noch nicht weiter gemacht habe, aufgrund des Problems).
Titel

 

[mermshaus]

Mir ist nicht klar, worum es dir geht. Bei mir sieht es in jedem Browser annähernd gleich aus.

 

[Silar]

Bei allen Browsern außer dem IE wird das Menü direkt am Hintergrund von <h1> angedockt, beim IE sind aber ca. 10px Lücke zu sehen. Die Lücke ist die vom background des (body{})

 

[mermshaus]

Problem ist das negatives margin für die li-Elemente. Nicht alle IE-Versionen scheinen Text gleich groß zu rendern.

Ich würde es so machen:

CSS:

            /* Google: "clearfix" */
            .clearfix:after {
                content: ".";
                display: block;
                clear: both;
                visibility: hidden;
                line-height: 0;
                height: 0;
            }

            .clearfix {
                display: inline-block;
            }

            html[xmlns] .clearfix {
                display: block;
            }

            * html .clearfix {
                height: 1%;
            }

            html, body {
                background: url(image/back.png) repeat-x #444;
                color: #bbb;
                margin: 0;
                padding: 0;
            }

            h1 {
                background: #666;
                margin: 10px 0 0 0;
                padding: 5px 0 0 100px;
                border-bottom: 2px solid #999;
                border-top: 2px solid #444;
            }

            h1 img {
                border: none;
            }

            .navigation {
                background: #123;
                margin: 0 0 0 100px;
                padding: 0;
            }

            .navigation li {
                list-style: none;
                float: left;
                margin-right: 10px;
            }

            .navigation li a {
                font-size: 20px;
                text-decoration: none;
                color: #fff;
                padding: 5px;
                display: block;
                background: #666;
                border: 2px solid #999;
            }

            .navigation li a.active {
                background: #999;
            }

            div#content {
                background: url(image/back_div_content.png) no-repeat #666;
                margin-top: 70px;
                padding: 10px 10px 10px 10px;
                border-bottom: 2px solid #999;
                border-top: 2px solid #444;
                word-spacing: 4px;
            }

HTML:

<ul class="navigation clearfix">
    <li><a class="active" href="#">Hauptseite</a></li>
    <li><a href="#">Angebote</a></li>
    <li><a href="#">Referenzen</a></li>
    <li><a href="#">Anderes</a></li>
    <li><a href="#">Kontakt</a></li>
</ul>

Btw: Der IE 6 rendert die transparenten PNGs bei mir nicht korrekt.

 

[Silar]

Danke, werde ich mir mal näher ansehen.

Btw: Der IE 6 rendert die transparenten PNGs bei mir nicht korrekt.

Okay, da werde ich mich mal nach einem Hack umsehen(PNG-FIX)