CSS - Hover Not Working In Ie7

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); }

I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this?

Whew, it's been a while sin'ce i've been here. Thanks in advance!

~Brendan

Hi all,

I have this piece of coding (which I'm pretty new at) that allows a "display:none;" span to appear on a link:hover. It works great in Firefox, but I can't for the life of me find why it isn't working in IE.

I did this once with an Unordered List and it worked in IE, but now that I have used a table to structure the menu, it isn't working.

here is the site:
magicbeanz.blogsome.com

I've attached the style sheet and html to this post.
The relavent coding should be near the bottom. See #catmenu and the #books, #movies, #other, #hobbies, #games, divs.

I really hope someone can help. Thanks in advance!!

Oh, and I wouldn't mind some feedback on the coding and design. I'm back to working on my skills after a long break ><

Hey there

Does anyone know why my code he

a.linky:hover .spany{display:block}

...does not work in ie6 but works SWEET in FF?

CSS:
.linky{z-index:200; display:block; position:relative; cursorointer;
}
.spany{
display:none;
position:absolute;
left:0px; top:0px;
width:120px; height:120px;
background:#ffffff;
}
a.linky:hover .spany{display:block;
}

HTML:
<a class="linky" href="http://www.domain.co.nz/">
<span class="spany"></span>
<img src="http://www.domain.co.nz/thumb.jpg" width="120" height="120" border="0" style="vertical-align:bottom"/>
</a>

Thanks heaps guys for even looking!

Good day,

I am a newbie, both to CSS and to these forums.

I recently undertook a job to update a website for a charity and am dealing with the previous webmasters coding, both html and css. I am trying to modernize the site a bit, it is very 1997.

I am running into a bit of trouble with the hover class on one of my pages. When a link has been visited, it no longer changes color and highlights on hover. I read on multiple forums, this one included that it is because you must define hover last, after visited, active, etc. I did this, but still does not work. I am using Firefox 2.

Here is the code I am working with, sorry that is is a bit lengthy, I don't know what parts are important or not because when I just change the hover, link, visted part it doesn't work.

The page I am working with is at beverlyfoundation . org / library / index . html


/* THE BASICS */
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #eaf5ff;
margin: 0px;
padding: 0px;
background-color: #c2d8ec;
}

p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 14px;
margin-left: 0px;
}

img {
border: none;
}


a:link, a:visited { text-decoration: none; color: #EAF5FF; }
a:active, a:hover { text-decoration: underline; color: #E51322; }


/* HEADERS */
h1, h2, h3 {
font-family: Helvetica, Arial, Verdana, sans-serif;
margin: 0px 0px 14px;
}

h1 {
font-size: 220%;
text-align: right;
font-style: italic;
}
h2 { font-size: 140%; }

ul {
list-style-position: outside;
list-style-type: square;
}

/* TOP COLORED LINKS */
.navcells {
text-align: center;
vertical-align: middle;
padding: 2px;
font-weight: bold;
font-size: 11px;
}

#navlinks a:link, a:visited { text-decoration: none; color: #EAF5FF; }
#navlinks a:hover, a:active { text-decoration: underline; color: #EAF5FF; }



/* LAYOUT */
#header {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-image: url(../images/header_gradient01_bg.jpg);
background-repeat: repeat-x;
background-position: left top;
}


#content {
padding: 10px 20px 10px 10px;
background-color: #0060BE;
text-align: left;
vertical-align: top;
font-size: 12px;
}


#rightcolumn {
background-color: #0060BE;
padding: 10px;
width: 220px;
font-size: 11px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #EAF5FF;
border-right-color: #EAF5FF;
border-bottom-color: #EAF5FF;
border-left-color: #EAF5FF;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
}

#splashrightcolumn {
background-color: #0060BE;
padding: 10px;
width: 220px;
font-size: 11px;
}

#rightcolumn img {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}

#rightcolumn p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 0px;
}

#rightcolumn h1 {
font-size: 180%;
text-align: center;
font-style: italic;
}

#rightcolumn h2 {
margin-top: 21px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 0px;
text-align: center;
}

#rightcolumn a:link, a:visited { text-decoration: none; color: #EAF5FF; }
#rightcolumn a:hover, a:active { text-decoration: underline; color: #EAF5FF; }


#threecolumn {
padding: 10px;
width: 220px;
text-align: left;
vertical-align: top;
font-size: 12px;
}

