HTML & CSS: Rollover Troubles ONLY in Internet Explorer

HTML & CSS
1

I recently instituted the jQueryUI ‘Accordion’ style on a site I am building.
(e.g. here: jQuery UI - Accordion Demos & Documentation)

Everything works fine in Mozilla Firefox and Google Chrome; however, in Internet Explorer (8 & 9) the boxes were having issues, which, after some reading, are attributed to a ‘height’ issue.

I read here (and other places) that if the DOCTYPE was not defined in a certain manner, these accordion boxes will not work, so I changed by DOCTYPE from <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> to <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>. This actually solved the ‘Accordion Issue’!

HOWEVER, now certain hover states of buttons are not working.
After reading here (Quirks mode - Wikipedia, the free encyclopedia), the DOCTYPE I used to use to ran in ‘Quirks Mode’ and the new one runs in ‘Almost Standard Mode’ in Internet Explorer.

I believe that this new type of rendering, tied to the fact that there is no text in the actual button code, leads Internet Explorer to not function correctly in regard to these buttons.

Below is an example of the HTML and CSS of these buttons:

HTML
<div id=“software-top-half”> <!–I am not including all of the other info in this div for brevity–>
<div id=“action_btns”>
<div id=“free-trial”><a href=“#”></a></div>
<div id=“buy-now-btn”><a href=“#”></a></div>
</div>
</div>

CSS

#software-top-half #action_btns {
position: absolute;
top: 30px;
right: 20px;
}
#software-top-half #action_btns a {
width: 159px;
height: 45px;
display: inline-block;
margin-bottom: 5px;
}
#software-top-half #action_btns a:hover {
background-position: 0px -45px;
}

#free-trial a{
background: url(images/btn_free_trial.png) no-repeat 0 0;
}
#buy-now-btn a{
background: url(images/btn_buy_now.png) no-repeat 0 0;
}

I even tried to scrap this old style and use a style like this:
CSS Image Rollovers - Webvamp

This works on Internet Explorer from the site it is hosted, but when I copy the code exactly, I still have the same issue.

Even stranger:
-The Rollovers will work fine in ‘Compatibility Mode’ in Internet Explorer
-If you add ‘text’ to the button link (e.g. <div id=“free-trial”><a href=“#”>TEXT</a></div>) it will work, albeit you see the text and have to click directly on it. To me, this would indicate that for whatever reason, Internet Explorer is not recognizing these links.

I have spent entirely too long trying to debug this issue.

Any help or suggestions would be great.

Thank you.

2

Hi,

Welcome to Sitepoint :slight_smile:

I can’t see anything immediately obvious apart from the fact that you have more weight on some elements than others.

e.g.


[B]#software-top-half #action_btns[/B] a:hover {
background-position: 0px -45px;
}

#free-trial a{
background: url(images/btn_free_trial.png) no-repeat 0 0;
}

You are using two ids on some elements which means they have double the weight and will over-rule any single id elements. As ids are unique anyway there is no need to use two of them. You can’t make them more unique :slight_smile:

I would organise your code like this and make sure the hover states follow the original normal states definitions.

Here’s a working example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#action_btns {
    position: absolute;
    top: 30px;
    right: 20px;
}
#action_btns a {
    width: 159px;
    height: 45px;
    display: inline-block;
    margin-bottom: 5px;
}
#free-trial a {
    background:red url(images/btn_free_trial.png) no-repeat 0 0;
}
#buy-now-btn a {
    background:blue url(images/btn_buy_now.png) no-repeat 0 0;
}
#action_btns a:hover {
    background-position: 0px -45px;
    background-color:green;
}
</style>
</head>
<body>
<div id="action_btns">
    <div id="free-trial"><a href="#"></a></div>
    <div id="buy-now-btn"><a href="#"></a></div>
</div>
</div>
</body>
</html>

Make sure that you set the hover states after the normal states rules and that you use the same weight as the original rule.

If the above doesn’t solve the problem then we’d need a link to the problem or you should construct a small working demo as in the code I posted above.:slight_smile: