Whistler DarkEye: I-Explorer, Mozilla und CSS. Ersuche um Hilfe

Hallo zusammen,

erneut bitte ich um Hilfe.
Das Problem ist folgendes. Die Links links erscheinen in einem grau, wenn man mit den Mauszeiger drüberfährt, werden sie blau. Naja, zumindest solltens sie das. Denn im Mozilla sind die Links trotz CSS-formatierung Unterstrichen und "link-blau".

Liegt es ev. daran, dass Mozilla die a: -Pseudo formatierungen nicht akzeptiert? Aber warum schluckt er auch die Farb-formatierung, die ja per p.titel festgelegt ist?

Mit Hilfe von Bio und fjh konnte ich zumindest schon mal vom MS-all-Objekt auf das DOM-getElementById-Objekt umsteigen, ich hoffe ihr könnt mir auch diesesmal helfen

<html>

<head>

<title>Reishauer IntraNet Seite - Titel</title>

<style type="text/css">

a:link {text-decoration:none;}  
a:visited {text-decoration:none}  
a:active {text-decoration:none;}  
  
body { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; }  
p.titel {font-family:Helvetica; font-size:10pt; color:#909090; font-weight:bold;}  
p.menu {font-family:Helvetica; font-size:8pt; color:#bbbbbb; font-weight:bold; display:none;}  
p.arrow {display:none}  
  
  
#bereichemenu {position:absolute; left:130px; top:58px}  
#sapmenu {position:absolute; left:203px; top:58px}  
#pdmmenu {position:absolute; left:245px; top:58px}  
#pcdesktopmenu {position:absolute; left:291px; top:58px}  
#arrow {position:absolute; top:38px}  

</style>

<script language="JavaScript">

function over(x)  

{
   out();
   document.getElementById(x).style.color = "#4236A2"

}
  
   function out()
    {
     /* Suboptimale Lösung, da Modifikationen durch die referenzielle Existenz der Variablen (eigentlich Konstanten) erschwert wird. */
     document.getElementById("bereiche").style.color = "#909090"
     document.getElementById("sap").style.color = "#909090"
     document.getElementById("pdm").style.color = "#909090"
     document.getElementById("pcdesktop").style.color = "#909090"
    }

function show(x,y)  

{
   var menu = x +"menu";
   hide();
   document.getElementById(menu).style.display = "block"
   document.getElementById("arrow").style.left = [y]
   document.getElementById("arrow").style.display = "block"

}
  
   function hide()
    {
     /* Dito oben; suboptimal. */
     document.getElementById("bereichemenu").style.display = "none"
     document.getElementById("sapmenu").style.display = "none"
     document.getElementById("pdmmenu").style.display = "none"
     document.getElementById("pcdesktopmenu").style.display = "none"
    }

</script>

</head>

<body background="./images/title-background.jpg">

<p id="bereichemenu" class="menu">bereiche Menu</p>
<p id="sapmenu" class="menu">News Organisation Folgeprojekte RAG-Infos Dokumentation</p>
<p id="pdmmenu" class="menu">TS Menu</p>
<p id="pcdesktopmenu" class="menu">Sherpa Menu</p>
<p id="arrow" class="arrow" ><img src="./images/arrow.jpg"></p>

<!-- Note 4: Hier fängt der "eigentliche" HTML Teil an, also die Sachen, die ohne weiteres mit dem Front-Page oder einem anderen WYSIWYG-Editor geändert werden können -->

<table align=left border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td width="121"><img border="0" src="./images/title-logo.jpg" width="121" height="83" ></td>
    <td >
      <table border="0" cellpadding="8" cellspacing="0" >
        <tr>
          <td><a href="javascript:show('bereiche','128px')"> <p class="titel" id="bereiche" onMouseover=over('bereiche') >Bereiche<p>  </a></td>
          <td><a href="javascript:show('sap','202px') "> <p class="titel" id="sap" onMouseover=over('sap')  >SAP<p>   </a></td>
          <td><a href="javascript:show('pdm','243px') "> <p class="titel" id="pdm" onMouseover=over('pdm')  >PDM<p>   </a></td>
          <td><a href="javascript:show('pcdesktop','289px') "> <p class="titel" id="pcdesktop" onMouseover=over('pcdesktop')  >PC Desktop<p> </a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body>
</html>

  1. Hi Whistler,

    auf den ersten Blick - Du hast innerhalb des <a href...> für die Schrift über <p class=...> die Klasse Titel definiert - in der Klasse aber gibt es keine Definitionen für Links.
    Vermutlich vererbt der IE die Link-Formatierungen in die Klasse hinein, Mozi aber nicht. Mein Ansatz: definiere für die Klasse Titel extra Link-Formatierungen.

    Grüße,

    Utz

    1. Hallo Utz,

      danke vielmals für deine Hilfe; dein Verdacht hat sich bestätigt: In der Tat vertägt der Mozi verschachtelte CSS Definierungen im zusammenhang mit dem A-Tag nicht. Ich habe das Problem jetzt so gelöst, das ich einfach das ganze Script auf das A-Tag gehängt habe.

      Danke nochmals für deine Hilfe.

      Whistler

      1. Hallo!

        In der Tat vertägt der Mozi verschachtelte CSS Definierungen im zusammenhang mit dem A-Tag nicht.

        »»

        Das ist besonders in deinem Fall gold richtig von Mozilla, denn
        <a><p>...</p></a> ist nicht valid HTML.

        Grüße
        Thomas