Thread: menu width kleiner in IE
-
24-09-2010, 17:01 #1Member
- Registered
- 23/10/03
- Location
- Antwerpen
- Posts
- 8,502
- iTrader
- 2 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/19
menu width kleiner in IE
Ik ben wat aan het prullen met een site.
Achtergrond info:
- Typo3 CMS
Dus:
- HTML en CSS voor een template te maken
- JS scriptje om een hover te krijgen in IE
Nu ben ik het menu wat aan het aanpassen maar IE doet lastig.
Ik heb de breedte ingesteld op 8em maar om 1 of andere reden is het menu (of toch de achterground-kleur) 1em kleiner dan in Chrome of andere browsers.
Het is een fly-out menu met maar 1 submenu (kan zijn dat er nog verwijzingen naar een derde submenu inzitten maar die moet ik er nog uit halen).
Mijn rommelige CSS code:
Ziet iemand waar ik een verkeerde breedte opgeef?Code:#nav { position:absolute; top: 153px; left: 53px; } #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; float : left; width : 9em; } #nav li { /* all list items */ position : relative; float : left; line-height : 1.25em; margin-bottom : -1px; width: 9em; } #nav li ul { /* second-level lists */ position : absolute; left: -999em; margin-left : 9em; margin-top : -1.35em; } #nav li a { width: 8em; w\idth : 8em; display : block; color : white; font-weight : bold; text-decoration : none; background-color : black; padding : 0 0.5em; } #nav li a:hover { color : white; background-color: #333; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; }.no votes
-
-
26-09-2010, 23:34 #2Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Ik weet eigenlijk niet of je een link een breedte mag geven..
Je list items staan op 9em en je a's op 8em, waarom?no votes
-
27-09-2010, 16:31 #3Member
- Registered
- 23/10/03
- Location
- Antwerpen
- Posts
- 8,502
- iTrader
- 2 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/19
Omdat er anders een gap is tussen het menu en het tweede niveau waardoor het tweede niveau verdwijnt voor er op te klikken valt.
Ik heb nu de list ook een background gegeven waardoor er geen gap meer is qua kleur maar de gap blijft wel zichtbaar bij elke a:hover.
Dan zal het waarschijnlijk wel aan het JS liggen dat die hover enabled in IE.
Bedankt..no votes
-
27-09-2010, 17:27 #4
wat is dat : " w\idth : 8em; "?
no votes
-
27-09-2010, 21:16 #5
Ik dacht dat dat een box-model hack was voor oudere IE's.
Zo iets kan natuurlijk beter met conditional comments.no votes
-
27-09-2010, 22:34 #6Member
- Registered
- 23/10/03
- Location
- Antwerpen
- Posts
- 8,502
- iTrader
- 2 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/19
Inderdaad, box-model hack.
Doordat Typo3 soms rare dingen kan doen met conditional comments heb ik het zo gehouden.
Die "w\idth: 8em;" zorgt niet voor het probleem (ik dacht zelfs dat ik die er al helemaal uit had gehaald maar blijkbaar dus niet).
Ik denk echt dat het probleem veroorzaakt wordt door het JS scriptje voor die hover.
Maar die kan ik spijtig genoeg niet aanpassen aangezien dit de enige werkende methode is die ik kon vinden voor Typo3..no votes

