Getting a site to work in IE

Question

I have a site I'm building in Dreamweaver CS5 and although my test site looks fine in Firefox/Safari, it looks awful in IE 8 on down. For starters, the inline <li> of images (3 rows of 4) does not even appear on the home page. See here- Test Site Home: http://www.lauradimeo.com/TEST/index2.html

And on my current home page my logo/SM link images appear with a gray box around them. Ugh! Current Site Home: http://www.lauradimeo.com

Anyone familiar with IE and has fix ideas?

thank you in advance.

Answer 1

Firstly, as others have said, run your code through the W3C validator. It will pick up a lot of issues that might be hard to spot otherwise.

I notice in your code that you're using HTML5 tags such as <section>. Please note that these are not supported by default in IE8 or earlier. You can hack IE to make them work, by using either HTML5Shiv or Modernizr (I strongly recommend Modernizr, by the way).

If you're planning to use HTML5 tags, you should also change your doctype -- you're currently specifying it as xhtml transitional, which is inconsistent with your decision to use HTML5 tags. Change the doctype to the HTML5 doctype (this won't affect the browser rendering, but will affect the results in the W3C validator).

Hope that helps.

Answer 2

For you border problem, IE has this horrible thing where images wrapped in links have a border set. You should be able to take care of this by specifying "border: 0" on the image.

As for the images not appearing, it seems you're using a "section" tag. In theory, this HTML5 tag works in IE8. However, theory has not always worked as Microsoft would like to think. I'd suggest one of two things:

1) Try simply !DOCTYPE html rather than DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

or 2) replace the section tag with a div.

One of these should resolve the issue.

As an aside, I notice you're a designer. I'm not sure if you're aiming for web design work, but if you are I'd highly recommend trying to do the majority of your HTML and CSS by hand. Doing so helped me learn how to do cross-browser CSS, HTML, and javascript much faster than depending on a WYSIWYG editor.

Hope this helps!

Answer 3

You need to be aware of conditional stylesheets to take care of certain ie circumstances. Good article here although you can google conditional stylesheets to get any number of similar articles