image as a background doesn't fill all the page

Question

I changed my html code with for the multi image background to work with Internet Explorer.

Since this change, I have a white border all around the page.

Did someone know why it doesn't fill all the page like my previous version, and how I can fix it.

Old version : (works with all browsers except IE): http://brio.speedrunwiki.com/LA-MAYOCHE/LA%20MAYOCHE%20page%20accueil%20V001.htm

New version (Works with all browsers but doesn't fill all the page): http://brio.speedrunwiki.com/LA-MAYOCHE/LA%20MAYOCHE%20page%20accueil%20V002.htm

Thanks a lot!

Answer 1

In your CSS do the following:

body { margin:0; }

Right now, you've got a browser default margin set (you didn't set it, so the browser did).

Check out Eric Meyer's CSS Reset. Utilizing a reset stylesheet will help prevent stuff like this from happening, and will also give you better control browser to browser.

http://meyerweb.com/eric/tools/css/reset/

Answer 2

@DA01 is correct about your likelihood of getting better answers on SO. That said, CSS is as much a design tool as Photoshop is when you consider the end product.

Dawson has you on the right track with the body margin and CSS Reset sheet. The site renders the same for me on Chrome and IE9 so it may be a <IE8 issue. However it also has several errors if you plug it into W3C Validator. You may want to consider HTML 4 Transitional or, even better, HTML 5. 4 Transitional and 5 Draft are much more forgiving and will also render more consistently across browsers. Once you knock out your HTML errors, CSS design issues should be much easier to troubleshoot.

Answer 3

In your CSS make sure that you have:

body { margin: 0px; padding: 0px; line-height: 12px; }

Also check your line height on any elements (usually h1, h2 type tags) that are close to the edge to see if they are throwing things off.

Answer 4

here is your answer do the following in your div id="one" css :

just apply given margin element on your #one and check this on every browser.

#one {
        background: url("http://i206.photobucket.com/albums/bb52/oli_briss/Ligne_droite-2.png") repeat-y scroll right top transparent;
        margin: -8px;
        padding: 0;