floatende divs, IE mit falscher Position @ tutorials.de: Tutorials, Forum & Hilfe

_dp2 · 20.11.09 17:55

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

floatende divs, IE mit falscher Position-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-Code:

<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>

Code 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

Maik · 20.11.09 17:58

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

_dp2 · 20.11.09 19:01

so einfach :o

thx!!

Maik · 20.11.09 19:10

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;
            [B]display:inline;[/B]
        }

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

verschiedene Divs an richtiger Position nachladen

jQuery - Position von DIVs per Drag wechseln

Floatende Box

Divs übereinander ohne position?

position absolute in divs - wird nicht richtig angezeigt.

E-Mail:

Abonnieren Abbestellen