I’m new to CSS and have been using HTML for years. I followed the screencast tutorials on converting Photoshop mockups, and have a functioning layout in Firefox and Safari. Just checked in IE and there are issues that I’m not sure how to address: navigation is screwy, pagewrap width dramatically smaller than in other browsers. Footer background is also on the fritz.
Layout can be seen here: http://www.allicoate.com/Website/
Any suggestions would be so helpful; I’m sure it’s riddled with mistakes. Help!
You are missing a document type declaration, so before you go any further – declare your doctype! Judging by your code, you’re using xhtml 1.0 – so add
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
to the very top of your html page. This will ensure that IE6 will display in standards mode, so any display issues you have will now be addressable. Once you have done this, check your code against the html validation checker at the w3c and fix any issues that it raises. Then, if you are still having problems, post bck and we can look again.
Thanks for the suggestion!
Validated the HTML and css stylesheet- stripped down version is here: http://www.allicoate.com/Website/indexclean.html
The biggest issue is still the navigation links in IE. Other browsers display them in a row on the yellow paper, IE shows all but the first (Home) at the very top of the page. Not sure how to go about fixing that without ruining the alignment in the other browsers!
You need to restructure your page layout. Your header text should be an h1 tag, the ul li can then be set to display:inline; and won’t need so much padding. You will have to break up your background image into constituent elements and apply them to their relevant tags. Do a quick google on semantic web design and you should get the gist of what I’m saying. You have a nice design there, so all you need now is to structure your HTML page appropriately for the content.