XHTMLforum - Einzelnen Beitrag anzeigen - Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera

eRoZion · #10 (**permalink**) 15.09.2005, 14:39

Ich habe jetzt nochmal alles überarbeitet und bin auch zu einer "Verbesserung" gekommen, aber beim floaten des Sub-Uls gibt es immer noch Probleme. Ich weis jetzt wirklich nicht mehr weiter.

Könnt ihr bitte mal gucken:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Test</title> 

  <style type="text/css">
body
{
 color: #FFC000;
 background-color: #000000;
 font-family: verdana, sans-serif;
 font-size: 1em;
}

#navigation
{
 font-size: 0.7em;
 position: relative;
 border-bottom: 3px solid #FFC000;
 width: 100%;
 padding: 0;
 margin: 0;
}

#navigation li
{
 float: left;
 white-space: nowrap;
 list-style-type: none;
 background-color: #EEEEEE;
 border-width: 1px 1px 0 1px;
 border-style: solid;
 border-color: #AAAAAA #555555 #EEEEEE #999999;
 margin: 0 0 0 2px;
 height: 1em;
 width: 10%;
}

#navigation li a
{
 display: block;
 color: #666666;
 border-color: #CCCCCC;
 border-width: 1px 1px 0 1px;
 border-style: solid;
 text-decoration: none;
 text-align: center;
 padding: 2px;
}

#navigation li a:hover
{
 text-decoration: underline;
}

#navigation li#active
{
 background-color: #FFC000;
}

#navigation li#active a
{
 color: #000000;
 font-weight: bold;
 border-color: #FFD45F #AA7C22 #694E0A #FFE396;
}

#navigation li#active a:hover
{
 text-decoration: none;
}

#navigation li#logout
{
 float: right;
 background-color: #FFC000;
 margin: 0 2px 0 0;
}

#navigation li#logout a
{
 color: #000000;
 font-weight: bold;
 border-color: #FFD45F #AA7C22 #694E0A #FFE396;
}

#navigation ul#subnavigation 
{
 position: absolute;
 left: 0;
 margin: 3px 0;
 padding: 0;
 width: 100%;
} 

#navigation ul#subnavigation li 
{
 border: 0; 
 margin: 0; 
}

#navigation ul#subnavigation li a 
{ 
 color: #000000; 
 font-weight: normal;
 border: 0;
} 

#navigation ul#subnavigation li a:hover 
{ 
 text-decoration: underline; 
} 

#navigation ul#subnavigation li#subactive
{ 
 background-color: #CCCCCC;
}

#navigation ul#subnavigation li#subactive a
{ 
 text-decoration: none; 
}
  </style> 
 </head> 

 <body> 
  <ul id="navigation"> [*] 
    Text 
    
  
   <li id="active"> 
    Text 
  
    <ul id="subnavigation"> 
     <li id="subactive">Text [*]Text [*]Text [*]Text [/list]    
  [*] 
    Text 
    
  [*] 
    Text 
    
  
   <li id="logout">Text [/list] </body> 
</html>

EDIT:

Wenn ich das width aus #navigation li entfernen floatet zwar alles richtig, aber die Elemente sind dann alle unterschiedlich groß.