CSS cross-browser rendering probleem met unsorted list

[telefoontoestel]

Ik ben bezig met het ontwikkelen van een website. Hierbij bestaat de html code uit een aantal divs die (als de stylesheet klaar is) dmv javascript en php content krijgen. Ik heb nu problemen met de rendering van een unsorted list.

De list items heb ik de display property inline gegeven zodat ze horizontaal naast elkaar worden geplaatst, een padding van 2% links en rechts (op een of andere manier wilt de width property niets doen). De unsorted list heeft van mij een hoogte van 25px gekregen en daar begint het probleem.
Als ik deze pagina nu in IE7 bekijk dan zie je de list items helemaal naar boven geplaatst waardoor zelfs de top-border niet meer zichtbaar is met een witruimte eronder. Als ik het vervolgens in safari bekijk op de iphone staan diezelfde list items helemaal naar onderen geplaatst waardoor maar een klein bovenrandje zichtbaar is.

Aanpassingen met margins zullen hierdoor dus niet werken aangezien de knoppen dan in een van de 2 browsers helemaal nier meer zichtbaar zullen zijn. Hoe kan ik dit probleem dan oplossen?

De property vertical-align: baseline of bottom doet niets, dus daar kom ik ook niet mee verder.

De html is gevalideerd als XHTML 1.0 strict en de stylesheet als CSS 2.1

Het gaat om de volgende pagina: www.chantalhairstyling.nl/test2.html

[Pompiedom]

Je zou met specifieke css files per browser kunnen werken, je gebruikt dan een default en maakt uitzonderingen aan in de css voor ie6/7.

Ik ga even voor je op zoek naar hoe ik dat in een project gedaan heb.

--edit1

Wat ik ook tegenkwam is dit voorbeeld wat alleen door IE uitgelezen word

code:

* Holly Hack for IE \*/
* html .hmenu ul li { float: left; height: 1%; }
* html .hmenu ul li a { height: 1%; }
/* End */

[ Voor 35% gewijzigd door Pompiedom op 28-04-2009 16:11 ]

[BtM909]

bleh, gebruik dan liever conditional comments

MSDN: About Conditional Comments of http://www.quirksmode.org/css/condcom.html

[ Voor 11% gewijzigd door BtM909 op 28-04-2009 16:16 ]

[Pompiedom]

BtM909 schreef op dinsdag 28 april 2009 @ 16:16:
bleh, gebruik dan liever conditional comments

MSDN: About Conditional Comments of http://www.quirksmode.org/css/condcom.html

Yeah dat was waar ik naar zocht uit een vorig project, hier even voorbeeld voor de TS:

code:

<!--[if IE]>
    <link href="style/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 7]>
    <link href="style/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

[OkkE]

Dit is een, in mijn ogen, simpel ontwerp. Het lijkt me daarom eigenlijk ook totaal niet nodig om browser-specifieke CSS te gaan gebruiken dmv. Conditional Comments.

Ik zou beginnen met een simpele testcase, waarin alleen het menu staat en verder ook geen CSS behalve die voor het menu. Heb je bijvoorbeeld ook alle padding en margin van de UL, LI en A al op 0 gezet? Die wil, by default, nog wel eens verschillen per browser.

[OkkE]

Pompiedom schreef op dinsdag 28 april 2009 @ 16:19:
[...]


Yeah dat was waar ik naar zocht uit een vorig project, hier even voorbeeld voor de TS:

code:

<!--[if IE]>
    <link href="style/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 7]>
    <link href="style/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Maak hier aub van:

code:

<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/content/css/ie6.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/content/css/ie7.css"><![endif]-->

Om te voorkomen dat IE8 ook vrolijk je IE7 stijls gaat toepassen terwijl je dat (in de meeste gevallen) niet wilt. Door jou "if IE" ben je niet echt slim bezig mbt. toekomstige browsers van MS (zoals nu IE8).

[Bosmonster]

