Schrift im IE zu klein.

[Fruitgum]

Hallo Leute,

ich habe mir eine Menu mit CSS gebastelt.

<ul id="nav">
<li id="t-intro"><a href="#">Startseite</a></li>
<li id="t-mark"><a href="#">Online-Marketing</a></li>
<li id="t-vera"><a href="#">Veranstaltung</a></li>
<li id="t-profil"><a href="#">Profil</a></li>
<li id="t-kontakt"><a href="#">Kontakt</a></li>
</ul>

so und jetzt die CSS

body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
background:#FFFFFF;

}

#nav {
max-width:900px;
width:853px;
height:21px;
float:left;
margin:0;
padding:10px 0 0 46px;
list-style:none;

background:#fff url(img/leiste.png) repeat-x bottom left;

}

#nav li {
float:left;
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:55%;
}

#nav a {
float:left;
display:block;
margin:0 1px 0 0;
padding: 4px 8px;
color:#000;
text-decoration:none;
border:1px solid #ccc;
border-bottom:none;
background:#fff;
}

#nav a:hover, body#intro #t-intro a {
color:#ff6600;
padding-bottom:5px;
background:#fff;
}

Das Menu funktioniert, am bestem im Safari und Opera. Im IE wird die Schrift zu klein angezeigt und die Reiter funktionieren auch nicht richtig, irgendwie fehlt dann der Abstand zum Content.

Wie muss das gefixt werden bzw. welchen Hack brauch ich hier?

LG, Marc

 

[Maik]

Hi,

verwende bei den relativen Schriftgrößenangaben für den Dokumentkörper und das Menü die em-Einheit - also beispielsweise:

body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
background:#FFFFFF;

}

...

#nav li {
float:left;
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.8em;
}

mfg Maik