Philip Ehret: CSS-Ausklappnavigation

Beitrag lesen

SELF-Forum

CSS-Ausklappnavigation

Philip Ehret
– Informationen zu den Bewertungsregeln

Hallo,

ich habe Mal wieder ein Problem mit der Anzeige eines Designs.
Laut W3 XHTML1.0 Strict und CSS valid :(
Und zwar klappt sich die Navigation beim IE nicht aus, die Versionsnummer kenne ich leider nicht, jedoch ist es auf jeden Fall 4 < ? < 7.

Das Layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="page">
 <div id="uppernav">
  <div class="subnav">
   <span>Men&uuml;1</span>
   <a href="#">Link1</a>
   <a href="#">Link2</a>
   <a href="#">Link3</a>
  </div>
  <div class="subnav">
   <span>Men&uuml;2</span>
   <a href="#">Link1</a>
   <a href="#">Link2</a>
   <a href="#">Link3</a>
  </div>
  <div class="subnav">
   <span>Men&uuml;3</span>
   <a href="#">Link1</a>
   <a href="#">Link2</a>
   <a href="#">Link3</a>
  </div>
  <div class="subnav">
   <span>Men&uuml;4</span>
   <a href="#">Link1</a>
   <a href="#">Link2</a>
   <a href="#">Link3</a>
  </div>
  <div class="subnav">
   <span>Men&uuml;5</span>
   <a href="#">Link1</a>
   <a href="#">Link2</a>
   <a href="#">Link3</a>
  </div>
 </div>
 <div id="header"></div>
 <div id="content">blubb.</div>
 <div id="lowernav"><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a></div>
 <br />
 <div id="copyright">copyright &copy; 2007 by blubb</div>
</div>
</body>
</html>

Die CSS-Datei:
body
{
 margin: 100px;
 font-size: 12px;
 font-family: Arial, sans-serif;
 background-image: url(images/bg.jpg);
 background-repeat: repeat-x;
}

div#page
{
 width: 775px;
 margin: auto;
 padding: 0px;
}

div#header
{
 clear: both;
 height: 125px;
 margin: 0px;
 padding: 25px 0px 0px 0px;
 border-width: 0px 1px 1px 1px;
 border-style: solid;
 border-color: #393232;
 background-color: #ffffff;
}

div#uppernav
{
 margin: 0px;
 padding: 0px;
 position: absolute;
 z-index: 2;
}

div.subnav
{
 float: left;
 width: 155px;
 margin: 0px;
 padding: 0px;
 color: #ffffff;
 background-color: #393232;
}
div.subnav span
{
 cursor: pointer;
 display: block;
 margin: 0px;
 padding: 5px;
}
div.subnav a
{
 display: none;
 margin: 0px;
 padding: 5px;
 color: #ffffff;
 text-decoration: underline;
 border-top: 1px solid #ffffff;
}
div.subnav a:hover
{
 text-decoration: none;
}
div.subnav:hover a
{
 display: block;
}

div#content
{
 margin: 0px;
 padding: 5px;
 border-width: 0px 1px 1px 1px;
 border-style: solid;
 border-color: #393232;
 background: #ffffff;
 color: #000000;
}

div#lowernav
{
 margin: 0px;
 padding: 5px;
 color: #ffffff;
 text-align: center;
 background: #393232;
}
div#lowernav a
{
 color: #ffffff;
 text-decoration: underline;
}
div#lowernav a:hover
{
 text-decoration: none;
}

div#copyright
{
 text-align: center;
 font-size: 10px;
 color: #c0c0c0;
}

img
{
 border: none;
}

Sorry, dass ich die Dateien zurzeit nirgends zum Anschauen bereitstellen kann.

Soweit ich weiß sind alle Attribute, auch "z-index" schon ab IE4 verfügbar.

Habt ihr eine Ahnung, woran das liegen mag?

Viele Grüße,
Philip

Beitrag melden
–
Informationen zu den Bewertungsregeln