Websiteweergave: IE goed en Firefox 2 Beta 1 niet goed

[helden1939]

Mijn website www.gerritvanhelden.nl heb ik gemaakt met NVU.
De publicatie verliep goed. De weergave in Firefox (ik meen versie 1.?) en IE was destijds goed.
Zeer recent heb ik van Firefox de Betaversie gedownload.
Bij het bekijken van de website was de weergave in Internet Explorer goed maar in Firefox 2 Beta 1 (mijn standaardbrowser) worden de navigatieknoppen niet juist weergegeven. Ze staan gedeeltelijk in de inhoud.

VRAAG:
Kan de foute weergave te wijten zijn aan de vernieuwde versie van Firefox?
of
Is er een andere reden?

[rebil]

In je style sheet staat:

Code: Selecteer alles

div#inhoud{
...
margin:0 0 0 11em;
...
}

div#navigatie{
...
width:12em;
...
}

Dus er is een overlapping van 1em. Lijkt me geen fout van Firefox.

[nirwana]

Gebruik naast de beta-versie van Firefox ook gewoon de 1.5.0.4-versie, zodat je je niet hoeft af te vragen of een bepaalde fout door de beta-versie komt. Dan kun je direct zelf zien of de webpagina er ook in 1.5.0.4 hetzelfde uitziet of dat er een verschil is waar te nemen. In mijn 1.5.0.4 zie ik namelijk ook een verspringing en zoals rebil al aangaf zal dat dan vast zo horen.

[helden1939]

Hoi Rebil en Nirwana,

Ik denk met jullie dat de weergave op internet niet wordt veroorzaakt door het gebruik van een andere versie van Firefox.
Er is een weergaveverschil op internet tussen IE en Firefox.
Bij IE is er onder aan de pagina geen schuifbalk.
Bij Firefox is onder aan de pagina een schuifbalk. Als ik die geheel naar rechts schuif dan komt een "kolommetje" in de kleur van de kop en de linkerkolom.
De breedte is volgens mij gelijk aan de overlap van de navigatieknoppen in de inhoud.
Ik hoop dat ik duidelijk heb aangegeven wat de weergaveverschillen zijn.
Maar waarom IE wel goed en Firefox rechts een kolommetje en een schuifbalk onder aan de pagina.

Ik moet iets aanpassen, maar wat.

Kunnen jullie me op weg helpen.

Groetjes en bij voorbaat dank

Gerrit

[rebil]

Code: Selecteer alles

div#kop{
...
padding:19px;
width:100%;
...
}

Als je met CSS werkt, is het box model vereiste kennis. Met die width maak je de inhoud van je kop-laag even breed als de body (en in dit geval het venster). Dan stel je daarrond nog een een rand 19 pixels in, dus je kop wordt zowel links als rechts 19 pixels breder. De linkerrand valt samen met de linkerrand van de body, dus vallen aan de rechterrand 38 pixels van de kop buiten de body. De breedte van je inhoud stel je niet expliciet in en valt daarom mooi binnen je body.

Er is een verschil met IE omdat die een ander (niet-standaard) box model hanteert. Daar zit de padding bij in de content, dus die 19 pixels worden daar van de width afgetrokken ipv er bij opgeteld.

Ik raad je aan om eens met de DOM Inspector van Firefox te spelen (als je hem geïnstalleerd hebt). Daar kan je zelfs on the fly CSS mee aanpassen en is dus zeer geschikt om mee te 'debuggen'.

[helden1939]

Hoi Rebil,

Het box-model was mij bekend. Maar ik heb niet onderkend dat IE en FF bijvoorbeeld de padding op verschillende manieren pakken.
Ik begrijp dat IE de padding nog wel binnen de content-breedte pakt maar FF pakt de width + padding.
Bedankt voor je advies en ik heb nog wat te bestuderen in het toepassen van CSS.
Met name de gevolgen van padding, margin, box-model, etc

Mocht het me niet lukken dan kom ik terug met mijn vraag.

Met vriendelijke groeten
Gerrit

[vortex]

op safari ziet het er alvast goed uit hoor.

is een eeuwige probleem denk ik , zeker met ie hebben afwijkende protocolen met de rest van de webdesign progs.
Doet microsoft natuurlijk met opzet , om de eenvoudige reden dat ie verweven zit met hun besturings systeen en de kopers van hun systeem nadien niet meer overstappen naar iets anders.

wacht maar tot vista en ie 7 verschijnt , gaat ng erger worden.