nicht angemeldet
Hi...
Ich bin neu hier, hoffe, dass Ihr mir weiterhelfen könnt. In anderen Foren war das eher nicht gerade von Erfolg gekrönt. :(
Es geht um die Verwendung von "id" und "class". Mit Firefox haut das auch alles hin, aber der IE interpretiert meine css-Datei nur teilweise!
Ich habe ein CMS (Joomla!) und erzeuge dort ein Menü, welches (wenn Untermenüpunkt 2.2 aktiviert ist) wie folgt aussieht:
Menüpunkt 1
[b]Menüpunkt 2[/b]
---Untermenüpunkt 2.1
---[color=red][b]Untermenüpunkt 2.2[/b][/color]
Menüpunkt 3
Der Text ist normal schwarz mit einem roten Hover-Effekt. Aktive Menüpunkte werden fett+rot, aktive Elternmenüpunkte fett+schwarz ausgegeben.
Diese aktiven Menüs realisiere ich, indem der Menüpunkt die Class "mainlevel" und die ID "active_menu", bzw. "sublevel" und "active_menü". Die Elternmenüs werden mit Class "mainlevel" und ID "parent_menu" angepaßt.
Firefox interpretiert dieses auch vollkommen richtig, der Internetexplorer nimmt nur die "parant_menu"-Einträge aus meiner CSS, die "active_menu" werden nicht ausgewertet, obwohl die entsprechenden Elemente im Quellcode die richtige Class und die richtige ID haben.
Das heißt, im IE sieht das Menü (wenn Untermenüpunkt 2.2 aktiviert ist), so aus:
Menüpunkt 1
[b]Menüpunkt 2[/b]
---Untermenüpunkt 2.1
---Untermenüpunkt 2.2
Menüpunkt 3
Was mich dabei halt wundert, der "parent_menu" wird übernommen, der "active_menu" nicht - woran kann das liegen? Die Hover-Effekte für die Untermenüs sind die aus der normalen a.link bzw. a.hover-Definition.
Hier sonst nochmal meine CSS-Datei:
--------------------------------------------------------------
/* CSS Document */
body {
margin-left: 15px;
margin-top: 10px;
font-family: Verdana, Arial, Helvetica, Sans Serif;
font-size: 10px;
color: #000000;
background-image:url(../images/main.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
a:link, a:visited {
font-size: 10px;
color: #000000;
text-decoration: none;
font-weight: normal;
}
a:hover {
color: #ff0000;
text-decoration: none;
font-weight: normal;
}
a.mainlevel:link, a.mainlevel:visited {
background: url(../images/pointer_blue.gif);
background-repeat: no-repeat;
background-position: left center;
vertical-align: middle;
font-size: 10px;
font-weight: normal;
padding-left: 10px;
padding-top: 0px;
color: #000000;
text-decoration: none; }
a.mainlevel:hover {
text-decoration: none;
color: #ff0000; }
a.mainlevel#active_menu {
color:#ff0000;
font-weight: bold; }
a.mainlevel#active_menu:hover {
color: #ff0000;
font-weight: bold; }
a.mainlevel#active_parent {
color:#000000;
font-weight: bold; }
a.mainlevel#active_parent:hover {
color: #ff0000;
font-weight: bold; }
a.sublevel:link, a.sublevel:visited {
vertical-align: middle;
font-size: 10px;
font-weight: normal;
color: #000000;
padding-left: 10px;
padding-top: 0px;
padding-left: 1px;
text-align: left; }
a.sublevel:hover {
color: #ff0000;
text-decoration: none;}
a.sublevel#active_menu {
color:#ff0000;
text-decoration: none;
font-weight: bold; }
a.sublevel#active_menu:hover, {
color: #ff0000;
text-decoration: none;
font-weight: bold; }
--------------------------------------------------------------
Und hier ist der Quelltext zu der entsprechenden Stelle:
--------------------------------------------------------------
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left">
<td>
<a href="[i]link[/i]" class="mainlevel">Menüpunkt1</a>
</td>
</tr>
<tr align="left">
<td>
<a href="link" class="mainlevel" id="active_parent">Menüpunkt 2 </a>
<div style="padding-left: 10px"><a href="[i]link[/i]" class="sublevel">Untermenüpunkt 2.1</a></div>
<div style="padding-left: 10px"><a href="[i]link[/i]" class="sublevel" id="active_menu">Untermenüpunkt 2.2</a></div>
</td>
</tr>
<tr align="left">
<td>
<a href="ink" class="mainlevel">Menüpunkt 3</a>
</td>
</tr>
</table>
--------------------------------------------------------------
Bin für jeden Tipp dankbar, ich habe selber nämlich absolut keine Idee, woran es liegen könnte...
Gruß
Stefan