[OPGELOST] IE Windows laat het weeral afweten

* zucht * Hoe kan het ook anders...

Ik ben momenteel bezig aan mijn nieuwe persoonlijke website. Ik heb de eerste pagina gebouwd, en als dit perfect werkt kan ik verder. Alles werkt perfect in elke gangbare browser:

Mac

Safari
Mozilla FireFox
Opera 6
Internet Explorer 5

PC

Netscape 7
Mozilla FireBird
Opera 7

…behalve in, je raad het al, Internet Explorer 6 / Windows.

De lijst die als navigatie met afbeeldingen dient, heeft extreem veel ruimte tussen de verschillende elementen. Ik heb al geprobeerd alle witruimte weg te nemen en dergelijke, maar het mag niet baten. De witruimte tussen de verschillende lijstelementen wordt bepaald met CSS, maar daar lapt enkel IE / Windows even zijn laars aan.

Als iemand deze browser ter beschikking heeft, en natuurlijk vertrouwd is met CSS, mag ik je dan vragen even te kijken wat ik hieraan kan doen?

P.S.: Transparante PNG’s worden niet ondersteund in IE / Windows, dat los ik op met een GIF.

Over je laatste opmerking over die transparante png/gifs. Ik had eerst gifjes als transparante achtergrond maar mijn logo werd nog steeds met witte lijnen omstreept, wat blokkerig, het zag er niet mooi uit. Alle instellingen en opties geprobeerd bij die gifjes. Toen ik echter een png probeerde kwam die zonder de instellingen aan te passen hartstikke mooi transparant over. Kijk dus uit met het veranderen van png naar gif, misschien wordt er iets meer blokkerig... Probeer ze dan ook nog zoveel mogelijk te vermijden (ik weet het, dat alles alleen maar omdat IE6/Win het niet ondersteunt...).

Ik heb je website & css eens bekeken maar ik kan zo gauw geen ‘fouten’ ontdekken waarom het in Windows niet goed zou werken…

Wat ik je nog wel wil meegeven is dat je website er erg mooi en vooruitstrevend uitziet! Echt mooi!

Over png/gif: gif kan geen "half transparante" pixels aanmaken, iets dat een png wel kan. De rand van een prentje is meestal niet hard tegen hard, maar een beetje vaag. Gif zal dat vage randje verder opvullen met een kleur (standaard is dit wit). Bij "Save for web" in Photoshop bvb kan je een kleur kiezen om op te vullen (de achtergrondkleur van je site bvb).

@ WebJ: Thx! Ben een heel weekend bezig geweest met het concept te bedenken, had zeker 8 dingetjes geprobeerd en dit kwam er als beste uit. Ik snap ook absoluut niet wat IE hierachter drijft, net omdat de witruimte sowieso al gestuurd wordt met CSS :?

@Kippewit: Dan is misschien een oplossing de schaduw als JPG te zetten, en als achtergrond het streepjespatroon te nemen. Vermits de streepjes zo dicht op mekaar liggen, sluiten ze normaal gezien min of meer perfect aan op het streepjespatroon van de achtergrond van de pagina.

margin : 0 toevoegen aan je li declaraties.

[quote:02affcb612="tennapel"]margin : 0 toevoegen aan je li declaraties.[/quote:02affcb612]

Heb ik nu toegevoegd, maar nog steeds niets spijtig genoeg…

Ik heb nog wat verder geëxperimenteerd, en heb bij wijze van test de padding van de elementen op 0 gezet, in de CSS resulteert dat dus in dit:

[code:1:7ce7e98a39]#navlist li {margin: 0; padding: 0;}[/code:1:7ce7e98a39]

Dit levert het resultaat op wat je zou verwachten: Elke browser (behalve IE / Windows), zowel op Mac als PC, plaatst alle 4 de afbeeldingen tegen mekaar. IE / Windows echter laat voor de grap er nog 10 pixels tussen. Dit is de testpagina waarin ik dit geprobeerd heb.

Ik ga nog wat Googelen, maar ben er redelijk op doodgekeken, nu snap ik echt niet meer waarin het kan liggen…

Ik zal er even een screenshot bijvoegen hoe het er uitziet in IE6 / XP:

[img:7ce7e98a39]http://users.skynet.be/bert_fonteyn/oak3/list_ie.gif[/img:7ce7e98a39]

-> De blauwe ruimte tussen elk element krijg je door alles te selecteren bij Windows, dit om gewoon de ongewenste witruimte van 10px te illustreren.

Mogelijke problemen, aangezien je nu niets meer kunt vertrouwen:

in #div_navi
height: 82px;

in allle menu-elementen
height: 9px;

Verder zie ik echt geen mogelijkheid meer dat windows het weer ‘verkloot’, ik weet dat de height: 9px; in de menu-elementen is zodat het niet als één pixel weergeven wordt. Verder, kan het niet zijn dat windows moeite heeft met de 0% en 0% die je in de background na de url en voor de no-repeat definieërt?
Het zin maar mogelijkheden…

line-height van je ul en li op normal zetten

Koppig als ik ben, had ik besloten me hierop vast te bijten tot ik een oplossing vond. De oplossing kwam (zoals dat vaak is met zulke workarounds) uit een heel onverwachte hoek.

Dit regeltje in de li declaratie zetten bleek genoeg:

[code:1:d8d486cfa7]font-size: 0;[/code:1:d8d486cfa7]

Raar, vermits er totaal geen tekst gebruikt wordt maar achtergrondafbeeldingen voor de links, maar het werkt en dat is het belangrijkste, niet?

Misschien had je een h3 of andere h-grootte niet goed afgesloten, of dacht windows dat die nog niet goed afgesloten was, wat je met font-size: 0; oplost :wink:

Bedankt voor de oplossing, is best interessant dat allemaal te horen :slight_smile:

Het is raar. Met line-height moet het ook opgelost zijn, maar ik zie niet aan je stylesheet dat de lineheight anders dan 'normal' is.

Ik heb geen tijd om er in te duiken, maar ik heb het op mijn ‘to do’ lijstje gezet.