CSS Hover Effect In IE

Monie · #1 (**permalink**) Feb 4th, 2008, 08:00

I have a menu list:

<div id="menuTop">
<ul class="ul">
  <li class="sel" id="but1"><a href="#">Link</a></li>
  <li id="but2"><a href="#">Link</a></li>
  <li id="but3"><a href="#">Link</a></li>
  <li id="but4"><a href="#">Link</a></li>
  <li id="but4"><a href="#">Link</a></li>
  <li id="but4"><a href="#">Link</a></li>
  <li id="but4"><a href="#">Link</a></li>
</ul>
</div>

and the CSS:

Code: Select all

#menuTop ul li {
    float: right;
    display: block;
    margin-right: 2px;
    height: 30px;
    width: 110px; 
    background: url('../img/active.png');
    cursor: pointer;
    height: 30px;
}
#menuTop ul li:hover {
    background: url('../img/hover.png');
}
#menuTop ul li.sel {
    background: url('../img/down.jpg');
}

Works fine with FF. But in IE the hover effect dont seems to work! Any Tips? Thanks...

Jack Franklin · #2 (**permalink**) Feb 4th, 2008, 08:09

It wont work in IE6 because IE6 only allows :hover to be applied to an 'a'. DOes it work in IE7?

Monie · #3 (**permalink**) Feb 5th, 2008, 05:53

Yes...!!! I've fixed them!
I just don't know how but I've fixed it!
You are right Jack about ^

I'll explain my solution later, Thanks.

welshstew · #4 (**permalink**) Feb 8th, 2008, 08:48

Monie, can you post your solution?

Thanks

Monie · #5 (**permalink**) Feb 11th, 2008, 00:02

Sorry for the delay answer... too much holiday I guess

Quote:

Originally Posted by Monie

[code]
#menuTop ul li:hover {
background: url('../img/hover.png');
}

I just change this CSS ^ into something more specific like this:

Code: Select all

#menuTop ul.list li a:hover {
    background: url('../img/hoveractive.png') no-repeat;
    background-position: bottom;
    font: bold 12px verdana;
    color: #000;
}

and that solved both FF and IE7

Ed · #6 (**permalink**) Feb 11th, 2008, 07:54

I can't see how that worked! (Not that it did.)
Maybe it was something else. Unfortunately, I don't think Firefox cares about the specificness of your Cascading Style Sheets, nor mind Internet Explorer!

lol

Ed.

Monie · #7 (**permalink**) Feb 12th, 2008, 00:43

Well maybe you are right!

I am just playing so hard with them and maybe I forgot which CRUCIAL step solved the problem!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
how to create this effect	mybmodel	Graphics and 3D	11	Apr 29th, 2008 19:05
Hover effect for sub menus ?	Oak	Web Page Design	28	Feb 22nd, 2008 23:40
css hover effect error	jlbantang	Web Page Design	6	Oct 13th, 2007 12:30
What is this effect?	papalazarou78	Flash & Multimedia Forum	4	May 17th, 2007 19:17
Cool effect	Cobrastyle	Graphics and 3D	5	Aug 5th, 2006 10:09

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Hover Effect In IE