[HTML/CSS] FF <-> IE list-items

[Verwijderd]

Ik ben nu reeds 2 uur aan het uitpluizen waarom de volgende site fout loopt in IE.
In FF doet hij volledig wat van hem verwacht wordt. De code is ook compleet juist
(gevalideerd op W3.org)

EDIT:
Elke <li> zou dus moeten onderstreept worden ... dit gaat goed bij FF,
maar bij IE gebeurt dit enkel wanneer je er over gaat, terwijl er geen
enkele :hover is voor de <li> (en die IE trouwens niet ondersteund)

De eerste <li> met "Home" wil hij al helemaal niet onderstrepen ...
de onderste wel ... Het heeft niet te maken met de li's die te dicht op elkaar staan
waarde de vorige de volgende overdekt, want met een grote margin er tussen, blijft
het probleem.

in oorsprong wordt mijn <ul><li></li></ul> structuur ge-includ via php,
maar dat kan geen probleem geven want dit heeft de correct html terug.

De site staat momenteel tijdelijk op http://mozal.be/pm

Het lijkt me een IE bug, maar IE heeft er zoveel en ik heb hem
tot op dit moment nergens terug gevonden!

Misschien weten jullie of het al dan niet om een bug gaat of
een verkeerde html/css interpretatie van mij.

Alvast bedankt.

[ Voor 29% gewijzigd door Verwijderd op 06-07-2005 22:37 ]

[Verwijderd]

Ik zie in IE wel de laatste 2 onderstreept, in Firefox allemaal.

Sowieso moet je voor IE je container even in het midden laten zetten, met

code:

{
text-align: center;
}

Want zo ziet het er niet uit in IE

[Verwijderd]

Verwijderd schreef op woensdag 06 juli 2005 @ 22:40:
Ik zie in IE wel de laatste 2 onderstreept, in Firefox allemaal.

Sowieso moet je voor IE je container even in het midden laten zetten, met

code:

{
text-align: center;
}

Want zo ziet het er niet uit in IE

wat heeft dat voor nut ? mijn UL neemt 100% v/d breedte van mijn DIV,
dan doet het er toch niet toe of die nu links rechts of in de midden staat ?

[We Are Borg]

Je weet wat ze zeggen over claimen dat je een bug hebt gevonden he ?

Ik zou sowieso de LI een vaste height mee geven. Weet niet of dat het doet, zal even verder zoeken

Edit: Hij heeft het over je container. In firefox staat je gehele site in het midden, maar in IE helemaal links. Als je zijn oplossing pakt, dan werkt het ook in IE (het uitlijnen dan:P )

Edit2: height toevoegen aan de li is de oplossing voor je probleem. Lokaal getest en werkt . Of het een bug is in IE: geen idee, maar ik zou het niet gelijk een bug noemen.

[ Voor 48% gewijzigd door We Are Borg op 06-07-2005 23:01 ]

[crisp]

Lijkt hier op: http://positioniseverything.net/explorer/ie-listbug.html - probeer eens wat van de workarounds die daar genoemd worden (zoals de UL een position:relative geven)

[Verwijderd]

We Are Borg schreef op woensdag 06 juli 2005 @ 22:55:
Je weet wat ze zeggen over claimen dat je een bug hebt gevonden he ?

Ik zou sowieso de LI een vaste height mee geven. Weet niet of dat het doet, zal even verder zoeken

Edit: Hij heeft het over je container. In firefox staat je gehele site in het midden, maar in IE helemaal links. Als je zijn oplossing pakt, dan werkt het ook in IE (het uitlijnen dan:P )

Edit2: height toevoegen aan de li is de oplossing voor je probleem

Bij mij staat mijn uiterste div wel degelijk in de midden in IE ... ik heb IE6 zonder SP's.

[We Are Borg]

mwah, IE met SP2 dus niet. Jouw keuze uiteraard

[Verwijderd]

We Are Borg schreef op woensdag 06 juli 2005 @ 22:55:
Edit2: height toevoegen aan de li is de oplossing voor je probleem. Lokaal getest en werkt . Of het een bug is in IE: geen idee, maar ik zou het niet gelijk een bug noemen.

Inderdaad, heb ik net ook gedaan, nu doet hij het ... hoe vervelend ...
waarschijnlijk ligt dit weer aan de foute interpretatie van het boxmodel bij IE.

[crisp]

Verwijderd schreef op woensdag 06 juli 2005 @ 23:03:
[...]


Inderdaad, heb ik net ook gedaan, nu doet hij het ... hoe vervelend ...
waarschijnlijk ligt dit weer aan de foute interpretatie van het boxmodel bij IE.

Nee, dat ligt niet aan het boxmodel, maar aan de renderengine van IE. Soms moet je 'hasLayout' forceren, en dat kan o.a. door een dimensie op te geven (werd ook als mogelijke oplossing genoemd in de link die ik eerder gaf).
Feit is dat met de implementatie van Core CSS2 er behoorlijk gehacked is in de oude Trident engine waar dit soort bugs uiteindelijk het resultaat van zijn.

hasLayout is dus een interne property in Trident die o.a. bepaalt hoe bepaalde elementen gerendered moeten worden. In sommige gevallen wordt die property dus niet goed gezet*. Meer informatie daarover vind je hier

* Mijn vermoeden is dat IE7 een aantal van deze bugs zal fixen door in deze gevallen dus wel hasLayout te forceren - een hack op een hack dus; nu maar hopen dat dat niet andere bugs op gaat leveren...

[ Voor 14% gewijzigd door crisp op 06-07-2005 23:35 ]

[Verwijderd]

Verwijderd schreef op woensdag 06 juli 2005 @ 22:40:
Ik zie in IE wel de laatste 2 onderstreept, in Firefox allemaal.

Sowieso moet je voor IE je container even in het midden laten zetten, met

code:

{
text-align: center;
}

Want zo ziet het er niet uit in IE

Hoe kan da' nu toch ...

/* werkt in IE maar niet in FF */
body{text-align:center;}
/* werkt in FF maar niet in IE6SP2 */
body{margin-left:50%;}
div{margin-left:-350px;}

Combineren loopt ook fout af ...

Alsnog bedankt voor de tip ... nu nog in werking krijgen

[crisp]

de 'negatieve margin' truuk is sowieso niet aan te raden; liever zoiets:

Cascading Stylesheet:

body {
    text-align: center; /* old IE */
}
#bg {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

[Verwijderd]

sorry ... was een beetje offtopic, maar toch nog bedankt voor de reply ...

Wel behoorlijk vervelend als twee populaire browsers het al niet eens
geraken over hoe héél éénvoudige dingen weergegeven zullen worden
in hun Browser.