[IE/CSS] ul gedraagt zich als display: inline

[cyberstalker]

Ik loop tegen een probleem aan in Internet Explorer. Ik heb een uitklapmenu gemaakt in CSS. De opties in dit menu staan in een geneste ul.

Probleem is dat in Internet Explorer het menu enkel uitklapt wanneer je met je muis op de tekst zelf staat. De geneste ul komt dan (wanneer ik geen margins gebruik) direct achter de tekst te staan.

Ik heb al alles geprobeerd dat ik kan bedenken, maar ik moet toegeven dat ik Internet Explorer eigenlijk niet echt ken. (Normaal schrijf ik alleen voor SC browsers.)

Een voorbeeldje kun je bekijken op http://www.xs4all.nl/~zeep10/backstage/backstage.html . Het gaat dus om het menutje dat je krijgt wanneer je over een maand heengaat.

In andere browsers gaat het gewoon zoals het moet, Opera, Firefox en Safari geven allemaal het gewenste resultaat.

Relevante HTML

HTML:

            <ul id="days">
                <li>
                    2006
                    <ul>
                        <li>
                            februari
                            <ul>
                                <li><a href="loon/20-02-2006">maandag 20</a></li>
                                <li><a href="loon/22-02-2006">woensdag 22</a></li>
                                <li><a href="loon/27-02-2006">maandag 27</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>

Relevante CSS:

Cascading Stylesheet:

ul#days > li > ul > li > ul
{
        display: none;
        position: absolute;
        margin-top: -10px;
        margin-left: 80px;
        width: 150px;
        border: 1px solid black;
        background-color: #7ebc2d;
        z-index: 1;
}

ul#days > li > ul > li:hover > ul
{
        display: block;
}

Hoe kan ik dit werkend krijgen in Internet Explorer.

[ Voor 5% gewijzigd door cyberstalker op 13-08-2007 15:08 ]

[BtM909]

Welke IE?

[BasieP]

je bent je bewust dat (iig IE 6) het hele '>' niet snapt he?

[cyberstalker]

BtM909 schreef op maandag 13 augustus 2007 @ 15:08:
Welke IE?

Allemaal. IE7 laat het wel iets beter zien dan IE6. IE6 verzint er namelijk ook nog een hoop loze ruimte onder de list-items bij wat IE7 niet doet. Het beschreven probleem hebben ze beiden.

BasieP schreef op maandag 13 augustus 2007 @ 15:09:
je bent je bewust dat (iig IE 6) het hele '>' niet snapt he?

Daar heb ik een scriptje voor include. Dean Edwards' IE7 .

[mithras]

Selector gebruiken in css is niet verstandig, de > kent IE helemaal niet

/edit: mm, oké. Maar waarom ga je dan niet aan de <ul> binnen "februari" een klasse hangen. Dat is namelijk sowieso makkelijker te parsen dan alles uitzoeken voor de browser. En je bespaart je er zelf heel veel moeite mee
Makkelijk is om eigenlijk de <li> die om februari staat een klasse te geven, dan kan je met dit uit te voeten:

Cascading Stylesheet:

#maand ul{
  /* iets */
}
#maand:hover ul{
  /* iets anders */
}

[ Voor 85% gewijzigd door mithras op 13-08-2007 15:15 ]

[TeeDee]

Als het hier IE6 betreft: deze ondersteunt alleen :hover op a - elementen. En niet op je LI zoals je het nu hebt.

Je zou of deze kunnen gebruiken of je geneste a - elementen een display block kunnen geven en de breedte daarvan gelijk kunnen trekken met je li.

edit:
bugger, voortaan even previewen

offtopic:
vind het niet echt professioneel overkomen om 'pile of shit' in je conditional statement te plaatsen.

[ Voor 21% gewijzigd door TeeDee op 13-08-2007 15:26 ]

[cyberstalker]

mithras schreef op maandag 13 augustus 2007 @ 15:12:
Selector gebruiken in css is niet verstandig, de > kent IE helemaal niet

