CSS - Rollover Background Image Not Working Ie6

Hi everyone,

I just worked for two days to make my menu work on IE6. Now it works perfectly on IE6, but ironically it doesn't work on IE7 anymore.

Basically, I have a two line menu bar. Each line consists of 9 squares, some are images that are links and some are just decoration images. Each line ("menu1" and "menu2") is an unordered list, with a background image of one of the menus.

When one of the link squares is hovered, I want just this square to show a different place on the bottom of the background image.

So what doesn't work?
Only IE7 doesn't recognizes the link squares as links. No hover, No link. I can't navigate anywhere in IE7...

Please help me...!!

I've attached the relevant code, added comments and colored the parts that I think might cause the problem.

html:

Code:

	<div id="globalnav">
    
		<ul id="menu1">
        	<li id="nav_home"><a href="../home/" title="Home">home</a></li>
        	<li id="nav_about"><a href="../about/main.htm" title="About us">about us</a></li>
      		<li id="nav_recruit"><a href="../recruit/" title="Recruit">recruit</a></li>
		</ul>

	  	<ul id="menu2">
       	  <li id="nav_company" name="nav_company"><a href="../company/outline.htm" title="Company">company</a></li>
       	  <li id="nav_clients" name="nav_clients"><a href="../clients/clients.htm" title="Clients">clients</a></li>
   		  <li id="nav_contacts" name="nav_contacts"><a href="../contacts/" title="Contacts">recruit</a></li>
	  	</ul>
        
    </div>

css:

Code:

@charset "utf-8";

/* English Menu bar */

/* Box for the entire menu (two rows of ul) */

#globalnav	{
	height: 130px;
	width: 675px;
	}

/* Create box and put background image for each menu line */

#globalnav ul#menu1	{
	height: 62px;
	width: 675px;
	background: transparent url(../images/menu1.jpg) top left no-repeat;
	padding: 0;
	position: relative;
	margin: 0 0 5px 0;
	}

#globalnav ul#menu2	{
	height: 62px;
	width: 675px;
	background: transparent url(../images/menu2.jpg) top left no-repeat;
	margin: 0;
	padding: 0;
	position: relative;
	}
/* Boxes for each link square on the menu */

#globalnav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	width: 75;
	}
	
#globalnav li, #globalnav a {
	height: 62;
	display: block;
	}
	
 #globalnav a {
	line-height: 62px;
	text-decoration: none;
	text-indent: -9999px;
	display: block;
} 

/* Define the area on the background image of the ul which coressponds to each link box */

#nav_home		{left: 0; width: 75px;}
#nav_about		{left: 225px; width: 75px;}
#nav_recruit 	{left: 525px; width: 75px;}
#nav_company	{left: 150px; width: 75px;}
#nav_clients	{left: 375px; width: 75px;}
#nav_contacts	{left: 600px; width: 75px;}

/* Maybe the next part is unnecessary... */

#nav_home		{background: transparent url(../images/menu1.jpg) 0 0 no-repeat;}
#nav_about		{background: transparent url(../images/menu1.jpg) -225px 0 no-repeat;}
#nav_recruit	{background: transparent url(../images/menu1.jpg) -525px 0 no-repeat;}
#nav_company	{background: transparent url(../images/menu2.jpg) -150px 0 no-repeat;}
#nav_clients	{background: transparent url(../images/menu2.jpg) -375px 0 no-repeat;}
#nav_contacts	{background: transparent url(../images/menu2.jpg) -600px 0 no-repeat;}

 /* Hovered menu items  */
/* the background image in the link box should change to a diffetent part on the big image, which isn't normally shown - doesn't work in IE7 */ 

#nav_home a:hover {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
#nav_company a:hover {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;} 

/* Active menu items */
/* This part just makes the page we are currently in appear as hovered - works fine in all browsers */

body#home #nav_home			{background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
body#about #nav_about		{background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
body#recruit #nav_recruit	{background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
body#company #nav_company	{background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
body#clients #nav_clients	{background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
body#contacts #nav_contacts	{background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}

By the way - before changing it, I had all the squares in a table. Worked on IE7, but not IE6.

Oh and I'm using transitional DTD. is that ok?

Hey peeps,

having trouble getting background images to display rollOvers for a <td> tag in IE (pc and mac). Works fine in firefox and safari. Heres me code:

CSS:

Code:

.house_menu_cell {
	background-image: url(../images/nav/homes/glo_house_nav_bg_0.gif); cursor:pointer;
}
.house_menu_cell:hover {
	background-image: url(../images/nav/homes/glo_house_nav_bg_1.gif); cursor:pointer;
}

HTML:

Code:

<td class="house_menu_cell">

Any help would be great. Ive spent about an hour trauling the net with no luck!

Cheers

mish

Hi guys. This is my first post and I'm relatively new to CSS so I apologize if my post reeks of newcomer!

I'm currently setting up my site with an external stylesheet. Everything has been coming along fine until I decided to setup a menu with css rollover image links. For some reason I simply cannot get the image to appear whatsoever. Everything else is working (such as position and size (I have temporarily given it a border for locational purposes)) within the code but the image just does not appear.

I have looked this up for some time now and cannot come to a resolution. I have tried altering the code, changing paths, etc. etc. But I can't get it. Would really appreciate some help.

Here is the rollover portion of my css:

Code:

 #rollhome 
	{
	display:block;
	float:left;
	margin: 0 auto;
	width:122px;
	height:50px;
	text-decoration: none;
	background-image:url("images/topmenu_home.png") no-repeat 0 0;
	border:#000000 solid 2px;
	text-indent:-99999px;
	z-index:20;
}

#rollhome:link, #rollhome:visited
{
background-position: 0;
}

#rollhome:hover 
{
background-position: 0 -50px;
}

And here is the rollover portion of my html:

Code:

<div id="rollovers">
<a id="rollhome" href="#"title="rollhome">Home</a><
/div>

Any help would be most appreciated!

Hi, I have the following code: Code:

<div id="nav">

                           <ul class="nav">
                                	<li>
                                        <a href="/webdesign/">web design</a>
                                	</li>
                                    <li>
                                        &nbsp;|&nbsp;
                                    <li>
                                        
                                    <li>
                                        <a href="/web programming/">web programming</a>
                                   </li>
</ul>
</div>

My CSS looks like this :: Code:

#nav {
z-index:999;
position:absolute;
	margin-left:246px;
	margin-top:105px;
	background-image:url('images/common/navbar.png');
	width: 777px;
	text-transform: none;
	text-decoration: none;
	border-bottom-style: none;
}


.nav{
	background-image:url('images/common/navbar.gif');
}

The background image isn't showing up in the div or the <ul> . I've been staring at this for a while and can't figure it out. Does anyone see what I'm doing wrong? I know my path to the images is correct.

thanks
-Sean

I'm trying to set the background image of my header and for some reason its not being applied at all.

CSS:
Code:

#header
{
    background: url('../Images/Master/Header_Background.jpg');
    color: White;
    width: 1000px;
    height: 150px;
    position: relative;
}

The image is the same height and width of the header. I know the image is there because I can use the same url in an <img> tag and it shows up fine. The header is inside a container which I'm not setting any background attributes at all. I'm not setting any for the body either. I don't know why the image isn't showing.

Thanks.