1. #1
    chosen1's Avatar
    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:
    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;	
    }
    Ziet iemand waar ik een verkeerde breedte opgeef?
    .
    no votes  

  2. #2

    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  

  3. #3
    chosen1's Avatar
    Registered
    23/10/03
    Location
    Antwerpen
    Posts
    8,502
    iTrader
    2 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/19
    Quote Originally Posted by BramVroy View Post
    This quote is hidden because you are ignoring this member. Show
    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?
    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  

  4. #4
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    wat is dat : " w\idth : 8em; "?
    no votes  

  5. #5
    Eleven's Avatar
    Registered
    11/01/09
    Location
    neverland
    Posts
    101
    iTrader
    0
    Mentioned
    0 Post(s)
    Ik dacht dat dat een box-model hack was voor oudere IE's.
    Zo iets kan natuurlijk beter met conditional comments.
    no votes  

  6. #6
    chosen1's Avatar
    Registered
    23/10/03
    Location
    Antwerpen
    Posts
    8,502
    iTrader
    2 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/19
    Quote Originally Posted by adrianhates View Post
    This quote is hidden because you are ignoring this member. Show
    wat is dat : " w\idth : 8em; "?
    Quote Originally Posted by Eleven View Post
    This quote is hidden because you are ignoring this member. Show
    Ik dacht dat dat een box-model hack was voor oudere IE's.
    Zo iets kan natuurlijk beter met conditional comments.
    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  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in