Can you knowledgeable folks go to

www.coachsimmons.com

and let me know if there is anything, layout wise, wrong? This is a website I put together (don't ask me about the style...that is how he wanted it). He frequently is calling me telling me the "layout" is messed up...ie that you have to scroll all the way down to see the main information.

I have tested it in Firefox, and IE 7 on XP and Firefox, IE 7 and 8, and Safari on Vista.

I have asked him repeatedly to tell me the OS, browser and version, and other information to help me figure out what is wrong, but he is completely computer clueless and can't supply the information.

So anyhelp you can give would be greatly appreciated before I get charged with homicide.

You can use www.browsershots.org to see how your pages look in browsers you don't have. You didn't mention IE6, and that's usually where you end up with problems, even if things look fine in all other browsers.

You might also try the Xenocode Browser Sandbox:

http://www.xenocode.com/Browsers/

Ok, so the screenshots show that IE 6 maybe the problem. The problem is, how do I fix the website so that it doesn't displace the main information area down the page in a browser that isn't used that much anymore (or shouldn't be)?

Any help will be GREATLY appreciated...

I've attached some modified files you can try out. I had to rename them and make them text files in order to attach them.

Things to watch out for when styling pages so they don't break in IE6:

Avoid using negative top or bottom margins.

Avoid widths of 101% or greater.

Two side by side divs within another div cannot have a total width ( all widths + padding + margins) exactly equal to the width of the div containing them or one will drop below the other. The total width has to be less than the width of the containing div because of math errors in IE6.

IE6 is still pretty widely used by people who have old OS's which can't handle IE7 and 8, and they either don't know there are other options or they don't see a reason to bother with them.

That would fit my guy to a T. He still has 800x600 goin'.

Thanks for your help. I figured it was a case of old tech, I just wasn't sure what to do about it.

I appreciate your help, and if you see a news story about a novice HTML writer killing his client...you can say "I know that guy!"

Be sure to send us a link to the news story.

Alrighty...about to go postal.

Can you guys look at the page again? It looks fine in IE6 and IE7 but is completely messed up in IE8. I don't even know where to start without breaking the fixes made in IE6 and 7.

This is why I gave up on HTML as a career.

Thanks for any help.

Updated information:

It's messed up in Firefox on Vista and IE8 on Vista.

Ok for IE6 and 7 on XP.

This doesn't directly relate to the problems you are having, but a:active styling should come after a:visited styling:


I added some left padding to the #title element:


I uncommented #content's float:left styling and made it inline rather than block:


At the end of your html you start the validation link code with this:


Because of the style changes made above, I had to add some styling to that opening p tag. I just used inline styling but you might prefer using an ID or a class. This is what I ended up with: