CSS - Css Rollover Background Image Not Appearing

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?

Here is my code:

Code:

body { 
background-color: yellow; 
margin-left: 20%; 
margin-right: 20%; 
border: 1px dotted gray; 
padding: 10px 10px 10px 10px; font-family: sans-serif; 
}

None of the attributes such as background color, margins, border, padding are showing up when I test it out. Can someone help me?

I can't seem to find this solution anywhere

I want an image rollover with CSS to work in IE, but IE hates me so I can't get it.

Here is one of my buttons:

CSS:
#tab_nav #home_tab {
background: url(images/home.jpg) no-repeat;
width: 97px;
height: 33px;
cursor: pointer;
}
#tab_nav #home_tab:hover {background: url(images/home-over.jpg) no-repeat; width: 97px; height: 33px; }


Here is the HTML too in case you want it:

<div id="tab_nav">
<div id="home_tab" onClick="javascript:window.location.href='index.php';"></div>
</div>

Now, the rollover works well in Mozilla, but it doesn't work in IE.

Does anyone know how I can acheive this?

Thanks

BTW, here is the page

Hey,

I have a problem with IE and my CSS.

I have a table with a background-image and I wan that to change to a certain color on rollover.

div.special {background-image: url(../images/pinkfade_bg.gif);}
div.special:hover {
background:#F8F8F8;
}
div.normal {
background:#FFFFFF;
}
div.normal:hover {
background:#F8F8F8;
}

Now this works fine in Mozilla, Safari etc. Just not IE

Any ideas?

Hi Everyone,
I'm new to Dev Shed so appologises if I miss anything vital!

I'm also quite new to CSS, but do have some experience.

I am trying to develop a rounded corners, drop shadow solution for a header:


Here it is so far, now the problem occurs when I have added the navigation bar, if you roll the mouse over any of the nav links a small chunk of border appears on the bottom right of the header??

The hoover div tag is:
a.nav:hover {background-color: #99CDFF;}

The nav images are gifs that do not change on rollover just the back ground color.

If I remove the hover div tag the strange chunk of border does not occur.

Can anyone advise why this may be happening? Or what I could do to improve this?

I am having this issue in IE6.0 firefox 2.0 seems fine.

I appreciate any help!

Thanks in advance,

Jon

I am going to heck right now trying to get this navigation to work.

Here is what it is

A horizontal list based navigation that has a unique background for each of the 6 choices. It will also have a rollover effect on the background and the text when the user is on that item. The links will be text but the background will be an image. How do I set each item's background to the correct width and height pixel wise?

Hello all,

Working on this page:
http://gatehouse.graffetto.com/rollover.html

When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div.

Any ideas how to rig this up for IE? Here's the simple version of the code:

Code:

<div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';">
	<div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div>
	<div class="storyByline">1/7/07 - By Max Bowen</div>
	<div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div>
</div>

any help would be great, thanks!

I am trying to implement the below code for my own page.
The issue for me is I don't know how to get the background image to overlay the link text.

Unlike in the example I don't want the text links on top of the image, I would like to be behind. Is this possible?

Live demo of example:
http://www.tutorio.com/media/css-tutorials/rollover-example.htm


Code:

<div class="rollover">

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Tutorio</a>
</div>

Code:

.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover { 
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}

I've tried adding an image between the <a and </a> and tried to change that when hovered.

Code:

<a href="about.htm"><img src="images/testimage.png" alt="" class="testimage"/></a>

Code:

a.img.testimage:hover {
background-position: 0 -40px;

}

OK, I've gotten this to work a hundred times before, but today I am stumped. Basically, I am trying to create an image rollover with CSS.
here is my CSS: Code:

a.footer_box3{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_off.png') no-repeat;
border:none;
display:block;
}


a.footer_box3:hover{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_on.png') no-repeat;
border:none;
display:block;
}

the above CSS is in the header of the document.
Here's the code for the rollover in the page: Code:

<td background="images/footer/footer_test/footer_box3_off.png" width="222" height="169">
			<a href="our_people.asp" class="footer_box3"></a>
		</td>
		

You can see the site here
Scroll down to the bottom of the page where there are 4 footer boxes. I am only trying to get the third box to swap images on hover.

can anyone see what I am doing wrong?

thanks

I am currently trying to figure out how to make a webpage with a navigation bar that consists of rollover images, BUT if the site has CSS and/or images disabled for a visually impaired user, text will appear as links. I have been searching the net, but have had no success in a solution other than not using images.


HTML for Navigation
Code:

<!--NAVIGATION-->

		<ul>
		     <li id="home"><a href="index.html"></a></li>
		     <li id="students"><a href="students.html"></a></li>
		     <li id="faculty"><a href="faculty.html"></a></li>
		     <li id="facilities"><a href="facilities.html"></a></li>
		     <li id="maps"><a href="maps.html"></a></li>
		</ul>

CSS for first Button
Code:

/*--NAVIGATION--*/
ul{
margin: 0;
padding: 0;
list-style: none;
}

li#home{
background-image: url(images/nav_home.png);

width: 205px;
height: 52px;
display: block;
}

