css-Formatierung Navigation

[Neno]

Hallo,

hab das Problem, dass die Elemente (Links) in der horizontalen Navigationsleiste nicht in den beiden Browsern Firefox und IE gleich aussehen. Vermute die Ursache im height-Ausdruck, hier der css-code:

#navig li{display: inline;
margin: 0; padding: 0;
text-align: center;
list-style-type: none;
}

#navig a{float:left;
display: block;
margin: 1px 1px;
padding: 5px 10px;
width: 8.6em;
height: 28px; / im IE height: 3.0em;
font-size: 12px;
background-color: #ccc;
text-decoration: none;
text-align: center;
}

wenn ich height: 28px verwende wird es im Firefox korrekt angezeigt, im IE dagegen ist der Link zu schmal, wenn ich height: 3.0em verwende ist es im IE korrekt im Firefox zu hoch. Weiss jemand wie ich es schreiben muss, damit es in beiden Browsern gleich aussieht?

gruss

[Melegrian]

Wenn es mit der Zeilenhöhe zusammenhängt, dann probiere es mal line-height und dann würde ich nicht px mit em mischen, sondern mich für eine Bemaßung entscheiden. IE und FF interpretieren die Schrifthöhe trotz einheitlicher Bemaßung unterschiedlich, notfalls hilft ein Div-Bereich weiter, in dem Du alles reinlegst.

[Neno]

Hallo,

line-hight macht es, aber mit einer Nebenwirkung. Bei Navi-Begriffen, die aus zwei Wörtern bestehen und direkt untereianander stehen macht er um beide Begriffe die Höhe von z.B. 28px. Kann es deshalb nicht verwenden. Es ist schon alles in einem div-Bereich gepackt. Das Problem ist, dass der IE auf px bei height nicht reagiert, wenn ich em nehme, dann bewegt er sich, aber die Höhe ist dann anders als beim Firefox. Also kann ich das auch vergessen. Finde der IE ist für Webmaster so ein Scheiß-Browser.

gruss

[Melegrian]

Das Problem ist, dass der IE auf px bei height nicht reagiert,

Seit wann?
Warum reagiert meiner auf height: ..px, wenn ich das so schreibe?

Code: Alles auswählen

<div style="height&#58;48px; line-height&#58;22px; padding&#58;4px; border&#58;1px solid #000000">Text...<br>
Text...</div>

<!-- Oder -->

<p style="height&#58;48px; line-height&#58;22px; padding&#58;4px; border&#58;1px solid #000000">Text...<br>
Text...</p>