De list items heb ik de display property inline gegeven zodat ze horizontaal naast elkaar worden geplaatst, een padding van 2% links en rechts (op een of andere manier wilt de width property niets doen).

Dat is logisch dat width niks doet, je maakt ze namelijk inline. Ik zou ze persoonlijk niet inline maken, maar left floaten. Dit zou ook je problemen op moeten lossen (ervanuit gaande dat je de ul zelf margin/padding op 0 hebt staan, want dit is nogal browser afhankelijk).

Met betrekking tot IE7 conditional statements. Ik heb ze nooit nodig. IE6 ala, maar IE7 rendert over het algemeen prima gelijk aan alle andere browsers. Misschien heb je heel af en toe een zoom:1 nodig om hasLayout te triggeren, maar ook dat is meestal alleen bij IE6.

M.a.w. ik gebruik nooit een IE7 conditional CSS en heb het ook nooit nodig.

[ Voor 26% gewijzigd door Bosmonster op 28-04-2009 16:45 ]

[Ook al Bezet]

[b][message=31867075,noline]Heb je bijvoorbeeld ook alle padding en margin van de UL, LI en A al op 0 gezet? Die wil, by default, nog wel eens verschillen per browser.

simpelweg

Cascading Stylesheet:

*{
padding:0; 
margin:0;
}

Toevoegen lost het probleem in Opera 10 in elk geval op.

[ Voor 5% gewijzigd door Ook al Bezet op 28-04-2009 17:32 ]

[Gersomvg]

Alle listonderdelen achter elkaar zetten helpt ook al voor bepaalde padding/margin bugs in IE6/IE7
dus zo:

code:

<li>iets</li><li>nog iets</li>

en dus niet:

code:

<li>iets</li>
<li>nog iets</li>

[Bosmonster]

gersompie schreef op dinsdag 28 april 2009 @ 17:46:
Alle listonderdelen achter elkaar zetten helpt ook al voor bepaalde padding/margin bugs in IE6/IE7
dus zo:

code:

<li>iets</li><li>nog iets</li>

en dus niet:

code:

<li>iets</li>
<li>nog iets</li>

Dit maakt niks uit als je ze float. Misschien als je ze op display:inline zet, maar dat is sowieso al af te raden zoals eerder gezegd.

[Gersomvg]

Bosmonster schreef op dinsdag 28 april 2009 @ 18:08:
[...]


Dit maakt niks uit als je ze float. Misschien als je ze op display:inline zet, maar dat is sowieso al af te raden zoals eerder gezegd.

Ja.. idd. Met display:inline
Waarom is het precies dat je het afraad?

Floats gebruik ik tegenwoordig best vaak ja alleen ik vind het ondingen omdat ik nog steeds niet snap hoe het helemaal precies werkt. Als ik bijvoorbeeld een content en footer heb en ik heb in de content gefloate divs zitten dan gaat de footer ook mee floaten terwijl die buiten de content zit. Oftewel.. ik heb er geen goed beeld van wanneer je nou precies clear moet gebruiken en hoe een float overerft op elementen die erna komen.

[Kiphaas7]

Dat is met een moker een mug pletten. Het kan, maar naast de mug sla je waarschijnlijk ook (onbedoeld!!!) een stuk uit de muur.

Ik kan even de post van crisp niet vinden met de uitleg waarom je dit niet moet gebruiken, maar het komt er in ieder geval op neer dat * ongewenst nevengedrag kan opleveren, en je beter per element de margin en padding op 0 zetten (als dat nodig is natuurlijk...).

Ook al Bezet schreef op dinsdag 28 april 2009 @ 17:32:
[...]


simpelweg

Cascading Stylesheet:

*{
padding:0; 
margin:0;
}

Toevoegen lost het probleem in Opera 10 in elk geval op.

[Bosmonster]

