Probleme mit "class" und "id" im IE

[milliway42]

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

[Axel Richter]

Hallo

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.

Der IE mag aus irgendwelchen unerfindlichen Gründen die ID="active_menu" nicht als CSS-Selector. Mit ID="my_active_menu" oder ID="active_menu1" oder ID="activ_menu" oder ... funktioniert es. Wahrscheinlich ist der Identifier "active_menu" im IE irgendwie vorbelegt.

viele Grüße

Axel

[Axel Richter]

Hallo,

Der IE mag aus irgendwelchen unerfindlichen Gründen die ID="active_menu" nicht als CSS-Selector. Mit ID="my_active_menu" oder ID="active_menu1" oder ID="activ_menu" oder ... funktioniert es. Wahrscheinlich ist der Identifier "active_menu" im IE irgendwie vorbelegt.

Doch nicht. ;-)

Das Problem ist folgendes:
Wenn im CSS

  
a.testclass1#testid {  
 color:#ff0000;  
}  
a.testclass2#testid {  
 color:#00ff00;  
}  

definiert wird, dann matcht für den IE nur die Kombination:

  
<a href="#" class="testclass1" id="testid">Test</a>  

Die Kombination:

  
<a href="#" class="testclass2" id="testid">Test</a>  

matcht nicht. Wahrscheinlich "denkt" der IE: "Eine ID hat im HTML-Dokument eindeutig zu sein, weshalb sollte sie dann im CSS mehrfach unterschiedlich definiert werden?". Natürlich dürfen die beiden A-Elemente auch nicht in _einem_ HTML-Dokument stehen. Das Verwenden _einer_ CSS-Ressource für _mehrere_ HTML-Dokumente, sollte aber trotzdem möglich sein.

Als Lösung wird nur übrig bleiben, je HTML-Dokument eine eigene CSS-Ressource zu erzeugen.

viele Grüße

Axel