/edit: mm, oké. Maar waarom ga je dan niet aan de <ul> binnen "februari" een klasse hangen. Dat is namelijk sowieso makkelijker te parsen dan alles uitzoeken voor de browser. En je bespaart je er zelf heel veel moeite mee
Makkelijk is om eigenlijk de <li> die om februari staat een klasse te geven, dan kan je met dit uit te voeten:

Cascading Stylesheet:

#maand ul{
  /* iets */
}
#maand:hover ul{
  /* iets anders */
}

Waarom zou ik? Met het scriptje werkt de child selector ook naar behoren in Internet Explorer. Het probleem zit NIET in de child selector (dan zou het hele menu niet zichtbaar worden), dus waarom zou ik het veranderen?

[crisp]

cyberstalker schreef op maandag 13 augustus 2007 @ 15:11:
[...]
Daar heb ik een scriptje voor include. Dean Edwards' IE7 .

Dean's IE7 is bedoelt voor IE < 7 en niet voor IE7 zelf

Verder is het natuurlijk een workaround die zeker niet perfect is, het is gewoonweg onmogelijk om alle tekortkomingen van IE met scripting op te lossen en Dean's IE7 script lost ook niet de CSS bugs van IE op, het voegt enkel support toe voor een aantal tekortkomingen.

In dit geval zou ik sowieso geen CSS gebruiken voor behavior (ueberhaupt niet eigenlijk, daar is CSS niet voor bedoelt). Voor de rest loop je waarschijnlijk gewoon tegen een aantal CSS bugs aan wat dus betekent dat je gewoon moet gaan experimenteren met dingen als layout forceren.

[cyberstalker]

crisp schreef op dinsdag 14 augustus 2007 @ 09:54:
[...]

Dean's IE7 is bedoelt voor IE < 7 en niet voor IE7 zelf

Dat weet ik, maar het werkt ook prima in IE7. IE7 is qua CSS ondersteuning bijna net zo bagger als IE6. IE7 heeft bijvoorbeeld nog steeds geen :before en :after wat ik met dit script kan gebruiken.

Verder is het natuurlijk een workaround die zeker niet perfect is, het is gewoonweg onmogelijk om alle tekortkomingen van IE met scripting op te lossen en Dean's IE7 script lost ook niet de CSS bugs van IE op, het voegt enkel support toe voor een aantal tekortkomingen.

Ook daar ben ik me van bewust. Ik beweer ook nergens dat het alle problemen oplost. Ik reageer alleen maar op mensen die mij erop willen wijzen dat de > selector niet in IE6 werkt. Die tekortkoming wordt met dit script netjes opgelost .

In dit geval zou ik sowieso geen CSS gebruiken voor behavior (ueberhaupt niet eigenlijk, daar is CSS niet voor bedoelt).

Dat standpunt begrijp ik. Ik doe het echter in dit geval liever met CSS dan met JS (anders moet ik me ook nog gaan verdiepen in het IE DOM en dat is waarschijnlijk meer werk dan om deze bugjes heenwerken).

IE is voor mij een bijzonder vreemd product. Ik werk zelf al jaren met linux en heb ook op mijn computers thuis nergens windows staan. Ik kan er dus ook niet eenvoudig in testen.

Daarom open ik dit topic in de hoop dat iemand die hier meer ervaring in heeft een simpele oplossing kan aandragen.

Voor de rest loop je waarschijnlijk gewoon tegen een aantal CSS bugs aan wat dus betekent dat je gewoon moet gaan experimenteren met dingen als layout forceren.

De hasLayout optie helpt wel iets. Ik krijg het submenutje nu bij een hover over de gehele li. De plaatsing blijft echter hetzelfde. Nu kan ik wel een aparte stylesheet includen voor IE maar de plaatsing hangt vreemd genoeg af van de lengte van de tekst en het is dus niet betrouwbaar met margins op te lossen.