CSS - Background Hover Slow Ie6?

Hello,

I am trying to get two image links (that look like tabs) to get to work on my web page. What I want to have is a tab that when a user hovers over it, the background image appears (just a different version of the original image).

So my HTML is:
Code:

        <table>
            <tr>
                <td><a class="flights"><img src="/images/buttons/f.gif"></a></td>
                <td><a class="vacations"><img src="/images/buttons/v.gif"></a></td>
            </tr>
        <table />

and my CSS is:
Code:

            .flights { 
                background:url(/images/buttons/f_h.gif) center top no-repeat;
                width: 78px;
                height: 41px;
/*                 background-image: url(/images/buttons/f_h.gif); */
                margin-right: 1px;
            }
            .flights:hover img { 
                visibility: hidden;
            }
            .vacations { 
/*                 background:url(/images/buttons/v_h.gif) top left no-repeat; */
                background-image: url(/images/buttons/v_h.gif);
            }

For some reason in FF (have not tested in IE) the background image sticks out a little at the bottom even though both images used are exactly the same size. Then when I hover over the tab, its background image appears but it is about halfway down from the foreground image.

Any insights as to why this might be happening?

Hi there,

I have a text field which I would like to change colour on hover. Any ideas how I would do this?

I tried using a class with a:hover but it didn't work.

Thanks!

Hi-
Please view this page in both FF and IE:
http://www.highpeakssoftware.com/test/home.html
when hovering over the links on the left, a small arrow should appear next to each one. I am acheiving this by specifying each <a>'s background-image as the arrow with a left position of -16px (which places it outside the border, so it's invisible), then making it visible by changing it's left position to 0 when it is hovered over.
you can search for the following declaration in the css:
Code:

div#subnav ul li a:hover

or line 164 to see the code

however, in IE, it seems to be reloading the image on every hover (you can see the delayed response, as well as the hourglass very briefly on hover)

This is extremely annoying
anyone know of any ways around this bug?

For some reason I cannot explain, IE6 is re-sizing (shrinking) a div when you mouse-over the second-to-last link in it when the a:hover css sets a background-color!?

Mouse-over the second-to-last link here (about this site):
URL

Mousing over the last link restores it, and if you go from the last link to the second last link it does not shrink it.

It's not doing it in Firefox, and it doesn't do it if the bottom link is not the last bit of text on the page.

This page has the same problem, except if you go down to the second-last link in September 2004, it does not exhibit this behavior, because the last link in the September 2004 div is not the last line of text in it.

URL

Help appreciated. I'm going crazy!

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

Am trying to solve an annoying IE problem:

I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas?

The code is:

Code:

#item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }

Hi there,

I am trying to create a link which will have a bacground colour appear "around" it when on hover. I currently have a background image, but I tried adding a margin with a background color, but it is not working.

This is my code:

PHP Code:
 a.button{
background-image: url('img/button.png');
height: 22px;
width: 210px;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
text-decoration: underline;
padding: 3px 0 0 5px;
margin: 20px;
}

a.button:hover{
background-image: url('img/button.png');
height: 22px;
width: 210px;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
text-decoration: underline;
padding: 3px 0 0 5px;
margin: 20px;
background-color: #f6f6f6;
} 





Any ideas how I can acheive this?

Thanks

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?

I am working on modifying a drupal theme style sheet. I am having trouble over riding a table row hover background color.

The style sheet has the background color defined as
Code:

.block .menu a:hover { background-color:#ecf4f8; }

I am working in the footer block trying to over ride the background color as transparent. Everything I try is not working. The theme has a bunch of these classes defined as "Power" Hover Classes.

So, back to my footer block modification. Here are the inherited classes when I inspect the element, pinpointing the background-color for hover that is not being overridden for transparent.
Code:

 div.node .field .field-label-inline, div.node .field .field-label-inline-first, .node-links ul.links:hover, .comment-links ul.links:hover, .view .grouped-admin:hover, .multistep li.active-step, .form-text:focus, .form-textarea:focus, .form-select:focus, .prose a:hover, table tr:hover td, table td.active, .block table tr.active, .block .menu a:hover { background-color: #ECF4F8; }

Can anyone help me write a css over-ride in my footer block for this?

Thanks for taking the time to read my question.

I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working.

Any ideas?

Thanks,

Brad

Nevermind, fixed. Changed Pixels into Percentages.

Delete thread.

I have a table that contains a links in each cell. However, when I set a style to change the background with 'a:hover' it only changes the area around the link text. What I want is to change the background of the entire cell containing the link. TIA.

I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style.

Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>HOTWORKS</title>
  <link rel="stylesheet" href="stylz.css" type="text/css">
</head>

<body class="top" id="bdy" > 
<!-- Site navigation menu -->
<ul class="navbar" id="navlist">
	<li><a href="tools.html"><br>Tools</a>
	<li><a href="glass.html"><br>Glass <br> Artwork</a>
	<li><a href="pottery.html"><br>Ceramic<br> Artwork</a>
	<li><a href="about.html"><br>About</a>
</ul>

<!-- Main content -->
<h1>     </h1>

<p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
TOOLS - ART - MISCELLANEA 
<br>

<address>
</address>

</body>
</html>

Code:

#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}

Just to be complete, and in case there is something in here that you might need, here is the full css file:

Code:

  body.top {
    padding-left: 11em;
    font-family: Fantasy, "Times New Roman", Times, serif;
    font-size:15px;
    color: #000000;
    /*background-image: url(images/tab3.jpg) ; */
    background-position: 210px 10px; 
    background-repeat:no-repeat;
    background-color: #000000;
    margin-left:5cm;
	}

   body.top {  background-image: url(images/tab3.jpg) ; }
   
  ul.navbar {
   	color: #000000;
    list-style-type: none;
    position: absolute;
    display:block;
    float:left;
    left: 1em;
	}

  h1 {
    font-family: Helvetica, Geneva, Arial,
		SunSans-Regular, sans-serif 
	}
  ul.navbar li {
		text-align:center; 
   /* vertical-align:100px; */
   background: #000000;
   border-right: 1em solid black;
	}
  ul.navbar a {
		text-decoration: none ;
		 top:10%; 
    height:4em; 
  
	}
  a:link {
    color: white }
  a:visited {
    color: white }

#navlist {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    list-style:none;
}
#navlist a {
    display:block;
    width:144px;
    height:137px;
    color:#fff;
    text-decoration:none;
    background:url("images/drawer4.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
}
#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}
#navlist a:active {
	 background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FFC741;
}

Hi guys,

Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS?

I was kinda thinking something like:

a.linkname:hover, a.linkname:focus body { background-color:#00FF00; }

but thats just a guess and doesnt work lol.

Many Thanks,

Alvin.