[JS/CSS] Browser compatibility vraagje

[oZy]

Oi, heb het volgende

JavaScript:

function fMenuRollover(element, state)
  {
    if (state != 'down')
    {
      element.className = 'sn-u4';
      element.parentNode.className = 'sn-u2';
      element.parentNode.nextSibling.className = 'sn-u3';
    }
    else
    {
      element.className = 'sn-d4';
      element.parentNode.className = 'sn-d2';
      element.parentNode.nextSibling.className = 'sn-d3';
    }
  }

..en roep het aan dmv

HTML:

<a href="#" class="sn-u4" onmouseover="fMenuRollover(this, 'down');" onmouseout="fMenuRollover(this, 'up');">

Dit werkt prima in IE6, en Moz 1.4 alleen nu blijkt dus dat IE4 en IE5 hier een mooie javascript error geven bij onmouseover/out ("Verwacht object" op regel van <a> tag). Moet ik het bij deze oudere browsers anders aanroepen of gewoon vergeten?

[2]

hm, probeer eens de -'s uit je class namen te slopen.

[oZy]

juistem, dat helpt. tnx! Heb ik nog een ander stukje

HTML:

<style>
.pni      { color: #FFFFFF; 
               margin-right: 16px; 
               padding-left: 8px;
               background-image: url(../i/icon_pipe_FFFFFF.gif);
               background-repeat: no-repeat; 
               background-position: center left; }

.pniU    { color: #FFFFFF; }

.pniU:hover { 
               color: #FFFFFF; 
               text-decoration: none; }
</style>

<!--.. code.. -->

    <span class="pni"><a href="#" class="pniU">Nieuws</a></span>
    <span class="pni"><a href="#" class="pniU">Agenda</a></span>

Dit werkt ook wel onder IE6, Moz 1.4, maar onder IE4 werken de margin/padding/background niet, en onder Opera 7.11 en Netscape 7 alleen de background niet.

Ter verduidelijking, het is dus een horizontaal menu met die pipe gif als bullit voor een nieuws item.

[Verwijderd]

Een inline element (zoals een span, strong of een a) kan voor zover ik weet geen padding (en volgens mij ook geen margin) hebben. Het werkt in ieder geval niet in IE.

Wat die achtergrond betreft: IE en Netscape willen nog wel eens verschillen in hoe het pad naar het plaatje is gedefinieerd. IE ziet het vanuit het document wat de CSS heeft ingeladen en NS vanuit het .css-document zelf. (of andersom)

Kijk hier eens

[ Voor 10% gewijzigd door Verwijderd op 20-06-2003 11:12 ]

[Verwijderd]

Verwijderd schreef op 20 June 2003 @ 11:08:
Wat die achtergrond betreft: IE en Netscape willen nog wel eens verschillen in hoe het pad naar het plaatje is gedefinieerd. IE ziet het vanuit het document wat de CSS heeft ingeladen en NS vanuit het .css-document zelf. (of andersom)

Het is andersom, en dat was een bug in Netscape 4.x vziw. NS 7 doet 't goed.

Voorbeeldje

[Bosmonster]

Dacht dat NS 4.x helemaal geen CSS background ondersteunde

[oZy]

Ik ondersteun nu IE4+, moz 1+, netscape 7, opera 7.11... ik denk dat ik daar wel 99% van de bezoekers mee heb. NS4 ga ik niet meer aan beginnen.

Het werkt nu voor allemaal, behalve IE4, die laat dus de margin/padding niet zien. Ik kan er anders nog <div><a> van maken, maar dat zie ik nog wel, voorlopig werkt het prima zo.