[css] [IE 5.0] Line height fout IE5

[Verwijderd]

Hallo GoTters!

Ik ben met mijn 2e officiele opdracht bezig (in duitsland, alleen technische werk, grafische werk was helaas grotendeels al gebeurd) en ben op een probleem gestuit wat betreft stylesheets in IE5. Heb een uur of 2 gezocht hier op GoT maar kon niet echt een antwoord vinden op mijn vraag. Ook Google heeft niet echt iets opgeleverd.

hier is een linkje naar de betreffende website

zoals je ziet heb ik links een bewegend menuutje gemaakt, nu heb ik in mijn stylesheet netjes dit aangegeven:

code:

<style>
.FooterCopy {   
font-family: Verdana;   
font-size: 9px; 
text-decoration: none;  
font-weight: normal ;   
clip: rect( );  
color: #000000; 
line-height: 6px}
</style>

maar IE5 maakt er een potje van... (of ik ) Dit DIVje...

code:

<div id="MFX1" style="position:absolute; width:157px; height:109px; z-index:6; left:18px; top:29px; visibility: hidden; background-color: #B6CDE4; layer-background-color: #B6CDE4; border: 0px none #000000">
<table width="157" border="0" cellpadding="3" cellspacing="0">
          <tr> 
            <td width="18" height="109"></td>
            <td width="139" valign="top" bgcolor="#E2EBF4" class="FooterCopy"><a ID="Link2" name="Link" a href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange(this)" >Unternehmens-<br>
              <br>
              entwicklung</a><br>
              <br>
              <br>
              <a ID="Link3" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange2(this)" >Firmengrunds&auml;tze</a><br>
              <br>
              <br>
              <a ID="Link4" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange3(this)" >Kundenberatung</a><br>
              <br>
              <br>
              <a ID="Link5" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange4(this)" >Referenzen</a><br>
              <br>
              <br>
              <a ID="Link6" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange5(this)" >Zertifizierung</a>
            </td>
          </tr>
        </table>
</div>

... krijgt denk ik gewoon een standaard lineheight mee, in elk geval vallen de laatste 2 a 3 van de 6 menuitems weg hierdoor.

===================================

Ik krijg maar niet door wat IE5 dan met css1 uithaalt, komt het omdat de stylesheet in DIVjes niet goed werkt?

(Ik denk zelf van niet omdat bij de Netscape6 versie van het menu hetzelfde gebeurd en daar zit het menu niet in een DIV.)

[ Voor 16% gewijzigd door Verwijderd op 13-06-2003 18:00 ]

[Verwijderd]

code:

<a ID="Link2" name="Link" a href="#"

kan nooit goed zijn

Je menuutje doet het trouwens niet bij mij op Mozilla en is retetraag op IE.

[Verwijderd]

is wel goed, kijk maar in code :-)

code:

<script>
function menu(item){

var oLink = document.getElementsByName("Link");
for (i = 0; i < oLink.length; i++)
    {
    aLink = document.getElementById(oLink[i].id);
    aLink.style.color = "#000000";
    }
Lastmenu = item;
item.style.color="#FF0000";

}

function rollover(item){
if (item != Lastmenu)
    {
    item.style.color = "#FF0000";
    }
}
function rollout(item){
if (item != Lastmenu)
    {
    item.style.color = "#000000";
    }
}
</script>

daar krijgt het submenu het gewenste rollover/out, stay red when active effect


Klopt ook dat t in Mozilla niet werkt, je word in de index.html als je mozilla heb ook doorgestuurd naar statisch menu... ik heb nml geen idee hoe ik dit mozilla compatible moet maken

[ Voor 29% gewijzigd door Verwijderd op 13-06-2003 17:59 ]

[Booster]

Een tip: gebruik [code]-tags. Dit maakt het overzichtelijker en wellicht dat mensen je dan beter kunnen helpen met je probleem.

[Verwijderd]

al gebeurt dankjoewol

[André]

Verwijderd schreef op 13 June 2003 @ 17:49:
is wel goed, kijk maar in code :-)

Blues bedoelt dat losse a'tje, dat klopt niet.

En inderdaad in IE6 duurt het een eeuwigheid dat scrollen.

Maar volgens mij zit het probleem niet in de css maar in het scroll-scriptje.

[ Voor 16% gewijzigd door André op 13-06-2003 18:04 ]

[Verwijderd]

Hm die had ik nog over t hoofd gezien toen ik die bij alle links heb weggehaald... verkeerde copypaste actie ('amateur' )...

