Positionierung im IE7

Status
Nicht offen für weitere Antworten.
M

massel

Mitglied
Hallo,

bislang hatte ich meine Seite wohl nur für den Firefox ausgelegt. Jedenfalls war ich schokiert als ich die Seite einmal mit dem aktuellen IE7 aufgerufen habe.

Ursache meiner Darstellungsfehler im IE7 ist der display:table welcher mir jedwege Elemente im Firefox perfekt mittig darstellt.

Da dies im IE7 leider nicht geht suche ich nun nach einer alternativen Lösung. Ich könnte zwar die Elemente alle mit margin versetzen, wollte aber erstmal die Profis dazu fragen.

Meine Seite ist mit Div ausgerüstet, falls das noch wichtig ist.

Gruß
massel
 
Hier der Code, alles hängt an dem display:table was der IE nicht kennt.
Ich wollte halt nicht mit margin-left alles machen um das Menü in die Mitte zu rücken.


Code: 
#header{
	background:url(../images/hg.png) 0 0 no-repeat;
	width:981px;
	height:180px;
	position:relative;
	margin:0 auto;
}

#header img.logo{
	position:absolute;
	left:0px;
	top:5px;
	z-index:500;

}
/*hintergrund der topnavi*/
.nav {
background: url(../images/navi.png);  
position:relative; 
left:6px;
top:146px;
font-family:arial, verdana, sans-serif; 
font-size:11px; 
width:100%; 
z-index:500;
}

.nav .table 
{
margin-left:250px;

}

.nav .select,
.nav .current {
margin:0; 
padding:0; 
list-style:none; 
display:table-cell; 
white-space:nowrap;
}

.nav li {
margin:0; 
padding:0; 
height:auto; 
float:left;
}

/*topnavi-rahmenhalter - begrenzungslinien der buttons*/
.nav .select a {
display:block; 
float:left;
padding:0 30px 0 30px; 
text-decoration:none; 
line-height:27px; 
background:url(../images/nav_div.png) 0 0 no-repeat;
white-space:nowrap; 
color:#464646;
}

.nav .current a {
display:block; 
height:27px; 
float:left; 
padding:0 0 0 15px; 
text-decoration:none; 
line-height:27px; 
white-space:nowrap; 
color:#fff;
}


.nav .current a b {
display:block; 
padding:0 30px 0 15px; 


}
/*hover-effekte des topmenüs*/
.nav .select a:hover, 
.nav .select li:hover a {
background:url(../images/nav_hover.png) 0 0 repeat-x;
padding:0 0 0 15px; 
cursor:pointer; 
color:#FFF;
}
/*hover-effekte des topmenüs*/
.nav .select a:hover b, 
.nav .select li:hover a b {
display:block; 
float:left; 
padding:0 30px 0 15px; 
background:url(../images/nav_hover.png) 0 0 repeat-x;
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

/*Posi des submenüs*/
.nav .sub {
display:table; 
margin:0 auto; 
padding:0; 
list-style:none;
}

.nav .sub_active .current_sub a, 
.nav .sub_active a:hover {
background:transparent; 
color:#FFF;
}

/*submenübox*/
.nav .select :hover .select_sub, 
.nav .current .show {
display:block; 
position:absolute; 
width:969px; 
top:27px; 
padding:0; 
z-index:100; 
left:0; 
}

.nav .current .show {
z-index:10;
}

/*schrift des submenü*/
.nav .select :hover .sub li a, 
.nav .current .show .sub li a {
display:block; 
float:left; 
background:transparent; 
padding:0 10px 0 10px; 
margin-left:0px; 
white-space:nowrap; 
border:0; 
color:#FFF;
font-weight:bold;
}

.nav .current .sub li.sub_show a {
color:#469EBF; 
cursor:default; 
background:url(../menus/back_1.gif);
}

.nav .select :hover .sub li a:hover, 
.nav .current .sub li a:hover {
visibility:visible; 
color:#469EBF; 
background:url(../menus/back_1.gif);
}

hier der HTML-CODE
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Clan Gilde</title>
    <link rel="stylesheet" media="all" type="text/css" href="css/style.css" />
</head>
<body>
<div id="header">
<div class="nav">
<div class="table">

<ul class="select"><li><a href="index.php"><b>Home</b>
</a></li></ul>

<ul class="select">
<li><a href="About.php"><b>About</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>

<ul class="select"><li><a href="Clans.php"><b>Clans</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
	<ul class="sub">
		<li><a href="SC-Clans.php">Starcraft</a></li>
		<li><a href="BW-Clans.php">Broodwar</a></li>
	</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select"><li><a href="contact.php"><b>Contact</b><!--[if IE 7]><!--></a><!--<![endif]-->
</li>
</ul>
<ul class="select"><li><a href="xtra.php"><b>X-tra</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
	<ul class="sub">
		<li><a href="help.php">help</a></li>
		<li><a href="faq.php">faq</a></li>
	</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
	</div>
<img src="../images/headerbild.png" class="logo" />
</div>
</body>
</html>
 
Dem HTML-Code, insbesondere den "Conditional Comments" zufolge, vermute ich mal, dass das Menü von Stu Nicholls stammt.

Darf man erfahren, welche Variante da als Vorlage gedient hat?
 
Die drei Varianten in dem Beispiel funktionieren doch gleichermaßen im IE7, wie im Firefox.
 
das stimmt, und am code großartig verändert habe ich nicht, und trotzdem springt bei mir das menü im IE nach links. ich weiß und sehe aber nicht warum. ich hab nur schlaugelesen und habe erfahren das der ie das display:table nicht unterstützt. in den orginalbeispielen ist da extra eine ie.css, auch diese habe ich dabei. die klassen die dort verwendet werden benütz ich ebenfalls.
 
Entferne zunächst mal in den Menüpunkten "About" und "Contact" den "Conditional Comment" für den IE7, da diese Links kein Untermenü enthalten, und somit der "CC" an dieser Stelle überhaupt nicht benötigt wird, aber zu einem Darstellungsfehler im IE 6 + 7 führt:

Code: 
<a href="About.php"><b>About</b><!--[if IE 7]><!--></a><!--<![endif]-->

<a href="contact.php"><b>Contact</b><!--[if IE 7]><!--></a><!--<![endif]-->
Ansonsten solltest du im Selektor .nav .table die margin-left:250px-Deklaration rausnehmen, und stattdessen die Original-Regel verwenden, um das Menü in der Fenstermitte zu zentrieren:

Code: 
.nav .table {
display:table;
margin:0 auto;
}
Fazit: An der display:table-Eigenschaft liegt es überhaupt nicht.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück