Page looks good in most browsers except in IE7...why

Question

Hi, The following page looks good in Firefox, Safari, Chrome, IE6 and IE8... but it looks bad in IE7. I don't have IE7 but I need to fix this issue because someone seen it in IE7 and it looks bad. Does anyone has any idea why this page renders different in IE7?...and what is the solution to make it display correctly?

http://www.aetna.com/2009annualreport/mainBoard.html

Problem:

When you click on the "Board of Directors" or "Management Team" link and the listing table panel opens up, the far right third of the panel is getting cut off. Also some information appears to be missing in the cells.

Thanks, Attila

Answer 1

All browsers render web pages differently. There is no one solution that will always make everything look exactly the same across all browsers. The best option is to start with a browser such as firefox or safari when you are testing and then tweak your css for internet explorer as you go along. One common technique is to use a CSS reset to try to abstract differences between browsers.

If you don't have IE7 on your machine you can test in it using http://spoon.net/browsers to see what your page will look like or see this question for more suggestions.

Answer 2

Yes.. use a css-reset

But also... use the validator.

http://validator.w3.org/

I used the validator and found this:

Polo Ralph Lauren Corporation</p></li>

Notice the misplaced li ?

Also add this to #boardPanel

{ width: 990px; } 

Answer 3

Check out Adobe Browser Lab. Very cool and very efficient and the best part is it's free (not anymore thanks for the headsup). It not only has various browser options but also OS options.

HTH

Answer 4

This problem disappears when I remove overflow: hidden; from the .boardSlider class.

Look like another hasLayout bug.

Answer 5

its look very good to me in ie7. may i ask what is your issue with it in ie7?

by the way its a cool interface. i like it :)

Answer 6

Just a thought - why not use DIVS and floats - you should never really use tables for layout purposes (particularly as it's 2010). Especially dynamically changing layouts. Tables are cross-browser hell, particularly when expanding / contracting using JavaScript and, from a purist's point of view, you are not displaying tabular data, so why use a table?