[css] rare uitlijning van ul in IE *

[Ibex]

In de website die ik aan het maken ben, maak ik gebruik van opsommigen. Bovendien maak ik gebruik van div's met een mooie achtergrondkleur om bepaalde stukken tekst te accentueren. Zo denk ik aan bvb quotes e.d.

Nu, wanneer ik een lijst gewoon zet heeft deze laten we zeggen een marge X van de rand. De text in de div heef teen padding van 10 om de text niet tegen de rand te laten plakken.

Wanneer ik echter een lijst in zo een div steek, staat de opsomminge op X + 10px van de rand. Een mogelijke oplossing is gebruik maken van de volgende css:

Cascading Stylesheet:

div.accent ul {
  margin-left: -10px;
}

Het effect wat ik krijg in Firefox is perfect, de lijst gewoon is op X van de rand uigelijnd, en ook de lijst in die div staat op X van de rand. In IE gaat het echter mis, daar is de lijst welke in een div zit, helemaal tegen de linkerkant geplakt, wat dus niet de bedoeling is.

Daarom dacht ik om te proberen de div aan te passen wanneer die een lijst in zich heeft. De padding-left op 0px te zetten en de rest op 10px te houden, zodat de lijst wel goed uitgelijnt zou zijn, maar hoe doe je dat in css?

Een overzicht van gebruikte css die relevant is voor dit deel van het probleem (nog steeds de oplossing die problemen geeft met IE maar in FF perfect werkt):

Cascading Stylesheet:

ul {
  list-style: none;
}
div.accent ul {
  margin-left: -10px;
}
li {
  background: url("images/dot.png") no-repeat 0px 6px;
  padding-left: 7px;
}
div.accent {
  background-color: <? echo $bgcolormed.";\n"; ?>
  padding: 10px;
  border-bottom: 1px solid <? echo $border.";\n"; ?>
  border-top: 1px solid <? echo $border.";\n"; ?>
}

_{Niet op de php in de css letten, de css wordt met php geparsed zodat ik on the fly kleuren kan veranderen}

Ik post even een screenshot van IE om het te verduidelijken:

_{*klik voor groot*}
(1) is de ul die nu links uitgelijnt staat, maar die in feite ter hoogte van lijn (2) zou moeten zijn uitgelijnt.
(3) is gewoon een figuurtje met een text naast en geen opsommingsteken (om verwarring in dit topic te voorkomen) welke ik in feite gewon gebruik om een soort van uniformiteit aan de site tegeven.

Potjandorie Ik ben in mijn sukkelbui blijkbaar, kan een modje de titel anders even veranderen in:
[css + ul] rare uitlijning van ul in IE

offtopic:
[code=css] staat nog niet bij de mogelijkheden van de [code]-tag

[ Voor 37% gewijzigd door Ibex op 04-06-2004 16:46 ]

[X-Lars]

Misschien kun je een voorbeeld laten zien (dus met HTML)? Volgens mij gebruik je teveel DIV's

[ Voor 29% gewijzigd door X-Lars op 04-06-2004 16:18 ]

[Ibex]

X-Lars schreef op 04 juni 2004 @ 16:18:
Misschien kun je een voorbeeld laten zien (dus met HTML)? Volgens mij gebruik je teveel DIV's

De website kan je hier bekijken: *knip* . Gelieve wel niet naar andere dir's te gaan ivm de bandbreedte en de uploadlimiet. Enkel de paginas "portfolio" en "about me" ter vergelijking zijn relevant

En van de divs heb je wel gelijk ergens. Ik gebruik geen tabellen en geen javascript. Geen reden voor, enkel laten we zeggen, voor de uitdaging

[ Voor 27% gewijzigd door Ibex op 04-06-2004 19:16 ]

[BtM909]

En je weet zeker dat het geen Boxmodel issue is?

[rml][ css] boxmodel gedonder en aanpakproblemen[/rml]

[X-Lars]

Ik zie het probleem niet

[Ibex]

X-Lars schreef op 04 juni 2004 @ 16:25:
Ik zie het probleem niet

In IE zou de lijst binnen de div.accent helemaal naar links verschoven moeten zijn.

[Johnny]

Browsers gaan verschillend om met lijsten, sommige geven de <ul> een margin of padding, andere de <li>, het beste is om zowel de margin als padding voor beide op nul te zetten en dan daarna handmatig instellen.

De code van je website is trouwens ook sematisch fout.

Gebuik <p> voor alinea's
Gebruik <h1> t/m <h6> voor koppen
Gebruik <label> voor je formulieren.
Je navigatie <div> is eigenlijk ook een lijst.

code:

Neem bijvoorbeeld dit:
[img]"images/dot.png"[/img] <span class="code">Form:</span>
Dat kan veel makkelijker zo:

<h4>Form:</h4>

Met de volgende CSS, die je slechts 1x hoeft te doen:

h4 {
margin: 0;
padding: 0;
padding-left: 20px;
background-image: url("images/dof.gif");
background-position: 0% 50%;
background-repeat: no-repeat;
}

[ Voor 37% gewijzigd door Johnny op 04-06-2004 16:33 ]

[Ibex]

Johnny schreef op 04 juni 2004 @ 16:31:
Browsers gaan verschillend om met lijsten, sommige geven de <ul> een margin of padding, andere de <li>, het beste is om zowel de margin als padding voor beide op nul te zetten en dan daarna handmatig instellen.

De code van je website is trouwens ook sematisch fout.

1 Gebuik <p> voor alinea's
2 Gebruik <h1> t/m <h6> voor koppen
3 Gebruik <label> voor je formulieren.
4 Je navigatie <div> is eigenlijk ook een lijst.

