CSS - Ie Background-image :hover Not Working

I have a thumbnail image with a link below. When hovering over the link, I want the enlarged image to pop up. I've tried it 2 ways. Both are close, but neither works the way I want it. Perhaps someone can help tweak one of these options?

Option 1 is he
http://concrete-creative.com/temp/print/1.html
**What I don't like here is that you can hover over a big, blank area below the link and the larger image pops up. I only want the linked text [JACK IT UP] to pop the larger image up.

Option 1_B is he
http://concrete-creative.com/temp/print/1_B.html
**The problem here is the the larger image while INVISIBLE is sitting below the text [JACK IT UP] which is pushing my HTML table too wide.

Can someone help me find the happy medium between these 2 solutions so it works the way I want it to?

THANKS!

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.

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?

Disregard pot

I simply transposed li and a tag

thanks anyway...

I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!

I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox.

css code for the body tag is:

body { background-color: #0d005e;
background-image: url('images/bgmain.jpg');
background-repeat: repeat-x; }

Any thoughts?

Hi,

I want to put a background image for a div section of my site. It works fine in i.e. but i can't get it to show up in firefox. Does anyone know why?

CSS:
Code:

body {
	font-family : Arial, Helvetica, sans-serif;
	font-size: 16px;
	background: #330000;
	text-align:center;
	margin: 0; 
	padding: 0
}

#mainarea {
	background-image:
	url('alexandertea_bg_v03.jpg');
	width: 719px;
	height: 650px;
}

HTML:
Code:

<body>
	<div class="topbar">
		<img src="images/lemonreghome.gif" id="home">
		<img src="images/lemonregstory.gif" id="story">
		<img src="images/lemonregwheretobuy.gif" id="wheretobuy">
	</div>
	<div id="mainarea">
		Hellow
	</div>
</body>

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

I'm using <LI> to make vertical menu with image hover effect? It seems quite good and working properly in both IE and Firefox. But In IE6 hover effect comes slowly after nearly 1 seocnd. Is there any solution?
following is my css code.

Code:

#navigation { width:160px;	font:bold 14px Arial, Geneva, Helvetica, sans-serif; }
#navigation ul {list-style: none; margin: 0; padding: 0;}
#navigation ul li a {display:block;	background:url(button-menu2.png) no-repeat;	vertical-align: bottom;	font-size:12px;	font-weight:bold; text-align: left; padding-top: 6px; padding-left: 18px;	height: 20px !important; height: 20px; width: 100%;	text-decoration: none;	color: #ffffff;	}
#navigation ul li a:hover {text-decoration: none; background-position: 0px -25px; color: #fff;}

Hi All,

Anyone know of a way to change acheive this behaviour?

I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself).

Thanks in advance for any pointers.

Cheers,

:)Ben

I've got a problem with the background on hover. It's just a smidge too low and I can't figure out how to raise the background without raising the text. If you look at the image below, you'll notice that the hover "courses & events" is just a bit too low. (real stuff is on a development site, with themes, master pages, etc., and doesn't have a dns beyond our firewall) Any help appreciated.

http://www.mahec.net/images/a.jpg

#topBar {
position:absolute;
padding:0;
width:800px;
background:#78658c;
filter: Alpha(Opacity=90, FinishOpacity=30, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=30);
-moz-opacity:.60;
opacity: 0.6;
border-top:solid 1px #000000;
height:25px;
overflow:hidden;
}

#topInnerBar a {
text-decoration:none;
color:#F9F9E4;
font-weight:bold;
line-height:27px;
margin-top:-5px;
padding:2px 10px 5px;
}

#topInnerBar a:hover {
text-decoration:none;
color:#593F72;
font-weight:bold;
line-height:27px;
margin-top:-5px;
padding:2px 10px 5px;
background:#F9F9E4;
}

Hi,

I am trying to set background color on hover for a single table of links, rather than the entire document like the below example shows.

http://www.projectseven.com/tutorials/css/pseudoclasses/

I have tried various ways, I do not want to use javascript for this and I am aware of the way to apply background color to the .td field but this also applys to the normal text not just links.

So my question is how do I apply the background hover color to one table of links instead of the body. Thanks!

I have these two areas.

Code:

.MenuItem {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:0px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

.MenuItemTop {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:2px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

which refer to the left nav.

My code only changes the color behind the text, not the entire area (box) behind the text.

Code:

.MenuItemTop a:hover, .MenuItem a:hover {
	color:#FFFFFF;
	text-decoration:underline;
	font-size:12px;
	background-color:#000000;
}

Any ideas why?

example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm

Brad

I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot.

I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail.

Here is the HTML I am using for this particular container:

<div id="fivels">

<div id="classone">
<a class="home" href="#">Home</a>
<a class="gallery" href="#">Gallery</a>
<a class="about" href="#">About</a>
<a class="help" href="#">Help</a>
<a class="partner" href="#">Partner</a>

</div>

</div>

And here is my CSS:

#fivels {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 800px;
background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */
}



#classone {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
}

#classone a:link {
color: white;
text-decoration: none;
background-color: black;
filter: alpha(opacity=20);
}

#classone a:visited {
color: white;
text-decoration: none;
background color: black;
filter: alpha(opacity=20);
}

#classone a:hover {
color: white;
text-decoration: none;
background-color: white;
filter: alpha(opacity=20);
}

.home {
padding: 3.2em;
}
.gallery {
padding: 3.2em;
}
.about {
padding: 3.2em;
}
.help {
padding: 3.2em;
}
.partner {
padding: 3.2em;
}

Also, on a side note, is using the padding attribute the most efficient way of seperating the links?