page validates and renders in FF, but in IE 6 and 7 it has extra padding. Why?

[Jake Barnes]

Please check out this page:

http://www.bluewallllc.com/Laura/cms...hp?pageId=2217

It validates, and it is rendering about right in FireFox. However, in
IE it has a bunch of extra padding that is throwing off the whole
page. In particular, it seems there is more padding on the left of the
main container. Even when we go through and set most of the padding
to 0, so that in FireFox there is almost no padding, in IE there is
still quite a bit. Where is it coming from?

To be specific, the left column, starting with this block of links:

# CLIENTS
# ABOUT US
# PRODUCTS
# SERVICES
# BLOG
# BENEFITS
# CONTACT US
# HOME

Seems pushed to the right in IE. Even when we take out padding, so
that this block of links is touching the left edge of the container
they are in, in IE 6 and 7 it is as if there is still extra padding on
the left.

What gives?

[John Hosking]

Jake Barnes wrote:

Please check out this page:

http://www.bluewallllc.com/Laura/cms...hp?pageId=2217

Nice looking page.

>
It validates,

But the CSS doesn't.

and it is rendering about right in FireFox. However, in
IE it has a bunch of extra padding [...] Where is it coming from?

To be specific, the left column, starting with this block of links:

# CLIENTS [...]

That'd be your ul.nav. BTW, on my IE6 your midcolumn is pushed all the
way down (and to the left) below your content.

Seems pushed to the right in IE. Even when we take out padding, so
that this block of links is touching the left edge of the container
they are in, in IE 6 and 7 it is as if there is still extra padding on
the left.

What gives?

Don't know. But your lightbox.css is MIA (404).

How about a simplified test case? What happens when you remove the
midcolumn content from your XHTML? Is the problem still there? Then
leave it out and remove the footer. Still a problem? Weed out the CSS
for us. I will bet most of it doesn't apply to the problem (or even
apply to the page) so you can throw it all out for a minimal test case.
And get rid of the JavaScript first of all.

I see some margin-left:auto where there's no width defined, but I don't
know for sure if IE does something different from FF there. What happens
when you remove the left border-color on .nav? Or the padding-left from
..nav li a?

How does IE react when you simply change the doctype to HTML 4.01 strict?

BTW: the usual mutterings apply regarding sizing in px. IE6 users won't
be able to resize text that is font-size: 11px. And what does 12px mean
to a printer? Does that relate to its resolution? Or what?

And you ought to set a background color, in addition to the background
image. When images are turned off, I can't read the site at all.

That's all I can offer now. Good luck.

--
John

[Jim Moe]

Jake Barnes wrote:

Please check out this page:

http://www.bluewallllc.com/Laura/cms...hp?pageId=2217

It validates, and it is rendering about right in FireFox. However, in
IE it has a bunch of extra padding that is throwing off the whole
page. In particular, it seems there is more padding on the left of the
main container. Even when we go through and set most of the padding
to 0, so that in FireFox there is almost no padding, in IE there is
still quite a bit. Where is it coming from?

As John noted, fix the CSS errors.
You use a lot of precise positioning with margins, something IE does not
appreciate. Make sure your arithmetic is correct; allow less than 100%
space usage by the blocks of elements so the IE can make its errors and
still render correctly.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)