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.