code:

Neem bijvoorbeeld dit:
[img]"images/dot.png"[/img] <span class="code">Form:</span>
Dat kan veel makkelijker zo:

<h4>Form:</h4>

Met de volgende CSS, die je slechts 1x hoeft te doen:

h4 {
margin: 0;
padding: 0;
padding-left: 20px;
background-image: url("images/dof.gif");
background-position: 0% 50%;
background-repeat: no-repeat;
}

1) Inderdaad, maar voolopig hou ik het nog op de nodige <br>'s omdat <p> nogal onhandig werkt vind ik persoonlijk.
2) agree, dat zou ik idd beter doen
3) die gebruik ik hoor, maar om layout redenen moet per label-input -paar alles nog eens in een div
4) dit snap ik niet zo goed, maar dit doet er hier niet zo toe momenteel

Over die [img]"images/dot.png"[/img] <span class="code">Form:</span>
Dit is idd makkelijker zo op te lossen. Bedankt voor de tips iig

[ Voor 10% gewijzigd door Ibex op 04-06-2004 16:44 ]

[X-Lars]

Ibex schreef op 04 juni 2004 @ 16:28:
[...]

In IE zou de lijst binnen de div.accent helemaal naar links verschoven moeten zijn.

Die was bij mij (IE6) hetzelfde als in Mozilla.

[Ibex]

X-Lars schreef op 04 juni 2004 @ 16:46:
[...]
Die was bij mij (IE6) hetzelfde als in Mozilla.

Hmz, Zou je even een screenshot kunnen nemen aub?

[X-Lars]

Sorry, in de iets donkerder grijze area op 'portfolio' is het inderdaad links uitgelijnd

Misschien een oplossing om ook je li een margin-left mee te geven. Ik zal zo even voor je zoeken, ben t wel vaker tegengekomen namelijk.

[Johnny]

Ibex schreef op 04 juni 2004 @ 16:43:
[...]

1) Inderdaad, maar voolopig hou ik het nog op de nodige <br>'s omdat <p> nogal onhandig werkt vind ik persoonlijk.

Maar het is fout. Als je zo graag XHTML valid bezig bent dan is het de bedoeling dat je zoveel mogelijk de tags gebruikt waar ze voor zijn bedoeld. <br/> is er om tussentijds regels af te breken <p> is het begin en het einde van een alinea te markeren.

Daarnaast is er niets onhandigs aan <p>, het is enkel anders. Hoe sneller je begint hoe sneller je het niet meer onhandg vind.

3) die gebruik ik hoor, maar om layout redenen moet per label-input -paar alles nog eens in een div

Maar je moet wel het <label for="idvanveld"> doen en dan het veld van je formulier een id geven met die naam, anders heb je er weinig aan.

4) dit snap ik niet zo goed, maar dit doet er hier niet zo toe momenteel

Je navigatie is in dit geval een horizontale lijst van links, dus moet je dat ook zo in je HTML zetten, dit is wel een beetje een twijfelgeval, maar als je later opeens een andere CSS stijl er aan wilt hangen, bijvoorbeeld met bullets, achtergronden en een verticale lijst dan is het wel handig, en ook als je het op een niet-CSS browser bekijkt (small screen erndering in Opera) is het overzichtelijker.

[Ibex]

Johnny schreef op 04 juni 2004 @ 17:01:
Maar het is fout. Als je zo graag XHTML valid bezig bent dan is het de bedoeling dat je zoveel mogelijk de tags gebruikt waar ze voor zijn bedoeld. <br/> is er om tussentijds regels af te breken <p> is het begin en het einde van een alinea te markeren.

Daarnaast is er niets onhandigs aan <p>, het is enkel anders. Hoe sneller je begint hoe sneller je het niet meer onhandg vind.

Maar je moet wel het <label for="idvanveld"> doen en dan het veld van je formulier een id geven met die naam, anders heb je er weinig aan.

Hmz, daar heb je gelijk in, eventjes aan beginnen

Je navigatie is in dit geval een horizontale lijst van links, dus moet je dat ook zo in je HTML zetten, dit is wel een beetje een twijfelgeval, maar als je later opeens een andere CSS stijl er aan wilt hangen, bijvoorbeeld met bullets, achtergronden en een verticale lijst dan is het wel handig, en ook als je het op een niet-CSS browser bekijkt (small screen erndering in Opera) is het overzichtelijker.

Nu, mijn navigatie is in feite toch gewoon een aantal links naast elkaar, welke tesamen in een div zitten, dit omdat de site van onder naar boven in verschillende divs zit, een div voor elk onderdeel. Dus op zich lijkt het me ook niet echt nodig om daarvan een lijst te maken. Maar je hebt wel gelijk wanneer je zegt dat het handiger zou zijn voor later, maar ik denk dat ik de opmaak van de navigatie toch niet echt zal veranderen.

Om ff op het probleem zelf terug te komen;
Je kan bvb een img genest in een a aanspreken door a img {. Maar kan je ook de a in dit geval aanspreken, dus bvb een a op voorwaarde dat er een img is in genest?

[Pelle]

Titelfix

[Ibex]

Pelle schreef op 04 juni 2004 @ 17:25:
Titelfix

Het probleem is opgelost trouwens. Ipv met de marges e.d. te sukkelen heb ik een css-item bijgemaakt nl div.nopaddingleft, waar de padding-left, zoals de naam al zegt, op 0px staat. Daarna gewoon in die div deze naam bijvoegen en het probleem was opgelost

Hopelijk kan het topic nog van pas komen voor anderen

[ Voor 60% gewijzigd door Ibex op 04-06-2004 19:16 ]