floatende divs, IE mit falscher Position

_dp2

Grünschnabel
Hallo!

Ich bin in css fortgeschritten bis sehr gut unterwegs, und wollte grad ein wenig an nem neuen style rumspielen und mal ne neue Art der Navigationsleiste ausprobieren.

Doch da macht mir wieder der IE nen Strich durch die Rechnung :(

Die Navi ist so aufgebaut, dass es eine ul/li liste erzeugt, die ein div in sich trägt, welches wiederrum einen zweizeiligen text beinhaltet, der durch float automatisch in die zweite Zeile kommt.
Schwer zu beschreiben, bilder sagen mehr als Tausend Worte :)

csshelp.jpg

Wie man unschwer erkennen kann ist im oberen (FF) alles so wie es sein sollte.
(Im ersten Bild ist der Mauszeiger über dem "Forum", daher wird auch der Text darunter dargestellt.)
Ab dem 2. (IE8) gibt es dann 2 Probleme:

Einmal kapiert er nicht ganz, dass der abgedunkelte Bereich auf beiden Seiten einen Abstand von 10px einbehalten soll. Das ist nicht so tragisch, bekomm ich bestimmt auch so hin.

Was viel wichtiger ist ist das Menü.

hier mal die HTML und CSS Struktur:

HTML:
<html>
	<head>
		<title>new ggmj</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="root"><div id="cpage">
			<div id="header">
			</div>
			<div id="nav">
				<ul>
					<li class="active"><a href="#"><div>Home<em>news 'n stuff</em></div></a></li>
					<li><a href="#"><div>Forum<em>blah blah 'n such</em></div></a></li>
					<li><a href="#"><div>Members<em>This is who we are</em></div></a></li>
					<li><a href="#"><div>Servers<em>Play and have fun!</em></div></a></li>
					<li class="active"><a href="#"><div>Support<em>"Meeediiic!"</em></div></a></li>
				</ul>
			</div>
			<div id="content">
				content
			</div>
			<div id="footer">
				footer
			</div>
		</div></div>
		<div id="lastfooter">
			lastfooter
		</div>
	</body>
</html>

CSS:
body {
	margin: 0;
	padding: 0;
	font-family: Tahoma, Verdana, Sans-serif, Arial;
	font-size: 12px;
	background: #1b1919 url(bg.jpg) no-repeat center top;
	text-align: center;
}

#root {
	width: 820px;
	height: 1053px;
	margin-top: 14px;
	padding-top: 10px;
	background: url(bgshade28.png) repeat-x top;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}
#header {
	height: 211px;
	width: auto;
	background: url(header.jpg) no-repeat center top;

}
#cpage {
	width: auto;
	background: #fff;
	margin: 0 10px 0 10px;
}
#content {
	padding-top: 50px;
	clear: both;
	margin: 10px 16px;
}

#nav {
	margin: 5px 15px;
}
	#nav ul {
		margin: 0;
		margin-right: 100px;
		padding: 0;
		list-style-type: none;
	}
		#nav ul li {
			line-height: 0.8em;
			font-size: 1.8em;
			font-family: verdana;
		}
			#nav ul li a,
			#nav ul li a:link,
			#nav ul li a:visited {
				color: #b58723;
				text-decoration: none;
			}
			#nav ul li a:hover div,
			#nav ul li a:active div {
				color: #BF8D23;
			}
			#nav ul li a:hover div em,
			#nav ul li a:active div em {
				color: #ccc;
			}
			#nav ul li.active div em {
				color: #999;
			}
			#nav ul li div {
				overflow: hidden;
				border: 1px solid #ff0000;
				float: left;
				width: 19%;
			}
				#nav ul li a div strong {
					font-weight: 600;
				}
				#nav ul li a div em {
					width: 100%;
					float: left;
					font-family: century, courier-new, courier;
					font-style: normal;
					font-size: 0.6em;
					color: #fff;
				}

Im dritten Bild habe ich mal im stylesheet beim div einen roten border hinzugefügt damit man erkennt, wo der da die divs verschiebt. Die verschiebt er übrigens unabhängig davon was da drin steht, d.h. das <em> ist nicht schuld. Er bekommt die divs also garnicht erst vollständig nebeneinander angeordnet.

Meine Frage nun: Gibt es dafür einen Workaround?


Gruß und Danke, _dp
 
Hi,

der Workaround ist eine entsprechende Doctype-Angabe, mit der das HTML-Dokument den Browsern im standardkonformen Modus übergeben wird, denn ohne jeglichen Dokumenttyp schalten alle Browser in den proprietären "Quirks Modus", und in diesem Darstellungsmodus weist der IE erhebliche Mängel auf.


Übrigens dürfen gemäß der HTML-Elementreferenz Inline-Elemente (= <a>) keine Block-Elemente (= <div>) enthalten, sondern nur weitere Inline-Elemente oder Text.

mfg Maik
 
Kein Ursache ;)

Und damit die Menüpunkte trotz standardkonformen Modus im IE6 und IE7 nicht weiterhin umbrechen, ist diese Regelerweiterung vonnöten:
Code:
        #nav ul li {
            line-height: 0.8em;
            font-size: 1.8em;
            font-family: verdana;
            display:inline;
        }


mfg Maik
 
Zurück