Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

css wrecking my head. popup menus

  • 13-11-2006 12:01PM
    #1
    Registered Users, Registered Users 2 Posts: 771 ✭✭✭


    http://crowleys.micksmedia.com/

    if you scroll over the nav you see popup menus in Firefox but not in IE 6

    It is based on this from alistapart.
    http://crowleys.micksmedia.com/testing2.html

    I had to edit this style sheet so that not all <ul>'s would have
    the style of the nav so the style looks like this.
    #navlist{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#660000;
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin-top:3px;
    }
    
    #navlist ul {
    	margin: 0; /*removes indent IE and Opera*/
    	padding: 0; /*removes indent Mozilla and NN7*/
    	list-style-type: none; /*turns off display of bullet*/
    	font-size: 12px;
    	z-index: 2;
     	background-image:  url("../images/navgrad.jpg"); 
    	}
    
    #navlist ul li {
    	position: relative;
    	padding: 0px 0px 0px 0px;
    	z-index: 3;
    	}
    	
    #navlist ul li ul {
    	position: absolute;
    	display: none;
    	left: 161px; /* Set 1px less than menu width */
    	top: 0px;
    	padding: 0px 0px 0px 0px;
    	z-index: 4;
    	border-bottom: 1px soild #660000;
    
    	}
    
    /* Styles for Menu Items */
    #navlist ul li a {
    	display: block;
    	padding: 3px 0px 3px 0px;
    	border-bottom: 1px solid #fff; 
        background: #728D25; /* IE6 Bug */
    	width: 161px;
    	background-color: #728D25;
     	background-image:  url(../images/navgrad.jpg); 
    	}
    
    #navlist ul li ul li a {
    	display: block;
    	padding: 3px 0px 3px 0px;
    	margin: 0px;
    	background-color:#88952C;
    	background: #88952C; /* IE6 Bug */
     	height: 15px;
    	border-bottom: 1px solid #fff; 
    	border-left: 1px solid #fff; 
    	}
    
    
    #navlist ul li a:link, #navlist ul li a:visited {
    	color: #fff;
    	font-weight:bold;
    	text-decoration: none; /* */
    }
    
    /* Fix IE. Hide from IE Mac \*/
    * html #navlist ul li { float: left; height: 1%; z-index: 5; }
    * html #navlist ul li a { height: 1%;  z-index: 5; }
    /* End */
    
    #navlist ul li a:hover {
    /*	border: 0px solid #C30019;*/
    	background-color: #ff6600;
    	color: #FFFDEA;
    	background-image:  url(../images/navbackon.jpg);  
    }
    		
    #navlist li ul li a { padding: 0px 0px; z-index:6; } /* Sub Menu Styles */
    
    
     /* The magic */		
    #navlist li:hover ul, #navlist li.over ul { 
    display: block;  
    z-index: 6; 
    padding:none;
    margin:none;
    }
    

    Ive been trying to figure this out for days and am stumped..
    anyone please have any ideas on how to help?


Comments

  • Moderators, Science, Health & Environment Moderators Posts: 9,207 Mod ✭✭✭✭mewso


    All of the css solutions for drop down menus use javascript to make it work in IE. Basically you have left out the .over class from your stylesheet which the javascript adds to the class declaration for the li tags when the mouse hovers over them.


  • Registered Users, Registered Users 2 Posts: 771 ✭✭✭whiteshadow


    thanks for the reply luke.

    but i think i've got the .over class

    /* The magic */
    #navlist li:hover ul, #navlist li.over ul {
    display: block;
    z-index: 6;
    padding:none;
    margin:none;
    }

    it's a bit messy but i guess if
    http://crowleys.micksmedia.com/testing2.html
    works then it just must be a bit of a workaround needed.

    p.s. have you got IE 6 or 7 installed?
    and if you have 7 does the following popup menu work for you
    http://crowleys.micksmedia.com/testing2.html


Advertisement