Menu klopt niet in IE maar wel in FF

Status
Niet open voor verdere reacties.
En in aanvulling op het bovenstaande:
Bij mij wordt het dan te breed en komt Login op de volgende regel te staan. Als je de padding in #menu li a verandert van 1.6em naar 1.4em, blijft alles nu op 1 regel.
Als je het menu trouwens breder maakt dan 1200px, komt Login meer naar rechts te staan. Alleen moeten heel veel mensen wel scrollen bij deze breedte, maar dat is bij 1200 px ook al het geval.

Dat streepje achter Bestandsoverzicht (ik neem aan dat dat wordt bedoeld met Bestandsbeheer) is een achtergrond-afbeelding. Net zoals hierboven staat een class maken bij li a met Bestandsbeheer:
HTML: 
<a class="bestandsbeheer">Bestandsbeheer</a>
En dan in je css:
Code: 
li a.bestandsbeheer {background: none;}
 
Ja, het is sowieso apart om je menu 1200px breed te maken. Voor een fixed-width layout ga ik nooit breder dan 1000px; Dan heb je op de kleinste schermen die nog veel gebruikt worden (relatief, i know), nog 24px over voor een scrollbar.
 
Ik houd zelfs nog rekening met 800x600, hoewel je je wel kunt afvragen of dat nog echt nodig is. Maar 1024x768, dat is toch nog zo'n 30-35%.
Wat dat betreft zou je je kunnen afvragen of het niet beter is het menu over twee regels te verdelen, want veel mensen gaan niet scrollen en zullen dus 'n deel niet zien.
 
Maar met 1000px hoef je toch ook niet te scrollen op 1024*768... ;)
 
Ja, kennelijk even 'n misverstand. Ik bedoelde alleen dat die 'kleinste schermen' toch nog door veel meer dan 30% gebruikt worden, dus voldoende volgens mij om nog rekening mee te houden.
 
Aaah, vandaar. Misverstandje inderdaad :p

Maar als ik in mijn Google Analytics account kijk, dan hebben van 1200 unieke bezoekers 0 een een beeldscherm dat smaller is dan 1024px.

[table="width: 500, class: dotted"][tr][td]Resolutie[/td][td]Aantal[/td][td]Percentage[/td][/tr]
[tr][td]1280x800[/td][td]328[/td][td]21,91% [/td][/tr]
[tr][td]1024x768[/td][td]258[/td][td]17,23% [/td][/tr]
[tr][td]1680x1050[/td][td]247[/td][td]16,50% [/td][/tr]
[tr][td]1280x1024[/td][td]228[/td][td]15,23% [/td][/tr]
[tr][td]1440x900[/td][td]189[/td][td]12,63% [/td][/tr]
[tr][td]1920x1200[/td][td]47[/td][td]3,14% [/td][/tr]
[tr][td]1152x864[/td][td]46[/td][td]3,07% [/td][/tr]
[tr][td]1366x768[/td][td]24[/td][td]1,60% [/td][/tr]
[tr][td]1280x768[/td][td]22[/td][td]1,47% [/td][/tr]
[tr][td]1280x960[/td][td]19[/td][td]1,27%[/td][/tr]
[/table]
 
Ik hoop dat dit ook nog interessant is voor de TS :D
Mogelijk houdt Google kleinere niet meer bij.
Bij o.a. w3schools is 800x600 nog zo'n drie procent. En 1024 x768, dat is dus nog ruim 30% (bij meerdere sites met statistieken).
Dus ik zou persoonlijk zo'n menu ook op 1000 breed zetten, dan past het op het overgrote deel van de schermen zonder dat je horizontaal hoeft te scrollen.

Mocht je dat willen, Timmy, dan zou je bijvoorbeeld woorden iets korter kunnen maken, en de tussenruimte iets kleiner maken. Het gaat maar om 200 px verschil.
 
Bedankt voor jullie hulp.

Ik heb de CSS aangepast zoals jullie zeiden alsmede de index.html pagina. Er is echter niet veel veranderd. De login wil niet naar rechts staan, en bij Bestandsoverzicht blijft het streepje er gewoon achter staan. Als ik het menu 1000px breed maak krijg ik een tweede regel, wat absouluut niet staat.
 
Nou, je bent er haast.
* Als je die menubar 1000px breed maakt, past het nooit. Als je dat wilt, dan moet je ook de woorden inkorten, padding en marge verminderen, enz., tot het in die 1000px past. Maar dat is 'n afweging die je zelf moet maken, als je dat scrollen geen bezwaar vindt, dan hoeft 't niet.

* Dat login op de volgende regel staat, komt omdat 't net niet binnen het menu past. Als je bij #menu li a de padding verandert van 1.6em naar 1.4em, past het. Althans bij mij in Firefox, dus ik neem aan in meer browsers. 't Is zo gewoon te breed en 'n float die er niet in past wordt altijd op de volgende regel gezet, precies wat er met login gebeurt.

* Dat streepje naast bestandsoverzicht verdwijnt niet, omdat de selector in de css net verkeerd is. Er staat ul li a.bestanden {background : none;}
Daaronder staat #menu li a, en dat zet die background weer terug. En die tweede selector 'wint' van de eerste.
Als je het volgende gelijk ónder #menu li a zet, ben je eindelijk van dat vermaledijde streepje af:
Code: 
#menu li a.bestanden {background: none;}
Nu 'wint' dit van #menu li a, omdat het meer specificiteit heeft (wat 'n woord, pfff), er staat namelijk 'n class bestanden meer dan in de eerste regel.
En 't 'wint' ook omdat het in de css ná #menu li a komt.

Nou, hoop dat je zo wat verder komt.
 
Ik kom nu inderdaad een stuk verder!

Dat padding had ik al veranderd naar 1.4em. Ik heb nu het streepje bij Bestandsoverzicht, dankzij jou, weg weten te halen. Het enige wat nu overblijft is dat ik het menu nog naar rechts uit moet lijnen...
 
Ah, ik dacht dat je daar zelf mee ging stoeien.
Naar rechts uitlijnen is moeilijk, omdat #menu 1200px breed is en al vrijwel is gevuld.
Je zou #menu 1260 px breed kunnen maken, dat past nog steeds in een 1280x1024-scherm, en is nog steeds te groot voor 'n 1024x768, maar 1200 is ook al te breed.
Dus #menu 1260 px breed maken.

Je hebt de <a> waar Login in staat naar rechts gefloat. Maar dat heeft geen nut, want de <li> waar die <a> in staat is naar links gefloat.
Je moet die <li> naar rechts floaten, niet de <a>. Dus de <li> waar Login in staat 'n class geven van 'last' en die <li> naar rechts floaten.
Dan moet je waarschijnlijk meer gebruiken dan alleen .li, omdat #menu li 'wint' van .li.
Dus zoiets:

HTML: 
<li class="last"><a>Login</a></li>

En dan in je css iets van
Code: 
#menu li.last {float: right;}

Als dat niet werkt even
Code: 
ul#menu li.last {float: right;}
proberen

En als dat niet werkt
Code: 
div#menu-box ul#menu li.last {float: right;}

Als dat nog niet werkt hier om hulp komen roepen :)
Je hebt wel rekenregels wat 'wint', maar even uitproberen is vaak wel zo simpel.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan