✔ IE6, Navigation "springt"

[mAu]

Hallo Tutorialianer,

nachdem ich mich lange gesträubt habe, steht nun die Optimierung einer Seite an den IE 6 an, dabei habe ich zwei Probleme:

1. Wenn ich über einen Menüpunkt fahre, springt der Teil unter der Navigation nach oben (siehe Screenshots, oder Live: http://www.wolf-khosrowi.de). Hier die (meiner Ansicht nach) relevanten CSS-Ausschnitte:


screen.css

#navigation {    
    list-style: none;
    
    margin-top: -21px;
    margin-bottom: 21px;
    
    padding-left: 256px;
}

#navigation li {
    height: 33px;
    
    line-height: 33px;
    
    float: left;
    
    margin: -7px 0 0 0;    
    
    position: relative;
    
    z-index: 2;
}

#navigation li a {    
    display: block;
    
    height: 21px;

    line-height: 19px;
    
    margin-top: 7px;
    padding: 0 6px;
    
    vertical-align: middle;
}

#navigation li a:hover, #navigation li a:active, #navigation li a.active {
    background: url('../graphics/logo-background.png') no-repeat;
}

#navigation li.border {
    border-right: 1px solid #fff;
}

ie6-correct.css

#navigation li {
    height: 27px;

    padding-top: 6px;
}

#navigation li a {
    float: left;
    
    margin-top: 1px;
}

ul.sidenavigation a:link, ul.sidenavigation a:visited, ul.sidenavigation a:hover, ul.sidenavigation a:active {
    color: #fff;
    
    display: block;
    
    font-weight: bold;
    font-size: 10px;
    
    text-decoration: none;    
}

2. Da transparente PNGs verwendet werden, habe ich auf den IE PNG Fix v2 zurückgegriffen. Dadurch sind die Bedienelemente im Inhaltsbereich (Vor- und Zurück-Button, sowie Scrollbar) unbedienbar. In der Hilfe stand, dass man die Elemente nicht positionieren dürfe, um den Bug zu umgehen, funktioniert aber nicht bei mir, irgendwelche Ideen?

 

[Maik]

Hi,

zu der Ursache für das Verschieben des unteren Bereichs fällt mir gerade noch nichts ein - das muß ich erst genauer unter die Lupe nehmen.

Wenn innerhalb des Containers gewisse Bereiche im IE6 nicht mehr nutzbar sind, lässt dies den Rückschluß zu, dass es an den Dimensionen der PNG-Grafiken liegt, wie es in dem Artikel Cross-browser semi-transparent backgrounds unter dem Punkt Addendum: IE Link bug beschrieben, und anhand einer tabellarischen Übersicht dokumentiert wird, bei welchen Kantenlängen dieser Bug auftritt, und bei welchen nicht.

Was mich hier aber doch etwas verwundert, ist der Umstand, dass im Stylesheet ie6-correct.css der Pfad zur HTC-Datei überhaupt nicht stimmt, da sie sich nicht im selben Verzeichnis "css" befindet, sondern im Rootverzeichnis liegt, und dennoch der Workaround funktioniert :suspekt:

mfg Maik

 

[Maik]

Sodele..., da bin ich wieder, und muß erstmal meine Aussage wegen des angeblich falsch gesetzten Pfades zurücknehmen, da ja im Bezug zur HTML-Datei referenziert wird - mußte mich eben nochmal kurz in die "Gebrauchsanweisung" einlesen, da ich diese Variante des "iepngfix-Hacks" schon lange nicht mehr ver- bzw. angewendet habe

Das Sprungverhalten der Navigation lässt sich abstellen, indem du im Stylesheet ie6-correct.css für das Listenelement #navigation eine geringe Mindesthöhe einrichtest - das Stichwort lautet hier "hasLayout":

#navigation { height:1%; }

Was die "Blockade" der genannten Steuerelemente betrifft, solltest du mal die Dimensionen der Grafik "content-background.png" auf eines der Maße herabsetzen, mit denen, laut der von mir vorhin erwähnten Tabelle, der Bug im IE nicht hervorgerufen wird.

mfg Maik

 

[mAu]

Maik, du bist mein Held



Wenn...

du mir noch sagst, wie du an solche Informationen kommst

 

[Maik]

Hi,

im Laufe der vergangenen acht oder neun Jahre bin ich im globalen Dorf ganz schön was rumgekommen, und hab mir immer von den besonderen Sehenswürdigkeiten ein Souvenir in Form eines Bookmarks mitgenommen

mfg Maik