By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,081 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

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

P: n/a
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?

Feb 13 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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
Feb 13 '07 #2

P: n/a
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)
Feb 13 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.