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