[CSS] List-probleem in IE 5.01 Windows

Ik weet niet of iemand met kennis van zake deze browser ter zijner beschikking heeft, maar ik heb er een probleem in ervaren met de navigatie van mijn [url=http://www.oak3.be]website[/url].

Hoe het er uit ziet vind je hier. Hier is de link “Oak3” actief en hover ik over “Diensten”.

Ik heb al geprobeerde de witruimte weg te nemen, de line-height en font-size van de li-elementen op 0 te zetten, maar het mocht niet baten.

Weet iemand anders misschien een concrete oplossing?

Win/IE5 heeft een ernstig probleem met padding. Ik heb Win/IE5 helaas niet direct tot mijn beschikking (alleen op mijn werk) en ik heb kortgeleden een hoos aan problemen opgelost. Wat meestal goed werkt is het volgende: [code:1:8778a8efe6] #nav li { CSS die IE5 begrijpt en ongeveer het gewenste resultaat oplevert /* voice family hack * */ CSS opnieuw declareren, met nieuwe waarden voor reeds gebruikte attributen die IE6 en andere browsers begrijpt. }

html>body #nav li {
Alle css die nodig is om Safari, Firefox etc te laten doen wat je wilt, maar dat niet in IE6 werkt
}
[/code:1:8778a8efe6]

Bijvoorbeeld

[code:1:8778a8efe6]
#nav li {
margin : 5px 0 5px 0;
– voice familiy hack –
margin : 0;
padding : 5px 0 5px 0;
}

html>body #nav li {
padding : 0.1em 0 0,1em 0;
}[/code:1:8778a8efe6]

Bestudeer de code van http://www.doublea.net om het in actie te zien

Is dit geen soort van Box Model Hack? Want ik vermoed dat een li met padding ook onder de box-definitie valt?

Dit is absoluut een box model hack

Ik ben (voorlopig) zo ver kunnen gaan als IE 5.5/WIN. Voor IE 5.01/WIN vond ik geen enkele waarde die de 10px kon simuleren, zonder dat andere browsers er over struikelden.

Met deze code lukte het:

[code:1:d0814b4ea1]* html #navlist li
{
/* algemene waarden /
list-style: none;
font-size: 0;
line-height: 0px;
display: inline;
voice-family: ""}"";
/
waarden voor IE6, FireFox, Safari, Opera,… */
voice-family: inherit;
display: block;
margin: 0; padding: 0 0 10px 0;
}

/* waarden voor IE 5.5 / Windows */
#navlist li
{
margin: 0; padding: 0 0 10px 0;
}

#navlist li, #navlist a
{
height: 10px;
display: block;
font-size: 0px;
line-height: 0px;
}

/* padding onderste navigatie-element weghalen */
li#link_contact
{
margin 0; padding: 0;
}[/code:1:d0814b4ea1]

De testpagina vind je hier.

iBert, de volgorde van je CSS declaraties kloppen niet. De definitie voor IE5 komt __na__ dezelfde declaratie met de box model hack en dat is niet de bedoeling.

Ik heb echter iets bedacht dat volgens mij ook in IE5 zou moeten werken, namelijk een adaptie van de originele code van “a list apart”. De link staat op http://www.xs4all.nl/~mosm/testsite/

Wat ik wel gedaan heb is de navi.gif [b:4eb5b1b54f]langer[/b:4eb5b1b54f] gemaakt, omdat bij de laatste link het anders fout gaat.

[quote:65fd02e42c="tennapel"]iBert, de volgorde van je CSS declaraties kloppen niet. De definitie voor IE5 komt __na__ dezelfde declaratie met de box model hack en dat is niet de bedoeling.

Ik heb echter iets bedacht dat volgens mij ook in IE5 zou moeten werken, namelijk een adaptie van de originele code van “a list apart”. De link staat op http://www.xs4all.nl/~mosm/testsite/

Wat ik wel gedaan heb is de navi.gif [b:65fd02e42c]langer[/b:65fd02e42c] gemaakt, omdat bij de laatste link het anders fout gaat.[/quote:65fd02e42c]

Wow, zeer knap werk. Ik was zelf al een beetje radeloos geworden, en had me er al wat bij neergelegd dat het niet zou kunnen. Maar ik heb het getest in elke browser die ik op mijn PC ter beschikking heb (IE 5.01 / IE 5.5 / IE 6 / Opera 7 / Netscape 7 / FireFox 0.8 ), op m’n Mac moet ik 'm nog testen, maar het ziet er allemaal perfect uit.

Heel erg bedankt tennapel!

Ik weet niet of mijn probleem onder dezelfde categorie valt, maar ik denk van wel. Het gaat in ieder geval ook over IE 5.01 http://klanten.3sign.be/cpac/ ziet er in alle browsers normaal uit, behalve in IE 5.01 op windows (op een klein achtergrond foutje na in IE 5.x op mac). Daar ziet het er zo uit: [img:8bc8d73d4f]http://klanten.3sign.be/cpac/images/screenshot.jpg[/img:8bc8d73d4f]

Heb al vanalles geprobeerd, maar ik heb de indruk dat ik iets over het hoofd zie…
stylesheet