Sprymenu wordt niet goed weergegeven

[Rick11]

Hallo,

Ik heb een vergelijkbaar probleem:

In Dreamweaver CS4 heb ik een Sprymenu aangemaakt. De breedte van elke button is hetzelfde, maar kun je uiteraard aanpassen. Nu wordt in Google Chrome het menu wel goed weergegeven, maar als ik de website in Internet Explorer of Firefox open, dan wordt de laatste button (Gastenboek) op een nieuwe regel geplaatst...

Het gaat om deze website: http://www.salonlarichesse.nl/nieuw/index.html

Heeft iemand een idee waar dit aan ligt en hoe je dit kunt voorkomen?

Bij voorbaat dank!

Groet,

Rick

 

[Tha Devil]

Beste Rick,

Welkom op Helpmij

Ik heb je vraag een eigen plaats gegeven aangezien het toch een ander probleem betreft.

Met vriendelijke groet,
Stefan (Tha Devil)
Moderator Helpmij.nl

 

[csshunter]

Hoi Rick11,
Het ligt er aan, dat de breedtes van de list-items in het Sprymenu zijn opgegeven via:
ul.MenuBarHorizontal li {width: 11.95em;}.

De em is een relatieve maat, en is gekoppeld aan de font-size. Nu is de lettergrootte en de positionerng van letters ten opzichte van elkaar een erg gevoelige zaak, en daarbij treden meestal (afrondings-)verschillen tussen de browsers op. Dat beïnvloedt de totale breedte, en bij een aantal browsers is die dan net te kort om alles op de ene regel te krijgen; dan duikt het laatste item naar de volgende regel.

• Je ziet ook een verschil tussen bv. Chrome en Internet Explorer 7: bij Chrome is de menustrook net iets korter dan de "echte breedte" van de pagina (920px) die in de lichtpaarse balk onder het menu zit; bij IE7 is de menustrook juist net iets langer.
• Bij bv. Firefox en andere IE-versies is de menustrook dus net iets te lang.

De oplossing is om de breedte van de menu-items in px te zetten, en voor de pagina-breedte een veelvoud van 7 te nemen, zodat er 7 even brede items naast elkaar passen zonder afronding.

• 920/7 = 131,42857142857142857142857142857.
• Neem je als breedte voor de items 131px, dat is het totaal 7*131= 917px.
• Dan moet de (inwendige) pagina-breedte dus 917px worden ipv 920px.

body {
    ...
    width: 917px;
    }
ul.MenuBarHorizontal li {
    ...
    width: 131px;
    }

Met vriendelijke groet,
CSShunter

 

[Rick11]

Bedankt csshunter voor je snelle reactie! Ik had al het vermoeden dat het met die em te maken had, want het kostte me al behoorlijk veel moeite om de menubalk enigszins passend te maken... Nu is het me duidelijk, bedankt voor je heldere en uitgebreide uitleg!

Groet,

Rick