CSS Problem beim IE

moon22 · Beitrag von **moon22** » 26.10.2008 00:37

Hallo css Profis!

Ich habe ein kleines Problem mit dem IE. Ich möchte gerne in einem Header die gerundeten Ecken bei einer Box nutzen die dann als Zentrale Navigation dient. Und diese Ecken als Grafik wie beim prosilver Theme. Der Einfachheit halber könnte ich natürlich auch -moz-border-radius im Stylesheet verwenden - aber das versteht der IE ja schon mal gar nicht.
Da der Header-Hintergrund dunkel ist, habe ich mir mal solche Ecken gebastelt, die ich wie folgt definiere:

Code: Alles auswählen

/* common.css
---------------------- */
#headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 20px;
	height: 92px;
}

#headerbar .navbar {
	background-color: #ebebeb;
	padding: 0 10px;
	margin: 35px 20px;
	float: right;
}

#header-nav li a {
	font-family: "Lucida Grande","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
	text-decoration: none;
	font-size: 1.3em;
	line-height: 1.3em;
}

/* colours.css
---------------------- */
#headerbar span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left_dark.gif");
}

#headerbar span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right_dark.gif");
}

#headerbar span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left_dark.gif");
}

#headerbar span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right_dark.gif");
}

#header-nav li a {
	color: #ffffff;
}

#header-nav a:hover {
	color: #ff9900;
}

(hoffe ich habe jetzt nichts vergessen - ja, ebenfalls definiere ich in der cp.css zuerst kein Hintergrundbild - um Platz zu sparen hier nicht angeführt, da ja dies sowieso durch colours.css überschrieben wird)

und hier der HTML-Code dazu:

Code: Alles auswählen

...
<body class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="headerbar">
	<div class="navbar">
		<div class="inner"><span class="corners-top"><span></span></span>
		
		<ul id="header-nav" class="linklist">
			<li><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
		</ul>
		
		<span class="corners-bottom"><span></span></span></div>
	</div>
</div>

<div id="wrap">
...

Die Tragik daran ist, dass der IE ein Problem mit float:right; (bei "#headerbar .navbar {...") hat und dadurch die Eck-Bilder nicht anzeigt.

Visuell sieht das dann so aus:
Firefox:
[ externes Bild ]

IE 7:
[ externes Bild ]

Wer es schnell mal ausprobieren möchte, der kann die overall_header.html öffnen und aus

Code: Alles auswählen

<div class="navbar">

mal schnell

Code: Alles auswählen

<div class="navbar" style="float:right;">

machen und anschließend im IE betrachten.

Wie umgehe ich dieses Problem um die Box oben rechts zu positionieren? Wenn ich mit position:... arbeite ist es dasselbe - keine Ecken im IE.

Lasse ich das float:right; weg, wird der Inhalt im IE nicht angezeigt. Dann habe ich zwar schöne runde Ecken, sieht aber dann so im IE aus:
[ externes Bild ]

Ich hoffe es kann jemand helfen.

Danke und Grüße, Markus