Safari and Chrome Overflow: Inexplicable

I am restyling my portfolio site and the body has auto margins

body {margin:auto}

This centers it nicely in Firefox, and when you open it in Firefox, it is centered and the browser doesn’t give the option of scrolling down below the bottom of my background image, or scrolling to the right.

When opening it in Safari or Chrome, it appears centered, but those browsers give you scroll bars which let you scroll down or off to the right beyond the background image and it looks bad because there is no content there.

What am I doing wrong? Thanks.

Except in buggy IE6 and 7 where the auto does not reset the default vertical margins to zero.:slight_smile:

e.g.


p{margin:auto;}


<p>test</p>
<p>test</p>

Then try:


p{margin:0 auto;}

Only the second version collapses the bottom margin. Nothing to do with the original problem but just worth noting :slight_smile:

As I started copying your source code to see if I could find the problem(s) while playing with code, I noticed two things in my text editor immediately (so you might as well fix them even if they are not causing the issue):

Your doctype is weird. Copy-pasta from the W3C doctypes page so you don’t get little errors. Your doctype is

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd\\”>
with that \ on the end.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd”>
is what you want.

Ideally you also don’t want whitespace before the doctype either… IE6 can use even that as an excuse to Quirk-- the doctype should be character 1, line 1 on your page for best safety.

Second, my browsers and my text editor show all your code commented out.
That’s not right. It is getting read… so…


	<!-- <script type="text/javascript" src="http://use.typekit.com/fej4ite.js"></script>
	<script type="text/javascript">try{Typekit.load();}catch(e){}</script> --!>


You don’t close a comment with a bang. It’s just –> so, while the text in your body is obviously getting through to the browser, there’s also errors that they are likely skipping (you know browsers and errors… they just try to pretend they’re not there and keep going…).

Even if you’ve validated you page earlier, when you run into new bugs, first thing you do is go back and validate to see what got broke this time. Yeah, that’s hit me too, I get a page valid, make some changes, get a weird bug… and dont recheck my code lawlz.

See if fixing those things help Saffy-Chrome at all. They may not, but you want them fixed anyway.

Thanks for the welcome!

That quote’s nice and all… but margin: auto does not work on my site. Only margin: 0 auto

True story.

Hi Oaken.Monk, Welcome to SitePoint!

margin:0 auto;
is the same as margin:auto;

Since auto top and bottom margins do not apply then the shorthand value of “auto” sets the top and bottom margins to “0”.

http://www.w3.org/TR/CSS2/visudet.html#normal-block

If ‘margin-top’, or [URL=“http://www.w3.org/TR/CSS2/box.html#propdef-margin-bottom”]‘margin-bottom’ are ‘auto’, their used value is 0. If [URL=“http://www.w3.org/TR/CSS2/visudet.html#propdef-height”]‘height’ is ‘auto’, the height depends on whether the element has any block-level children and whether it has padding or borders:

Try body {margin: 0 auto}

Yes I can see where that would be a problem when dealing with any elements (such as the body) that have default v-margins. I’m sure that IE was the browser that gave Oaken.Monk problems then.

Thanks for explaining when margin:0 auto; is needed. :slight_smile:

Hi,

You’ll have to show us some working code or a link as it is likely something else causing the scrollbars.:wink:

It’s generally not a great idea to center the body element itself… mostly because of problems IE can create with that. However, it’s not illegal.

Oh sorry and although I left out the semi colon in my previous message, it is correctly written in my style sheet.

Hi

My portfolio page is on www.iaminteraction.com

In firefox the browser window conforms to the background of the site. In safari and chrome there is the option to scroll down and to the right, which reveals the area beyond my background. This looks bad. How do I fix this? I haven’t had a chance to test in IE yet.

No problem, I always forget about that bug - there’s just too many things to remember sometime. :slight_smile:

There is a problem with the OPs site in Safari and seems to be caused by the footer not starting on a new line but aligning alongside a floated element and pushing the page wide. The element can’t be cleared due to the way the page has been constructed and really the whole page needs to be re-done in a more logical fashion to avoid the bug. (I’ll try and have a look later but I have some stuff to finish first.)