li#home a{ 
background-image: url(images/nav_home.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#home a:hover{ 
background-image: url(images/nav_home.png);
background-position: 204px 0;
}

how do i have images rollover? ie when the mouse i NOT on the image its img1 and when mouse is its img2?? i cant work that out

cheers

actually i have sort of done it but with some problems:

Code:

a:link, a:visited {
	background: url('images/offlinks/contactus.jpg');
}
a:hover {
	background: url('images/onlinks/contactus.jpg');
}


</style>
</head>

<body>

<a href="whatever">  hello        </a>

it works if i put any text where hello is! but thenthat background has text so it makes it unreadable?
Code:

.contact a:link, .contact a:visited {
	background-image: url('images/offlinks/contactus.jpg');
	text-decoration:none;
	color:#CED3DB;
	font-size:25px;
}
.contact a:hover {
	background-image: url('images/onlinks/contactus.jpg');
}

in the book doing this would make the links in contact class have that image but it doesnt work?

Hi all,

Wondering if anyone knows a tweak to make the following work in IE7 using pure CSS?

I have an image that grows when it is rolledover.

Css simply as follows:

.graph {
width: 200px;
height: 50px;
}
.graph:hover {
width: 600px;
height: 150px;
}

Works fine in FF (as usual!)

Regards

Charlie

Does anyone have have an idea of why the problem I am about to describe is happening?

View this link in IE 6:
paintingshiva.com / 2006rd / www / template / gallery.html

can't post url.. take out spaces between slashes
URL


This site is a prototype for my website that I am redesigning. The page above will be one of the gallery pages. Right now, I ma using colored circles as placeholder content.

Rollover the right side ART navigational elements (colored circles).

The weird circumstance:
When I rollover, two different nav elements one after another (except for the first one), the div where the title elements are, fold up into the main content area (where the large colored circle is). But if you rollover the first one after this happens, everything goes back to normal.

I can not figure out why this is happening.

I built the ART navigational elements by adding a background image to the style of the anchor tags. There is also a JavaScript at the top of the page that is changing the style of each element to make the rollover effect.

I have these thumbnail images that I want to have a thin border around them when you rolloever. A thin gray border that isn't tight to the image, but has a bit of padding.

I have other link styles, so I'm naming this "a.thumbs" it seems right, but I can't get it to work. I'm not sure whether to put a border on the image...set it at 1 or 0, I've tried both....and I still can't get the style to work.

At one point, it worked, but all it was doing was picking up my link style.

What's the problem with the code....or what is the best way to achieve this kind of rollover?

Thanks.



a.thumbs:link{
padding: 5px 15px;
border: 1px solid #FFFFFF;
}

a.thumbs:visited{
padding: 5px 15px;
border: 1px solid #CCCCCC;
}

a.thumbs:hover{
padding: 5px 15px;
border: 1px solid #CCCCCC;
}