✔ Probleme mit Positionierung unter IE6

[Dolphon]

Hallo zusammen,

ich bin für meine Abteilung eine neues Design am basteln.
Das Design ist bereits w3c Validiert.

Unter Firefox, IE7 und IE8 wird die Seite korrekt angezeigt.
Nur unter IE6 wird die Seite falsch angezeigt.
Das was zwischen dem linken und rechten oberen Ecke sein soll, wird ganz am Ende der Seite im footer angezeigt.


Der Fehler liegt zwischen

.....
	<div class="fixfloat"></div>
	<div id="headersubarearoundcornerleft"></div>
	<div id="headersubarearoundcornerrightwithleft"></div>
</div>
 
<div id="headermainnavarea">
 
	<ul class="dropdown">
		<li class="navfirst"><a href="ddd.php">xxxxx</a></li>
		<li><a href="ddd.php">xxxxx</a></li>
		<li><a href="ddddd.php">xxxxx</a></li>
		<li><a href="ddddd.php">xxxxx</a></li>
		<li><a href="ddd.php">xxxxx</a></li>
	</ul>
	<div class="navborderbegin" />
	<div class="navborder" />
 
</div>
.....

Der Link zu Testseite is folgender: Klick

Hoffe mir kann einer Helfen.

Gruß

Dolphon

 

[Quaese]

Hi,

was aussieht, als wäre es nach unten gerutscht, ist lediglich das Hintergundbild aus headermainnavarea. Dort hast du eine Höhe von 27 Pixeln angegeben. Der IE6 streckt die Höhe eines Elements, wenn es nicht hinein passt - deshalb siehst du hier noch die Grafik.

Als Lösung kannst du das Hintergrundbild in die unsortierte Liste (ul .dropdown) packen und diese etwas anders formatieren:

ul.dropdown {
    background: url("images/header_mainnav_background.gif") repeat scroll center bottom transparent;
    height: 27px;
    margin: 0;
    /*margin-left: 7px;
    margin-right: 6px;*/
    padding: 0 6px 0 7px;
    position: relative;
    z-index: 597;
}

Dafür muss in #headermainnavarea div.navborder die Rahmenstärke auf Null gesetzt werden:

#headermainnavarea div.navborder {
    border-bottom: 0px solid #CCCCCC;
    margin: 0 6px;
}

Jetzt gilt es noch die oberen Ecken korrekt zu positionieren. Dazu müssen auch hier die Höhen angepasst werden. Zudem wird die rechte Ecke mit float: right aus dem Textfluss genommen.

#headersubarearoundcornerleft {
    background: url("images/header_subarea_round_corner_left.gif") no-repeat left top;
    float: left;
    height: 6px;
    font-size: 1px;
    line-height: 1px;
    position: relative;
    width: 10px;
}

#headersubarearoundcornerrightwithleft {
    background: url("images/header_subarea_round_corner.gif") no-repeat left top;
    height: 6px;
    font-size: 1px;
    line-height: 1px;
    /*margin-left: 1190px; 968*/
    position: relative;
    top: 0;
    width: 10px;
    float: right;
}

Zuletzt sollte noch das Element zum Herstellen des normalen Textflusses noch modifiziert werden:

.fixfloat {
    clear: both;
    float: none;
    height: 0;
    font-size: 1px;
    line-height: 1px;
}

Ciao
Quaese

 

[crsakawolf]

Ganz ehrlich?

Ich programmiere schon lange nichtmehr für IE6.
Dieser Browser ist das letzte schlechthin.

Mach lieber eine bemerkung, das sich die leute einen neueren besorgen sollen.

 

[Dolphon]

Vielen lieben Dank für deine Antwort und die gute Beschreibung des Fehlers.
Alleine hätte ich den Fehler wohl nicht so ohne weiters beheben können.

Ganz ehrlich?

Ich programmiere schon lange nichtmehr für IE6.
Dieser Browser ist das letzte schlechthin.

Mach lieber eine bemerkung, das sich die leute einen neueren besorgen sollen.

Wenn das so einfach wäre, dann hätte ich das schon bei der damaligen Version der Webseiten gemacht. Leider ist der IE6 immernoch Standart auf den Arbeitsplätzen der Mitarbeiter.