nicht angemeldet
Positionierung
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ß
Manfred
-
Hallo,
Meine Seite ist mit Div ausgerüstet, falls das noch wichtig ist.
ohne Code ist keine Hilfe möglich. Meine Glaskugel will gerade nicht so ...
Freundliche Grüße
Vinzenz
-
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);
}
[/CODE]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>
[/CODE]
-