CSS - Css Rollover's With Background-images In Ie??????

Good day all,

I have set up my index page for my site with css rollovers instead of javascript rollovers, and I really like the loading time, the problem that I am having is that when I click on the image rollover link there appears a white box around the image. how can this be avoided?

Please see the link below for what I am trying to explain...

http://www.karmaimports.net/indexcss.htm

thanks in advance...

Brook

i have a basic html page which includes a number of hyperlinks using jpeg images... essentially <img> tags wrappped in <a> tags.

i want to create a rollover effect with these links so that when a link is highlighted (mouseover) the jpeg image changes to another seperate jpeg impage.

is it possible to do this with html/css and if so how can i do this?

i have read about a method of doing this which combines both the original image (before mouseover) and the mouseover image into one single jpeg and changing the image's x-coordinate using css so that there is no preload/image flicker issues when the link is clicked on, but i'm not sure exactly how to code this.

any help is appreciated.

Hello everyone,

I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT?

Thank you for your replies,


Tomas

So, I'm pretty new to all this, and any help is really key.

So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it.

The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box.

Is there a way to tell the browser not to show that selection box??

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 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?

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!

Disregard pot

I simply transposed li and a tag

thanks anyway...

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?

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

Hi ! Me again :P

So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself:

(view-source for xhtml and css)

http://fotoz.hit.bg/test/menu.html

The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ?

And most importantly why does it occur?

Thanks!

p.s

I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below.

It works but I get the flickering with visibility:hidden and even if i just move the img out of the way

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 create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

Hi Folks,
I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins.

Is it possible to somehow attach an image to one side of an element?
Thanks
John