Kiphaas7 schreef op dinsdag 28 april 2009 @ 21:30:
Dat is met een moker een mug pletten. Het kan, maar naast de mug sla je waarschijnlijk ook (onbedoeld!!!) een stuk uit de muur.

Ik kan even de post van crisp niet vinden met de uitleg waarom je dit niet moet gebruiken, maar het komt er in ieder geval op neer dat * ongewenst nevengedrag kan opleveren, en je beter per element de margin en padding op 0 zetten (als dat nodig is natuurlijk...).

[...]

* selectors zijn evil. Als je met dynamische content werkt bijvoorbeeld wil je gewoon het standaardgedrag van - noem maar iets - een list blijven gebruiken.

ALLE margins en paddings op 0 zetten levert je zo meer werk op. Hetzelfde geldt eigenlijk voor die rare reset-css'en. Ik heb altijd het idee dat mensen dat soort dingen gebruiken omdat ze simpelweg css niet 100% begrijpen en dus maar idd de spreekwoordelijke moker erbij pakken.

gersompie schreef op dinsdag 28 april 2009 @ 20:57:
[...]

Ja.. idd. Met display:inline
Waarom is het precies dat je het afraad?

Omdat je hier je list-items naast elkaar wilt hebben. Dat is iets heel anders dan dat je ze inline wilt hebben. Bij inline verlies je veel van de opmaakmogelijkheden van een block-element. Zoals de TS al zegt, width/height heeft dan geen effect meer om maar iets te noemen.

[Gersomvg]

Bosmonster schreef op dinsdag 28 april 2009 @ 21:37:
Zoals de TS al zegt, width/height heeft dan geen effect meer om maar iets te noemen.

Nu je het zegt Heb vroeger wel eens moeilijk zitten doen met een extra element in het list-item voor de breedte

[Ook al Bezet]

Bosmonster schreef op dinsdag 28 april 2009 @ 21:37:
[...]


* selectors zijn evil. Als je met dynamische content werkt bijvoorbeeld wil je gewoon het standaardgedrag van - noem maar iets - een list blijven gebruiken.

Cascading Stylesheet:

ul{margin:0;}

is inderdaad preciezer.

Bosmonster schreef op dinsdag 28 april 2009 @ 21:37:
[...]
ALLE margins en paddings op 0 zetten levert je zo meer werk op. Hetzelfde geldt eigenlijk voor die rare reset-css'en. Ik heb altijd het idee dat mensen dat soort dingen gebruiken omdat ze simpelweg css niet 100% begrijpen en dus maar idd de spreekwoordelijke moker erbij pakken.

Is het niet zo dat de standaard margins en paddings verschillen van browser tot browser? Dat aangenomen is de enige manier om je site in elke browser hetzelfde uiterlijk te geven, alle standaard instellingen ongedaan te maken.

[Bosmonster]

gersompie schreef op dinsdag 28 april 2009 @ 21:54:
[...]

Nu je het zegt Heb vroeger wel eens moeilijk zitten doen met een extra element in het list-item voor de breedte

Dan was je per definitie al fout bezig door een weer block element in je inline element te stoppen

Ook al Bezet schreef op dinsdag 28 april 2009 @ 22:46:
[...]
Is het niet zo dat de standaard margins en paddings verschillen van browser tot browser? Dat aangenomen is de enige manier om je site in elke browser hetzelfde uiterlijk te geven, alle standaard instellingen ongedaan te maken.

Ik zie de logica niet van alles resetten als sommige elementen verschillende startwaardes hebben. Die paar gevallen die je tegenkomt kun je prima on-the-fly oplossen zonder dat je heel je basis-opmaak om zeep helpt.

[telefoontoestel]

Ik ben vandaag er direct weer mee aan de slag gegaan en de genoemde tips hebben geholpen. Ze worden nu in alle browsers exact gerendered zoals ik bedoeld had. Nu hoefde ik alleen de margins nog een te passen en is het positioneren van de items (zoals het er nu uitziet) in orde.

Bedankt!