IE not displaying correctly - need help

[Wee Bubba]

i have posted my web page here: http://weebubba.freehostingnow.com/

i am trying my best to do a pure CSS home page, but i am having some problems. i wonder if some kind guru would take the time to look for me and give me some feedback. am i doing stuff wrong?

as well as general feedback, i have got a couple of specific questions.

1. the page renders ok in firefox, but the fixed widths of the upper DIVs are not rendering correctly in IE7 (you will see what i mean). what am i doing wrong?

2. also, re the DIV containing the text "WANT MORE PROOF? LISTEN TO PETE’S TESTIMONIAL", i tried putting a border around the containing div here, but the border starts at the far LHS, rather than under the text section. this is strange to me as i would expect the border to be offset like the rest of the text. what am i doing wrong?

just trying to get it right and improve! many thanks for your expertise.

[kewlceo]

The good news is that Opera and Firefox render the same, but before working out the IE anomalies, you should really clean up the validation errors.

May I make a suggestion about DOCTYPE? You're using XHTML 1.0 transitional and would really be better off with HTML 4.01 Strict IMHO. This will give the browsers a level playing field. So, I'd fix the obvious errors, think about changing the DOCTYPE (and of course make the minor changes for 4.01 Strict), then repost.

[koyama]

All the problems have the same cause. In Firefox the upper divs are penetrating into the left navigation. This is why you see borders overlapping the navigation when you try to apply these to the upper divs. One doesn't notice this because the floated navigation correctly displaces the contents within these upper divs.

IE's rendering is wrong. Here the upper divs are incorrectly displaced as a whole by the left navigation (Much as if the divs were floated). This happens when the right div hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) e.g. when you give it an explicit width. This is also why the text extends further to the right in IE.

Solution? You already have an un-named div that holds all the right content. Basically, you just need to float it to the left while giving it an appropriate width. This would be like the traditional 2-column fixed-width-layout. You would avoid all problems above.

kewlceo posted while I was typing this. Although changing the doctype will not fix the issue I agree with the comment.

[Wee Bubba]

thanks for your helpful replies.

i will attempt to do what you have suggested, then i will post back again so that you can have another look (if you would be so kind!)

good karma to you. ty.

[Wee Bubba]

oooh the validation service isnt working for me. is it down? i get this message "Servlet has thrown exception:javax.servlet.ServletException: Timed out"

[Wee Bubba]

hello. the page is now here: http://www.therichpom.com/version2/index.html.

it is now validating but unforunately i am having the same problems as stated above. i tried doing what you said setting a float left and fixed width on the container div but it made things worse. could anybody offer me some assistance please?

[Wee Bubba]

also i have posted another page here: http://www.therichpom.com/version2/contactme.htm.

here the DIV height is not stretching for the content so the background is wrong. and iu cant seem to get padding on the lefthand/righthand side for the text.

im feeling a bit overhwelmed here. i think im just tired the baby has been crying constantly all day :(. any help appreciated.

[koyama]

i tried doing what you said setting a float left and fixed width on the container div but it made things worse.
Hmm... I now see that big red image in the middle? Is it supposed to be there? I think it might have been expanding your float in IE when you tried to do what I suggested.

Instead of floating as I suggested you may try to use left and right margins/paddings for your upper divs instead of assigning a width. As long as you don't assign a width/height (and a few other properties) IE will not throw the elements into its proprietary float model (the displacement) and rendering will be the same as in Firefox.

Example:
Instead of this:

#divContent1 {
width:600px;
text-align:center;
}

Try something like this:

#divContent1 {
padding-left: 200px;
padding-right: 200px;
text-align:center;
}