Hoi Hobie,
't Is niet te zeggen dat Firefox en andere browsers fout zitten, en IE goed.
Ik neig naar het omgekeerde (zoals de ervaring leert)! :d
Verschijnsel even nageplozen. Wat is er aan de hand?
De code is een mengeling van html-opmaak en css-opmaak, wat vaak ongelukkig uitvalt (beter zou zijn om alle opmaak in de css te regelen; en ook om geen tabellen voor opmaak te gebruiken).
- De tabel-cel waar de <ul> van het menu in zit, heeft een opgegeven breedte van 700px.
- Maar de tabel zelf, en dus ook de tabel-rij van deze tabel-cel, heeft een opgegeven breedte van 1000px.
- De tabelrij bestaat dus uit een tabel-cel plus een lege ruimte van 300px ernaast!
- Oftewel: het is een incomplete tabel, want eigenlijk hoort er een lege cel naast > die dan de resterende 300px ruimte naast de 700px voor zijn rekening kan nemen.
- Door de incomplete tabel doen alle browsers (ook IE) terecht, alsof de tabel-cel met het menu toch de volle breedte inneemt: de opgegeven breedte wordt genegeerd bij het vaststellen van de werkelijke breedte van de tabel-cel.
- Het <ul>-lijstje met de menu-items zit binnen de tabel-cel, en erft dus de breedte-eigenschap van die cel.
- De andere browsers nemen de echte, werkelijk vastgestelde waarde van de tabel-cel als uitgangspunt voor de erfenis: dan krijgt de <ul> dus ook de volle breedte. Dat lijkt me correct!
- Zo niet Internet Explorer: die hanteert de opgegeven waarde van de tabelcel (de 700px, die in werkelijkheid niet gebruikt wordt) als basis voor de <ul>-breedte, en daardoor past het menu-rijtje er niet meer op. Dat lijkt me incorrect.
Zo is het gekomen.
Met wat javascript kan je voor de browser die de pagina bekijkt, precies laten uitrekenen wat de werkelijk gehanteerde breedtes zijn, en checken of het klopt wat ik beweer:
- Test a, vergelijkt IE en de rest met huidige ontbrekende cel:
luka-test-a.htm.
Resultaat: verschil IE en de rest.
- Test b, vergelijkt IE en de rest met de ontbrekende cel erbij gezet:
luka-test-b.htm.
Resultaat: geen verschil IE en de rest, ook de rest duikt nu naar beneden.
Daardoor is het hier de oplossing om de opgegeven breedte van de tabel-cel van de <ul> er gewoon uit te halen.
Met vriendelijke groet,
CSShunter
_________
PS, voor zover je dit niet al van plan was:
Als je een afbeelding (foto) op een webpagina zet, is het wel zo verstandig om in je tekenprogramma die afbeelding precies op de maat te maken die je op de pagina gaat gebruiken. Anders:
- kan de verhouding hoogte/breedte zoek raken, waardoor vertekening in de foto plaatsvindt (dat is nu het geval);
- gaat de browser de afbeelding schalen naar het juiste formaat, en dat geeft een stuk mindere kwaliteit dan als je het in een tekenprogramma doet.
Bijkomend voordeel van de afbeelding op ware grootte: minder kB's te downloaden dan als de afbeelding te groot was > prettig snellere pagina!
In de
foto op de test-pagina's is dit in orde gebracht, en tevens wat bijgesneden om de kleine vriend wat meer aandacht te geven. Ook nog even de rode oogjes weg-gepimpt. Leuk kereltje!
