Problem with my web site CSS in IE :-(

[smcardle]

Hi All,

I developed a web page for a client that uses pure CSS popups for images and "more info" sections. The front page looks correct and renders properly in IE6, OPERA, FIREFOX and SAFARI.

When you hover the mouse over an image or on a column heading containing more information, CSS popup sections that are initially hidden should be displayed.

I did all the development on a Mac and the proplem occures with my hidden sections that should be absolute placed CSS popup sections. In FireFox, Opera and Safari the popups work fine (small differences in list item presentation but thats fine with me) but with IE6 no go.....Absolutly NO popups at all. I cannot test with IE6/7 on my Mac as the last supported version was IE5 so I only got to test this feature after deployment to the WEB.

If anybody could take a look and tell me what the problem is I would appreciate it because it is now driving me NUTS.

The URL for the site is www.barlaunion.com if anybody is interested....

Best regards

Steve

[drhowarddrfine]

At least part of the problem is you are using the xml declaration, the first line of your page, but you aren't using xml or xhtml. Also, there is never any reason to use a transitional doctype with new pages. That is only for pages that use older, deprecated markup and why would anyone do that for a new page?

In addition, IE chokes on the xml declaration and goes into quirks mode. IE doesn't do Xhtml anyway.

So, remove the first line and change your doctype to html strict. See the article about doctypes under Articles at the top of this page.

Then validate your html and css for those lists of errors, and there are some.

[smcardle]

At least part of the problem is you are using the xml declaration, the first line of your page, but you aren't using xml or xhtml. Also, there is never any reason to use a transitional doctype with new pages. That is only for pages that use older, deprecated markup and why would anyone do that for a new page?

In addition, IE chokes on the xml declaration and goes into quirks mode. IE doesn't do Xhtml anyway.

So, remove the first line and change your doctype to html strict. See the article about doctypes under Articles at the top of this page.

Then validate your html and css for those lists of errors, and there are some.

Hi,

Thanks for the pointers. The reason that these are there is due to me trying several doc types for this to begin with. I tried the strict and the validation choked because I use DIV's in an <a>. As this is an inline element and a <div> is a block element it wont validate. So...I tried to use a <span> instead of a <div>, this then choked on validation because I use <p> elements for the text blocks.

SO...personaly I think there is a problem with the spec here where I want to use an anchor <a> (inline - with all the hover capability etc.) for hidden div's (block elements) to achive my CSS popup's.

Do you have another suggestion for using hidden block elements that work on mouse hover but are not inline elements like the <a> ?

I realy do not want to use ANY java script on this page.

Regards

Steve