Falsche Darstellung im Internet Explorer

rw1981 · #1 (**permalink**) 05.02.2009, 12:48

Hallo an alle,

ich hoffe, dass ihr mir helfen könnt, denn selbst nach stundenlangem Suchen im Internet komme ich hier nicht weiter.

Ich möchte eine horizintale Navigationsleiste im Browserfenster zentrieren.
Ich habe mich aus verschiedenen Gründen gegen "display: inline" entschieden und wählte "float: left".
Über den Außenabstand des linken Navigationsbuttons habe ich die Buttons zentriert.

Sowohl im Firefox als auch bei Opera wird alles perfekt angezeigt, so wie es mir Dreamweaver in der Vorschau auch zeigt.

Der Internet Explorer amcht mir aber Probleme: und zwar verrückt er die Navigationsleiste noch weiter nach rechts, sodass sie nicht mehr zentriert aussieht!

Wieso amcht er das? Ok, weil er falsch interpretiert, aber womit genau hat er ein Problem und wie löse ich das?

Anbei der Code...

Ich danke euch vielmals für eure Hilfe!!!!

Viele Grüße
Rene

HTML:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<style type="text/css"> 
@import 'stil.css';
</style>

</head>

<body>



<div id="container">
	<div id="header"></div>
			<div id="navigation">
				<ul>
					<li id="home"><a href="#" class="home"></a></li>
					<li id="aboutme"><a href="#" class="aboutme"></a></li>
					<li id="gallery"><a href="#" class="gallery"></a></li>
					<li id="guestbook"><a href="#" class="guestbook"></a></li>
					<li id="links"><a href="#" class="links"></a></li>
				</ul>
 			</div>
			
		</div>
</body>
</html>

CSS:

Code:

@charset "utf-8";

* {
	margin: 0 auto;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center center;
}


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100,01%;
	text-align: center;
}

#container {
	width: 750px;
	height: 750px;
	margin-top: 25px;
	text-align: left;
	background-color: #FFF7F3;
}

#header {
	background-color: #ff2244;
	height: 120px;
	width: 700px;
	margin-top: 25px;
}






/*Navigation:*/




#navigation {
	width: 700px;
	height: 38px;
	text-align: center;
	margin-top: 25px;
}
	
#navigation ul {
    width: auto;
	height: 38px;
	display: block;
	list-style: none;
	white-space: nowrap;
	background-color: #FFFF11;
}

#navigation ul li {
    float: left;
	display: block;
	width: 100px;
	height: 38px;
}




#navigation ul li a{
	width: 100px;
	height: 38px;
}




#home {
	margin-left: 80px; /* dieser Wert zentriert*/
	margin-right: 5px;
}

#aboutme {
	margin-left: 5px;
	margin-right: 5px;
}

#gallery {
	margin-left: 5px;
	margin-right: 5px;
}

#guestbook {
	margin-left: 5px;
	margin-right: 5px;
}

#links {
	margin-left: 5px;
}





/*Navigation: Anzeige der Hintergrundbilder in a*/

#navigation ul li a.home:link, #navigation ul li a.home:visited {
	display: block;
	background-color: #444444;
}
#navigation ul li a.home:hover, #navigation ul li a.home:focus, #navigation ul li a.home:active {
	display: block;
	background-color: #FF6666;
}




#navigation ul li a.aboutme:link, #navigation ul li a.aboutme:visited {
	display: block;
	background-color: #444444;
}
#navigation ul li a.aboutme:hover, #navigation ul li a.aboutme:focus, #navigation ul li a.aboutme:active {
	display: block;
	background-color: #FF6666;
}




#navigation ul li a.gallery:link, #navigation ul li a.gallery:visited {
	display: block;
	background-color: #444444;
}
#navigation ul li a.gallery:hover, #navigation ul li a.gallery:focus, #navigation ul li a.gallery:active {
	display: block;
	background-color: #FF6666;
}




#navigation ul li a.guestbook:link, #navigation ul li a.guestbook:visited {
	display: block;
	background-color: #444444;;
}
#navigation ul li a.guestbook:hover, #navigation ul li a.guestbook:focus, #navigation ul li a.guestbook:active {
	display: block;
	background-color: #FF6666;
}




#navigation ul li a.links:link, #navigation ul li a.links:visited {
	display: block;
	background-color: #444444;
}
#navigation ul li a.links:hover, #navigation ul li a.links:focus, #navigation ul li a.links:active {
	display: block;
	background-color: #FF6666;
}

fricca · #2 (**permalink**) 05.02.2009, 13:07

Du redest von IE < 7, ja? Das ist der doubled float-margin bug.
Du kannst dir deine Margin-Sonderangaben sparen, wenn du dem ul-Element ein passendes Padding gibst.

rw1981 · #3 (**permalink**) 05.02.2009, 19:48

Ich danke dir und werde das mal prüfen!

Gruß

rw1981 · #4 (**permalink**) 06.02.2009, 12:51

Danke Fricca, das war die Lösung!

Gruß

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
internet explorer - falsche darstellung!	alejandro	(X)HTML	3	23.05.2009 00:55
Falsche Darstellung im Internet Explorer!	st0ffy	Grafik, Design, Typografie	7	16.02.2008 01:58
Falsche Darstellung im Internet Explorer	Janizzle	CSS	0	30.08.2007 19:44
Falsche Darstellung der Navigation im Internet Explorer	andi86	CSS	1	30.07.2007 23:32
Falsche Darstellung im Internet Explorer? (Tabellen)	Bluebird	CSS	4	10.04.2005 17:28