✔ Darstellungsproblem verschachtelte DIV in IE

[dwex]

Hallo Leute,

ich werde hier noch wahnsinnig!
Ich habe ein Website gebastelt welche im Headbereich so aussehen soll wie auf dem ersten angehängten Bild (sig-moz.jpg) (man beachte, dass die Spitze des hausdaches direkt in den weissen Border übergeht).
Die Darstellung passt auch auf FF, Opera und Safari - jedoch im IE macht er mir über die Spitze des Hausdaches einen blauen Balken. Ausserdem "klebt" die Navigation rechts oben bei IE (vrgl. Bild sig-ie.jpg) und bei den anderen Browsern wird es korrekt angezeigt.

Als "Übeltäter" habe ich bereits das "float:right" in ".menu2 ul li" ausfindig gemacht (auch wenn ich "display:inline" verwende tritt das ganze auf - wenn ich keines von beiden verwende wird meine navigation untereinander und nicht nebeneinander dargestellt.

Meine Frage:
Wie kann ich jetzt den IE dazu bewegen die Darstellung korrekt zu machen?

Hier noch die Quelltexte um die es geht:

<div id="zeile1">
		<div id="headerrechts">
		    <div id="navigationoben">

		    <div class="menu2">
								<ul class="menu-top"><li><a href="./" title="Home" class="menu-current menu-first" target="_top">Home</a>&nbsp;&nbsp;</li><li><a href="./kontakt.php" title="Kontakt" class="menu-sibling" target="_top">Kontakt</a>&nbsp;&nbsp;</li><li><a href="./impressum.php" title="Impressum" class="menu-sibling menu-last" target="_top">Impressum</a>&nbsp;&nbsp;</li></ul>			</div>

		    </div>
		</div>

		<div id="headerlinks">
		<img src="./header.jpg" alt="" />
		</div>
	</div>
</div>

#zeile1 {
	background-color:rgb(0,136,200);
	float:none;
	border:10px solid white;
}

#headerrechts {
	float:right;
	/*background-color:silver;*/
}
#headerlinks {
	height: 76px;

}

#navigationoben {
	/*padding-top:5px;
	padding-right:10px;*/
}
.menu2 ul{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    list-style-type:none;
    margin-left:0;
    padding-left:0;


}
.menu2 ul li{
    float:right;
    padding-right:2px;

}
.menu2 a:link, .menu2 a:visited, .menu2 a:active{
    /*background-color:none;*/
    color: #003366;
    padding:0.2em;
    text-decoration:none;
}
.menu2 ul li a:hover{
	color: #336699;
	text-decoration:none;
}

 

[Maik]

Hi,

so wie es aussieht, müsstest du zunächst mal die vertikalen Polsterungseigenschaften des Listenelements zurücksetzten, und dann einen bestimmten padding-top setzen, damit der obere Abstand des Menüs in allen Browsern einheitlich ist, da sich ihre Initialwerte unterscheiden:

.menu2 ul{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    list-style-type:none;
    margin:0;
    padding:10px 0 0 0;  /* oberer Innenabstand ist von mir hier frei gewählt, da mir das gewünschte Maß nicht bekannt ist */
}

mfg Maik

 

[dwex]

Servus Maik,

was meinst du mit "vertikalen Polsterungseigenschaften des Listenelements zurücksetzen"?

Ich habe jetzt den Quelltext so übernommen - jetzt ist der Rand oben beim IE noch dicker geworden.

Wenn ich dem div mit der ID headerrechts eine Hintergrundfarbe gebe dann zieht sich der Balken über die ganze Breite (nur beim IE). Es scheint mir so, dass der IE die beiden DIV nicht wie gewollte nebeneinander sonder übereinander anordnet.

 

[Maik]

margin-top / margin-bottom und padding-top / padding-bottom sind die vertikalen Polsterungseigenschaften.

Dass der Abstand nun größer wird, liegt vermutlich daran, dass #headerlinks sich nicht auf einer Höhe mit #headerrechts befindet, es also nicht wie angedacht umfliesst, sondern eine Zeile darunter ausgerichtet wird.

mfg Maik

 

[dwex]

Ja das mit der Zeile habe ich mir schon gedacht.
Es scheint, dass der headerrechts sich nicht im div für Zeile1 befinden würde.
Siehe Bild - hier habe ich den Hintergrund mal auf silber gesetzt.

Dass der Abstand nun größer wird, liegt vermutlich daran, dass #headerlinks sich nicht auf einer Höhe mit #headerrechts befindet, es also nicht wie angedacht umfliesst, sondern eine Zeile darunter ausgerichtet wird.
mfg Maik

Wie kann ich das denn dann ändern - zumal es ja bei den "richtigen" Browsern korrekt angezeigt wird?

 

[Maik]

Die Lösung wäre hier das Tauschen der beiden Blöcke im Markup, und die Hinzunahme der float:left-Deklaration für #headerlinks.

mfg Maik

 

[dwex]

Ich hätte es jetzt so gemacht - leider zerschiesst er mir jetzt in jedem Browser das Layout komplett - das Bild welches auf dem Screenshot unten links zu sehen ist wird jetzt oben rechts beginnend mit der navigation angezeigt (beim ie) bzw. wird einfach etwas nach oben geschoben (bei allen anderen Browsern) - ich bin am verwzeifeln.

<div id="zeile1">

                <div id="headerlinks">
		<img src="./header.jpg" alt="" />
		</div>


		<div id="headerrechts">
		    <div id="navigationoben">

		    <div class="menu2">
								<ul class="menu-top"><li><a href="./" title="Home" class="menu-current menu-first" target="_top">Home</a>&nbsp;&nbsp;</li><li><a href="./kontakt.php" title="Kontakt" class="menu-sibling" target="_top">Kontakt</a>&nbsp;&nbsp;</li><li><a href="./impressum.php" title="Impressum" class="menu-sibling menu-last" target="_top">Impressum</a>&nbsp;&nbsp;</li></ul>			</div>

		    </div>
		</div>

		
	</div>
</div>

#headerrechts {
	float:right;
	/*background-color:silver;*/
}
#headerlinks {
	height: 76px;
        float:left;

}

 

[Maik]

Noch zwei Vorschläge, mit denen ich eine übereinstimmende Darstellung in den unterschiedlichen Browsern erziele:

.menu2 ul li{
    display:inline; /* anstelle von float:right */
    padding-right:2px;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size: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 */

<div id="zeile1" class="clearfix">

mfg Maik

 

[Maik]

Achja, übrigens hast du in dem HTML-Auszug am Ende ein </div>-Tag zu viel notiert.

Oder wurde er lediglich aus dem gesamten Quellcode versehentlich hierher herüberkopiert?

mfg Maik

 

[dwex]

Vielen vielen vielen Dank Maik!

Jetzt funktioniert es bestens - du bist der Beste!

Achja, übrigens hast du in dem HTML-Auszug am Ende ein </div>-Tag zu viel notiert.

Oder wurde er lediglich aus dem gesamten Quellcode versehentlich hierher herüberkopiert?

mfg Maik

Das muss ich wohl zuviel kopiert haben aus dem gesamten Quellcode