farbdefinitionen in verschachtelter liste
Martin 0815
- css
hallo zusammen,
ich bin am verzweifeln und komme grad echt nicht mehr weiter. alles suchen half nichts. es geht um ein problem firefox <-> internet explorer. im ff läufts problemlos.
ich probiere mein menu (=verschachtelte,horizontale dargestellte liste) per css zu formatieren. die entsprechende liste erstelle ich dynamisch mit php. so sieht das ergebnis aus:
<div id="navcontainer">
<ul>
<li><a href="index.php">Startseite</a></li>
<li><a href="?site=seiteX.php">Testseite</a></li>
<li><a href="?site=seiteX.php" id="current">LinkX</a>
<ul>
<li><a href="?site=seiteX.php">LinkX</a></li>
<li><a href="?site=seiteX.php">LinkX</a></li>
<li><a href="?site=seiteX.php id="subcurrent"">LinkX</a></li>
<li><a href="?site=seiteX.php">LinkX</a></li>
<li><a href="?site=seiteX.php">LinkX</a></li>
<li><a href="?site=seiteX.php">LinkX</a></li>
</ul>
</li>
<li><a href="?site=seiteX.php">LinkX</a></li>
<li><a href="?site=seiteX.php">LinkX</a></li>
<li><a href="?seite=seiteX.php">LinkX</a></li>
<li><a href="?seite=seiteX.php">LinkX</a></li>
<li><a href="?seite=seiteX.php">LinkX</a></li>
</ul>
</div>
der (noch nicht fertige) css-code sieht folgendermaßen aus:
<!--
#navcontainer { }
#navcontainer a
{
text-decoration: none;
}
#navcontainer ul
{
padding: 0px;
margin: 0px;
list-style-type: none;
position: relative;
}
#navcontainer ul li
{
display: inline;
}
/*1st level elements*/
#navcontainer ul
{
background-color: darkred;
font-size: 20px;
border: 0px;
padding: 0px;
margin: 0px;
}
#navcontainer ul li
{
margin: 0px;
}
#navcontainer ul li a,
#navcontainer ul li a:link,
#navcontainer ul li a:visited
{
background-color: darkred;
border-right: 1px solid black;
color: white;
padding: 0px;
}
#navcontainer ul li a:hover,
#navcontainer ul li a:focus
{
border-right: 1px solid black;
color: white;
background-color: red;
}
/*current Link*/
#navcontainer ul li a#current,
#navcontainer ul li a#current:link,
#navcontainer ul li a#current:visited
{
background-color: red;
}
/*Second and subsequent levels*/
#navcontainer ul li ul
{
background-color: darkgrey; /*FUNKT NICHT IM IE*/
font-size: 14px;
position: absolute;
top: 21px;
left: 0px;
width: 100%;
border-top: 1px solid black;
}
#navcontainer ul li ul li
{
display: inline;
}
#navcontainer ul li ul li a,
#navcontainer ul li ul li a:link,
#navcontainer ul li ul li a:visited
{
background-color: darkgrey; /*FUNKT NICHT IM IE*/
border: 0px;
color: white;
}
#navcontainer ul li ul li a:hover,
#navcontainer ul li ul li a:focus
{
color: white;
background-color: grey; /*FUNKT NICHT IM IE*/
}
/*current Link*/
#navcontainer ul li ul li a#subcurrent,
#navcontainer ul li ul li a#subcurrent:link,
#navcontainer ul li ul li a#subcurrent:visited
{
background-color: grey; /*FUNKT NICHT IM IE*/
}
-->
das problem ist nun, dass der IE die background-color- und die a:hover-farbangaben in der zweiten menu-ebene einfach nicht darstellen will :-( hab rumprobiert aber er übernimmt immer die eigenschaften der ersten listen-ebene... woran liegt das? oder besser gesagt: was mache ich falsch? vielen dank!
Hi Martin,
so richtig dolle hast du dich aber nicht angestrengt beim Suchen, oder?
IE = gray
Gecko = grey
Alternativ bietet sich auch die hexadezimale Schreibweise an. Das Geheimnis wurde z.B. hier schon mal gelüftet:
http://forum.de.selfhtml.org/archiv/2006/2/t122987/
Im Übrigen hast du noch einen kleinen Fehler in deinem HTML code:
<li><a href="?site=seiteX.php id="subcurrent"">LinkX</a></li>
^ ^
Gruß
Antipitch
Hi Martin,
so richtig dolle hast du dich aber nicht angestrengt beim Suchen, oder?
IE = gray
Gecko = greyAlternativ bietet sich auch die hexadezimale Schreibweise an. Das Geheimnis wurde z.B. hier schon mal gelüftet:
http://forum.de.selfhtml.org/archiv/2006/2/t122987/
Im Übrigen hast du noch einen kleinen Fehler in deinem HTML code:
<li><a href="?site=seiteX.php id="subcurrent"">LinkX</a></li>
^ ^Gruß
Antipitch
hallo antipitch!
danke, das war natürlich der fehler. dass es an der schreibweise von grey liegen könnte, kam mir nun wirklich nicht in den sinn.. und deswegen hab ich auch in ne ganz andere richtung gesucht.. natürlich nutze ich normal die hexadezimale schreibweise, aber zum schnell mal was probieren find ich das so ganz praktisch..
der fehler im html ist mir hier im forum irgendwie reingerutscht.. aber nochmal danke
gruß
martin