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>

buy-now-btn a{

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.

PaulOB
—
2011-03-22T09:59:13Z —
#2

Hi,

Welcome to Sitepoint

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

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

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