-1

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.

Alohci
  • 78,296
  • 16
  • 112
  • 156
Laura DiMeo
  • 33
  • 5
  • 5
    "it looks awful in IE" - Welcome to web design :) Seriously though, use this tool to validate your HTML: http://validator.w3.org/ Many rendering bugs are caused by invalid markup, of which you have plenty, and IE is not known for its forgiveness of these errors. – Wesley Murch Sep 20 '11 at 06:32
  • 1
    You also have 2 opening `` tags: Get rid of the second one that's after the `` tag. – Wesley Murch Sep 20 '11 at 06:41

3 Answers3

1

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!

Just a guy
  • 5,812
  • 4
  • 21
  • 25
  • 1
    Changing the doctype won't help, but using div rather than section will. Alternatively, the OP should include an [HTML5 shiv](http://code.google.com/p/html5shiv/) – Alohci Sep 20 '11 at 06:32
  • thanks for your response. The borders were a simple and effective fix for that issue, but the larger issues remain. Alohci was right, changing the doctype didn't help. I haven't tried changing the sections to a div yet...I'm a little green at this and am not quite sure how to approach that. Do I just change the word "section" in the code to "div"? – Laura DiMeo Sep 20 '11 at 21:26
0

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

user466764
  • 1,201
  • 7
  • 7
  • On that note, you'll probably eventually want to move your CSS to an external stylesheet in order to separate presentation from rules *about* presentation. This will also give you greater reusability. **[W3Schools](http://www.w3schools.com/css/css_howto.asp)** has a good, short guide on how to do this. – Anson Sep 20 '11 at 22:39
0

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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • thanks, very helpful. Another user suggested the section tag so I used that, but didn't know it was HTML5 and not supported by IE. Is it worth using over a
    , and hence the extra work to hack them to make them work?
     – Laura DiMeo Sep 20 '11 at 21:28
  • The `
    ` tag itself is just another element; it works exactly the same as `
    ` in the browser. Where it and other HTML5 tags are useful is in making your HTML code more "semantic"; ie readable to search engines, etc. The end user won't notice any difference one way other other. To be honest, if that's the only HTML5 code you're using, then you may as well just use a `
    `. Using HTML5 tags is good practice (google "semantic markup" to find out more about the whys and hows), but this single tag on its own probably isn't worth the hassle of using hacks to get it working in IE.
     – Spudley Sep 21 '11 at 18:43