Menu - background image works in IE but NOT in Chrome

HTML & CSS
1

Strangely the small image shown below as #nav li a:hover{ is NOT working in in Chrome but works fine in IE 8.

This is really frustrating!


ul 			{	list-style-type: none;    /* removes list bullets! */
				margin:0; padding:0px;	
}

#nav 		{	position:fixed;
				float:left;
				font-family:'tangerine', arial, san-serif;
				font-size: 168%;
				width:310px;
				line-height:110%;
}

html #nav	{ 	margin:0; padding:0;
				float:left;
				position: relative;
}					

#navli 		{ 	margin:0; padding:0;
				list-style: none;
				float:left:;
				position:fixed;
				color:#0FF;
}

#nav a,#nav a:link,#nav a:visited 	
			{	margin: 0; padding: 0; 				
				color:#3CF;				/*font color for entire menu*/
				list-style: none;
				text-decoration: none;
				margin-left:10px;		/*the places a left margin for the nav list items*/
}

#nav li a:hover{	background-image: url([COLOR="#0000CD"]images/menubkrnd2.png)[/COLOR];
					color:#FFF;
					float:left;
					width:auto;
}

www.propertieswithstyle.com

Thanks Rick

2

Remove float: left from here:

#nav li a:hover { 
   background: url(images/menubkrnd2.png);
   color:#FFF;
   [COLOR=#ff0000]float: left;[/COLOR]
   width:auto;
}

Also, be aware that you have a typo here (an extra colon) in red:

#navli { 
  margin:0; padding:0;
  list-style: none;
  float:left[COLOR=#ff0000]:[/COLOR];
  position:fixed;
  color:#0FF;
}
3

Ralph - that did it!

I still don’t know what to look for. I’m so tense with fraught at times I cannot see what I’m looking at. rats!

The extra : could have taken me a full two days to see.

I gotta try and relax I suppose.

I tested it in Chrome and it functions like it should.

Thanks much Ralph.

Rick

4

Validation may relieve some of your stress. :slight_smile:

5

It takes practice, and every step you take like this will add to your experience. Hang in there. :slight_smile:

6

Hi,

One thing I will point out is that you cannot float and fix an element at the same time. Fixed positioning wins out over the float thus leaving the float property meaningless on your #navli

Another thing, you can loose that div (#nav) that’s wrapping the UL. The UL itself is a block level container completely capable of taking on any of the styles you were applying to the div.

Using #navli as an ID name can cause confusion as well when it comes time to style the LI.

Your html can clean up to something like this:

[COLOR=#0000cd]<ul id="nav">[/COLOR]
    <li><a href="#">Home Page</a></li>
    <li><a href="#">Insight On Market Values</a></li>
    <li><a href="#">Find Homes All Orange County</a></li>
[COLOR=#0000cd]</ul>[/COLOR]

Then you would simply style the LI or anchors as #nav li and #nav a