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 6 of 6
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    css menu - rollover problems in IE

    I gan get the <li> background to change on rollover in FF but nit in IE. Would somebody plz take a peek at this css and tell me what I am doing wrongly.

    I want the rollover to show on the whole width of the nav menu and not just the text link.

    Bazz

    Code:
    div#productnavbar1 {
    	float : left;
    	#background-color: #785B83;
    	background-image : url('images/menubkgrnd.jpg');
    	
    	width : 190px;
    	border : 1px solid #e5f9ff;
    	text-align: left;
    }
    
    div#productnavbar1 h3 {
    	font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
    	font-size : 1.1em;
    	margin-left : 20px;
    	padding-top : 10px;
    	padding-bottom : 10px;
    }
    
    div#productnavbar1 ul {
    	background-color: transparent;
    	display: block;
    	white-space: nowrap;
    	margin-top : -15px;
    	
    	
    	
    }
    
    div#productnavbar1 ul li
    {
    	display : block;
    	list-style-type: none;
    	line-height : 25px;
    	border-bottom : 1px solid #000040;
    	background-color : #785B83;
    	margin-left : -45px;
    	padding: 0 20px;
    }
    
    div#productnavbar1 ul li a:link, div#productnavbar1 ul li a:visited, div#productnavbar1 ul li a:active {
    	color: #000040;
    	text-decoration: none;
    	font-size : .9em;
    	font-weight : normal;
    
    }
    
    
    div#productnavbar1 ul li a:visited {
    	background-color: transparent;
    	color : #000040;
    	
    }
    
    div#productnavbar1 ul li:hover {
    	background-color: #ffffff;
    	color : #000040;
    	background: url(/images/bkgrnd2.jpg); 
    }
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Did you mean to do this? As you probably know, IE ony supports hover on the <a> element.

    Code:
    div#productnavbar1 ul li a:hover {
    	background-color: #ffffff;
    	color : #000040;
    	background: url(/images/bkgrnd2.jpg); 
    }
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Yup, I found that this gives me the desired result in FF - the whole li changes color rather than just the text link.

    So, if I have to do it as you showed, would you please give me a tip on how to make the text link fill the <li>. I've left the li:hover in the css so you can see (in FF), how I want it to be.



    Bazz
    Last edited by bazz; 03-11-2005 at 09:25 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    add display:block; to the psuedo classes for the links, u know, a:link, a:visited, a:hover, a:active and give them a width of 100% you could give them a height also if you wanted, display:block will make the link fill the containing area that it is in

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As _Aerospace_Eng_ said. You'll also need to set a width on the containing <li> since you don't at the moment.

    Code:
    div#productnavbar1 ul li
    {
    	display : block;
    	list-style-type: none;
    	line-height : 25px;
    	border-bottom : 1px solid #000040;
    	background-color : #785B83;
    	margin-left : -40px;
    	padding: 0 20px;
    	width:12em;
    }
    
    div#productnavbar1 ul li a:link, div#productnavbar1 ul li a:visited, div#productnavbar1 ul li a:active {
    	display:block; width:99%;	color: #000040;
    	text-decoration: none;
    	font-size : .9em;
    	font-weight : normal;
    	margin : auto auto;
    }
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Thank you guys... Its looking OK now in both IE6 and FF.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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