CSS Menü

bleedblack · 13. April 2010

Hallo Allerseits,

habe mal eine Frage bezüglich einem Menü.
Im Internet Explorer wird es so dargestellt wie ich es will, allerdings im Firefox(wie immer) wird es anders dargestellt. Und zwar nimmt er nicht bei der width:100% Angabe die beiden Ränder der Box als Grenze...glaube ich!? Komme leider nicht dahinter...

Jemand ne Ahnung wieso Firefox das Menü aus der Box lutscht?
MfG

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<html>
<head>
<style type="text/css">

#menu2
{
background-color:#222222;
position:absolute;
height: 183px;
width: 135px;
margin-left:0px;
margin-top:0px;
border: 0px red solid;
text-align:center;
z-index:99;
}

#navi {
margin: 0;
padding: 0px;
width:100%;
}

#navi ul, #navi li{
list-style-type: none;
padding-top: 3px;
font-weight: bold;
font-family:Arial; color:ffffff; font-size:12px;
text-align:center;
}

#navi li a {
text-decoration: none;
display: block;
width:100%;
padding: 5px;
}

#navi a:link, #navi a:visited {
color: #FFFFFF;
background-color: #114585;
border-left: 5px solid #0f3c75;
border-right: 5px solid #0f3c75;
}

#navi #akt {
color: #FFFFFF;
background-color: #114585;
border-left: 5px solid #0f3c75;
border-right: 5px solid #0f3c75;
}

#navi a:hover, #navi a:hover#akt {
color: #FFFFFF;
background-color: #222222;
border-left: 5px solid #0f3c75;
border-right: 5px solid #0f3c75;
font-family:Arial; color:ffffff; font-size:12px;
}

</style>
</head>

<body>

<div id="menu2">

<ul id="navi">
<li>
<a href="kontakt.html" id="akt">KONTAKT</a>
</li>
<li>
<a href="formular.html">FORMULAR</a>
</li>
<li>
<a href="anfahrt.hrml">ANFAHRT</a>
</li>
</ul>
</div>
</body>
</html>

Maik · 14. April 2010

Moin.

bleedblack hat gesagt.:
Jemand ne Ahnung wieso Firefox das Menü aus der Box lutscht?

Firefox und alle anderen standardkonformen Browser (Opera, Safari, usw.) interpretieren im "Quirks Mode" weiterhin das Box-Modell, wonach der linke und rechte Innenabstand sowie die Rahmenstärke zur width:100%-Deklaration des <a>-Elements hinzugerechnet werden. Die IE-Familie tut dies in diesem Darstellungsmodus hingegen nicht.

Lösung:

CSS:

#navi li a {
text-decoration: none;
display: block;
width:auto; /* anstelle von width:100%; */
padding: 5px;
}

Und als Ergänzung für die IE-Familie:

Code:

<style type="text/css">
/* dein bestehendes Stylesheet */
</style>
<!--[if IE]>
<style type="text/css">
#navi li { float:left; width:100%; }
</style>
<![endif]-->

mfg Maik

CSS Menü

bleedblack

Grünschnabel

Maik

Neue Beiträge