Probleme mit Hoverscript

[Philipp_John]

Hallo zusammen...

ich setze derzeit eine Joomla-Homepage auf und muss diese natürlich auch für diverse browser programmieren. Mein Problem ist, das das automatische Hoverscript inform einer .htc Datei nicht funktioniert.

CSS-Code des Menüs:

/* Menütformatierung */

ul#mainlevel

{

  list-style-type:none;

  padding-left:10px;

  padding-top:4px;

  border:0px;

  width:990px;

  margin:auto;

}


ul#mainlevel li 

{

  background: url(../images/button.png) top right no-repeat;

  list-style-type:none;

  padding-left:1px;

  padding-right:1px;

  margin:0;

  float: left;

  position: relative;

  width:120px;

}


ul#mainlevel li:hover

{

 background: url(../images/button_o.png) top right no-repeat;

}


ul#mainlevel li ul {

 list-style-type:none;

 padding-left:2px;

 margin:auto;

 width:120px;

 display: none;

 position: absolute;

 top: 20px;

 left: 0px;

}


ul#mainlevel li:hover ul, li.folder ul{

    display:block;

    background:none;

}


ul#mainlevel li ul li{

    opacity:.85;

    filter: alpha(opacity=85);

    -moz-opacity: 0.85;

    clear:both;

	padding:0;

	margin:0;

}

.htc-Datei: Whatever:hover

    body {

    behavior: url("csshover3.htc"); 

    padding-top:0px;

    background: white url("../images/vg_background.png") 0 0 repeat-x;

    margin: auto;

    color: #333;

    width: 1000px;

}

Auf meiner statisch aufgesetzten funktioniert das hovern mit dem IE 6 einwandfrei, da hab ich allerdings auch ein anderes Script:

startList = function()

{

  if (document.all&&document.getElementById)

  {

    navRoot = document.getElementById("nav");

    for (i=0; i<navRoot.childNodes.length; i++)

    {

      node = navRoot.childNodes[i];

          if (node.nodeName=="LI")

          {

            node.onmouseover=function() {this.className+=" over";}

            node.onmouseout=function() {this.className=this.className.replace(" over", "");}

          }

    }

  }

}

window.onload=startList;

Dieses lässt sich aber nicht leicht in den Joomla Quellcode einbauen, da ich nicht weiß wo ich dort das suchen anfangen sollte und Google half mir bisher auch nicht wircklich weiter... Firefox geht alles ohne tadel.

Ich will das eig nur in meine Template einbauen ohne viel an Joomla machen zu müssen, da dies ja den Inhalt auch nur in das Template einfügt.

Ich hoffe ihr könnt mir da weiterhelfen, da ich am verzweifeln bin.

Mit freundlichen Grüßen

Philipp

Bearbeitet 29. März 2010 von Philipp_John
fehlende Info

[perdian]

Mit CSS wirst du da nicht weit kommen, der IE6 akzeptiert :hover nur für "echte Links" (also a-Elemente) und ignoriert :hover für alle anderen Elemente.

[Toothrot]

.htc-Datei:

Whatever:hover

Da steht doch genau, was Du machen musst:

How do I use it?

Link whatever:hover to the body element, and you're all set. Note that behavior URLs are relative to the html file, not to the CSS file like a background image URL would be.

body {

   behavior: url("csshover3.htc");

}

Da "behavior" Microsoft-spezifisch ist und nicht zum CSS-Standard gehört, ist das Stylesheet dann nicht valide. Es wäre demnach geschickter, die htc per Script zu verknüpfen.

[Philipp_John]

Mit CSS wirst du da nicht weit kommen, der IE6 akzeptiert :hover nur für "echte Links" (also a-Elemente) und ignoriert :hover für alle anderen Elemente.

Ich will jetzt nicht nörgeln, aber das hoverscript ist genau dafür da, das der IE6 gezwungen wird zu hovern. Geht auch mehr oder weniger einwandfrei wenn ich keine dynamischen inhalte wie bei Joomla hab und ja ich weiß das

behavior: url("csshover3.htc");

Microsoftspezifisch ist, genau dafür ist es ja auch gedacht, nur dem Internet Explorer zu sagen... mach mir das was Firefox schon kann.

Nur will es hier leider doch nicht im zusammenhang mit Joomla.

[Toothrot]

Wo genau hast Du das behavior-CSS denn eingefügt?

[Philipp_John]

ok ich hab das Problem gefunden...

Es lag an der Pfadhandhabung von Joomla.

Ich habe dem body-Element nun direkt das behavior zugewiesen und die Datei ins Joomla Hauptverzeichnis gelegt. Schon gehts. Das hover funktioniert nun auch im IE6.

mfg

John