Het menu is inderdaad niet snel en ik ben daar zelf niet zo blij mee maar mijn baas vind t hardstikke goed (hij weet er niet al teveel vanaf) maar wil wel graag dat ik maandag m t cdrommetje geef met de site erop... als je de site vanaf de indexpagina start dan is t menu al een stuk sneller vanwege preloaded plaatjes.

Ik ben er net achtergekomen dat mijn stylesheet niet helemaal compatible was met IE5.0, heb

code:

 clip:  rect(   )

weggehaald maar ik weet niet of dat verschil maakt (ben zelf nog niet begonnen met VMware dus kan het nog niet testen aangezien ik zelf gewoon IE6 heb)

[Verwijderd]

dus als ik het goed begrijp werkt het menu niet in IE5.0 omdat in het script dit staat?

code:

if(NN){
myLayer[myName+1].clip.height=0;
myLayer[myName+1].visibility=VISIBLE;
}
if(IE){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +
" "+ (0) +" "+ ("auto") +")";
myLayer[myName+1].visibility=VISIBLE;

werkt niet met clip? of doet IE dat alleen niet als die in een stylesheet word gebruikt

[ Voor 13% gewijzigd door Verwijderd op 13-06-2003 18:15 ]

[André]

is

JavaScript:

myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";

Niet hetzelfde als:

JavaScript:

myLayer[myName+1].clip= "rect(auto auto 0 auto)";

[InZane]

code:

line-height: 6px

Je bent een ; vergeten dus

[ Voor 6% gewijzigd door InZane op 13-06-2003 18:31 ]

[Verwijderd]

Zou iemand met IE5.0 willen kijken of het nu wel klopt? :-)

[Verwijderd]

Even ter informatie: ik heb het probleem opgelost, het probleem lag hier:

code:

div id="MFX1" style="position:absolute; width:157px; height:109px; z-index:6; left:18px; top:29px; visibility: hidden; background-color: #B6CDE4; layer-background-color: #B6CDE4; border: 0px none #000000">
<table width="157" border="0" cellpadding="3" cellspacing="0">
          <tr> 
            <td width="18" height="109"></td>
            <td width="139" valign="top" bgcolor="#E2EBF4" class="FooterCopy"><a ID="Link2" name="Link" a href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange(this)" >Unternehmens-<br>
              <br>
              entwicklung</a><br>
              <br>
              <br>
              <a ID="Link3" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange2(this)" >Firmengrunds&auml;tze</a><br>
              <br>
              <br>
              <a ID="Link4" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange3(this)" >Kundenberatung</a><br>
              <br>
              <br>
              <a ID="Link5" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange4(this)" >Referenzen</a><br>
              <br>
              <br>
              <a ID="Link6" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange5(this)" >Zertifizierung</a>
            </td>
          </tr>
        </table>
</div>

de twee 'br'tjes worden door IE 5.0 (en lager) niet goed behandelt. Hoewel ze leeg zijn past IE de lineheight daar aan de fontgrootte aan, ik moest dus even de code hierin veranderen:

code:

<div id="MFX1" style="position:absolute; width:157px; height:109px; z-index:1; left:18px; top:29px; visibility: hidden; background-color: #B6CDE4; layer-background-color: #B6CDE4; border: 0px none #000000">
<table width="157" border="0" cellpadding="3" cellspacing="0">
          <tr> 
            <td width="18" height="109"></td>
            <td width="139" valign="top" bgcolor="#E2EBF4" class="FooterCopy"><a ID="Link2" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange(this)" >Unternehmens-<br>
              <span class="Footerzw">&nbsp;<br></span> 
              entwicklung</a><br>
              <span class="Footerzw"><br>&nbsp;<br></span> 
              <a ID="Link3" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange2(this)" >Firmengrunds&auml;tze</a><br>
              <span class="Footerzw"><br>&nbsp;<br></span>
              <a ID="Link4" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange3(this)" >Kundenberatung</a><br>
              <span class="Footerzw"><br>&nbsp;<br></span>
              <a ID="Link5" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange4(this)" >Referenzen</a><br>
              <span class="Footerzw"><br>&nbsp;<br></span>
              <a ID="Link6" name="Link" href="#" onMouseOver="rollover(this)" onMouseOut="rollout(this)" onClick="menu(this);linkchange5(this)" >Zertifizierung</a>
            </td>
          </tr>
        </table>
</div>

en in mijn stylesheet:

code:

.Footerzw { font-family: Verdana; font-size: 6px; text-decoration: none; font-weight: normal ; color: #000000; line-height: 6px; }