CODEWITHSUNDEEP
javascriptinternet-explorer-7
Dean Elliott
Dean Elliott

Reputation: 1533

Simple IE7 fix for li:hover

I've searched all over for a simple solution to this but I can't find one that fits.

All I want to do is show a simple span element when someone hovers over the li parent but obviously IE7 has other plans.

Surely there's a simple javascript solution?

.locations ul.menu li span{background:url('images/phone-bg.png') no-repeat;width:89px;height:34px;display:none;position:absolute;margin:-36px 0 0 10px;padding:4px 3px 0 3px;color:#000;font-size:11px}

.locations ul.menu li:hover span{display:inherit}

Upvotes: 1

Views: 2677

Answers (4)

Alireza815
Alireza815

Reputation: 359

you can add following line at the top of your html file. it works for me in ie 9.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Upvotes: 0

Christian
Christian

Reputation: 3972

Check your browser isnt in Quirks or any other funny mode under Internet Explorer Development Tools.

You can add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to the top of your pages to ensure it always uses the latest version.

http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

Upvotes: 2

N3dst4
N3dst4

Reputation: 6435

If you want to make :hover work on non-link elements in IE7, make sure you're using a strict doctype, e.g.

<!DOCTYPE html>

is the HTML5 doctype.

IE7 only uses the old :hover behaviour when it's in quirks mode.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Use display: inline, not display: inherit.

Upvotes: 0

Related Questions