Internet Explorer 7 Bugs - incorrect display OR dead links

Question

Hi,

I recently launched a website I have been developing over the past year - http://Live.heritageartpapers.com/. My dad, who owns the company, had a phone call today saying it doesnt display properly in IE7.

Bug #1: The header and footer are both in a div, whereas the content is in a table between the two divs. Reportedly the content (table) sometimes (not always, according to IETester) displays below the footer, but the footer still displays where it is supposed to (ie there is a massive gap where the content should fit).

Bug #2: When the content does display in the correct place, all the links on the page are dead - click on them and nothing happens. As you can see if you view it in Firefox (the version I am using is 3.6), the links in the left hand menu turn orange on mouseover. However they do not even do this in IE7. Note that they do turn orange and do work if the content is displayed below the footer.

I cant see why its happening - according to IETester, the IE7 interpreted source code has all the tags capitalised and many quotes removed (for example for the id attribute on most, if not all, tags) but I doubt this could cause the above bugs, could it?

My question is whether anyone has ever seen any of these problems before, and/or has a solution to any of these problems??

I currently do not have the application open, but will post any relevant code in a few minutes. Alternatively just use view source.

Many thanks in advance.

Regards,

Richard Clarke

Answer 1

Well having spent quite a while on this tonight, I decided to take a look in the IE specific stylesheet, on the basis that the problem was specific to IE.

I remember a while back, when trying to get mouse over image enlargements working, I found that the image enlargements were appearing only down to the next row (on the catalogue page - have a look on the site and you will be able to see what I mean). At the time I had a div layout, as I worked for a council a year ago and they taught me to use divs instead of tables wherever possible, and to avoid tables for layout on the basis that some customers may have browsers which dont support tables.. I found that the fix (to make the image enlargements appear fully over all the rows) was to set the z-index of each row to -1. Since this was only an IE issue, I put it in the IE stylesheet.

So anyway I removed the z-index: -1 from the stylesheet and BAM all the links in the entire page started working!!

As far as I know this only happens in IE7 but not IE8. I am not sure about any other IEs or Firefox.

Hope this helps anyone who has the same problem.

Regards,

Richard