#threecolumn a:link, a:visited { color: #EAF5FF; text-decoration: none; }
#threecolumn a:hover, a:active { color: #EAF5FF; text-decoration: underline; }


#footer {
color: #EAF5FF;
padding: 10px;
font-size: 11px;
text-align: left;
vertical-align: top;
line-height: 14px;
}

#footer a {
color: #EAF5FF;
text-decoration: none;
}



#address {
color: #EAF5FF;
padding: 10px;
font-size: 11px;
text-align: left;
vertical-align: top;
border-left-width: 1px;
border-top-color: #EAF5FF;
border-right-color: #EAF5FF;
border-bottom-color: #EAF5FF;
border-left-color: #EAF5FF;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
}

#address a {
color: #EAF5FF;
text-decoration: underline;
}


#address h2 {
margin: 0px;
}

.threecolumns {
color: #EAF5FF;
padding: 10px;
font-size: 11px;
text-align: left;
vertical-align: top;
}

.resourcestore p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
.gradientrow {
background-image: url(../images/footer_bg01.jpg);
}
.copyright {
font-size: 10px;
}
.resourcestore {
padding: 10px;
}

Hi
I have a horizontal menu made from a list. On hovering over the links its supposed to show a yellow bottom border 3px underneath. Works perfectly in everything but IE7. Any ideas please.

Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing.
I have two different rollover effects on my page but only one part is working.
The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file
Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help

here is my site: chrisziebarth dot com/test
My css file is located in /style.css

my layout is pretty simple...

Code:

<div class="container">
 	<div class="topbar">
 	<div class="list">
 		<div class="gametitle"></div>
 		<div class="percentage"></div>
 		<div class="system"></div>
 	</div>
 </div>

i have the following CSS applied to gametitle, percentage and system... for somereason, gametitle doesnt work...

Code:

.gametitle {
 float:left;
 width:250px;
 color:#FFF;
 }
 .gametitle a:link,
 .gametitle a:visted,
 .gametitle a:hover {color:#FFF;}
 .percentage {
 float:left;
 color:#FFF;
 }
 .percentage a:link,
 .percentage a:visited,
 .percentage a:hover {color:#FFF;}
 .system {
 float:right;
 color:#FFF;
 }
 .system a:link,
 .system a:visited,
 .system a:hover {color:#FFF;}

here is the page where all this code is going down...

Mini Catalog

please please somebody help me with this...
i have given my links some effects with this code:

Code:

<style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}

a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>

it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters.

Thanks!

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,

First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/

Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty.

I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla

Could you look at the code and tell me whats wrong?

http://serve5.net/xcage/nav/
http://serve5.net/xcage/nav/styles/xcage.css
http://serve5.net/xcage/nav/scripts/sfhover.js
Thanks.

i have 2 divs div1 and div2

there is an image in div2 and there is a link in div1, by default the image in div2 is hidden and i have used
#div2 img{
visibility: hidden; // also i tried display: none;
}

when i move the mouse over the link in div1 i want the image in div2 to appear

following is my code
#div1 a:hover #div2 img1{
visibility: hidden; or display: none;
}

the image in div2 is not appearing

without using javascript or jquery can this simple effect be done by using css code

can someone tell me the correct syntax to show the image

please advice.

thanks

Hi,

I have found a nice feature on this website;

click here

When you mouse over grey - orange images another div comes out.

What this is called?

Is there any example code that I can work on?

Thanks.

Thanks for taking the time to read my question.

This works in FF but not IE6. What do I need to change to make it work

I have borders around my images which are links and I want the border color to change on hover

HTML
Code:

<a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a>

CSS for container
Code:

img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}

CSS for hover
Code:

<a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a>
<a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a>
<a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a>
<a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a>

Thanks,

Brad

Hello:
I would like to have a big font size of title on my web site for search engine optimuzation purpose, I wrap the title with a H1, then I define H1 in css as
FONT-WEIGHT: bold;
FONT-SIZE: 34px;
COLOR: #000000;

in other place I also have
A:hover {COLOR: #6460AD; TEXT-DECORATION: underline;

the title I put in is a hyper link, so when the mouse hovers on the title, the title shown as underlined, I want it to be TEXT-DECORATION: none

I don't know the syntax in H1 definetion to disable the underline