Solved

IE9 hover image not working for DIV

Posted on 2011-09-02
5
1,443 Views
Last Modified: 2013-12-08
We have the following

1) an HTML file
2) a CSS file
3) two image files, one blueish, one orangeish. See attached code.

Works in every browser except IE9

What on EARTH is going ON?

 
CSS:

div.menubutton
{
   background-image          : url('WebMenuWithBorderBG.png');
   height                    : 30px;
   width                     : 150px;
}

div.menubutton:hover
{
   background-image          : url('WebMenuWithBorderHoverBG.png');
   height                    : 30px;
   width                     : 150px;
}

Open in new window

HTML:

<html>
<head>
  <link href="WTF.css" rel="stylesheet" type="text/css">
</head>
<body>

  <div id="M_Tasks" class="menubutton"></div>

</body>
</html>

Open in new window

0
Comment
Question by:WernerVonBraun
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
5 Comments
 
LVL 4

Author Comment

by:WernerVonBraun
ID: 36473332
Blue Image Blue Image
0
 
LVL 4

Author Comment

by:WernerVonBraun
ID: 36473334
Orange Image Orange Image
0
 
LVL 4

Author Comment

by:WernerVonBraun
ID: 36473338
0
 
LVL 4

Accepted Solution

by:
WernerVonBraun earned 0 total points
ID: 36473916
Never mind, peeps. I found that adding a <!DOCTYPE tag to the top of the page solved the problem. It doesn't even matter which one you add; you could add this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
or this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

It both works.

[shrug]
0
 
LVL 4

Author Closing Comment

by:WernerVonBraun
ID: 36473930
There you have it folks. Zee internets exploder iz ebil
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It's here again; Microsoft is launching a new version of Internet Explorer: Internet Explorer 9, with noticeable changes on its interface, functions and new tools. As they say on its promotional video: "It's time to play, on a more beautiful web", f…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question