Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navcontainer issue

    Hi,

    I have this Page working fine in all browsers using the navcontainer CSS - however when I use "current" to highlight a sub menu option in IE it uses the main image. In all other browsers it is correct. It should be the pale green background image as used when you hover over the sub menus.

    Also if anyone can tell me how to get rid of that silly gap on the right I'd be even more appreciative.

    CSS here

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by tricky76 View Post
    I have this Page working fine in all browsers using the navcontainer CSS - however when I use "current" to highlight a sub menu option in IE it uses the main image. In all other browsers it is correct. It should be the pale green background image as used when you hover over the sub menus.
    Hmm... Did you invent your own l2 tags?
    Code:
    <div id="navcontainer">
    	<ul>
    	<li><a href="#">Home page</a></li>
    	<li><a href="#">What's new</a></li>
        <li><a href="#">About us</a></li>
    	<li><a href="SubMain_who.html" target="_top" id="current">Who we work with</a></li>
    
    		<div id="navcontainersub">
    		<l2><a href="#">Schools</a></l2>
    		<l2><a href="localauthorities.html" target="_top" id="currentsub">Local Authorities</a></l2>
    		<l2><a href="#">Charities</a></l2> 
    		</div>
    	<li><a href="SubMain_services.html" target="_top">Our services</a></li>
    		<div id="navcontainersub">
    
    		<l2><a href="#">Well-Being</a></l2>
    		<l2><a href="#">EAP</a></l2>
    		<l2><a href="#">Headspace</a></l2>
    		<l2><a href="#">Training &amp; development</a></l2>
    </div>
    While it seems that in at least Firefox 2 and Opera 9 you can style such custom elements using the selector l2 {...} then this is not the case in IE6 and IE7. This is why your selectors are not working in IE:
    Code:
    #navcontainersub l2 a#currentsub {
    	background: url(../images/nav_sub_hover.gif);
    	color:#666666;
    	font: 11px Trebuchet MS,verdana, arial, sans serif;
    	text-indent: 30px;
    	}
    Besides that your document does not validate when you insert such custom elements. Instead, I suggest that you use ordinary li elements.


  •  

    Posting Permissions

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