All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

background alignment issue

  • # March 26, 2009 at 9:15 am

    I have made a page with a background florish that looks good in FF, Safari and Opera. It is supposed to be centered just like in those browsers. There are two backgrounds and they are both centered but in IE, they are not.

    Is this part of the box model problem I keep hearing and reading about and yet not understanding. If so how do I fix it?

    Thanks in advance.

    The web page is <>

    # March 26, 2009 at 9:55 am

    This reply has been reported for inappropriate content.

    I think your problem is coming from this line:

    html {

    Try changing it to overflow: auto and see if that fixes the IE problem. If so just put that in an IE specific stylesheet and the change it back to overflow-y: scroll (y will get rid of the horizontal scrollbar).

    # March 31, 2009 at 3:20 pm

    Tried switching to auto. It is different but still not centered. Any other ideas?


    # March 31, 2009 at 3:45 pm

    This reply has been reported for inappropriate content.

    You coud try this:

    html {
    overflow-x: hidden;
    overflow-y: scroll;
    # March 31, 2009 at 3:51 pm

    Tried that also. No change. Just make no sense to me why they aren’t both centered like in FF.

    # March 31, 2009 at 4:02 pm

    This reply has been reported for inappropriate content.

    Short answer: because IE is a piece of crap, always has been always will. :x

    How about :

    body {
    text-align: center;
    #florish-bg-wrap {
    text-align: left;
    # March 31, 2009 at 4:15 pm

    Thanks tried that also with different combinations of the first ideas like auto instead of scroll. Does not help. Ug.

    # April 1, 2009 at 6:01 am

    This reply has been reported for inappropriate content.

    Sorry, I was too tired and went to bed. :)

    So let’s try a new tack. On the #page-wrap div, instead of margin: 0 auto; how about margin: 0 0 0 97px; The difference between the width of #florish-bg-wrap and #page-wrap is 194px so half of that as a margin must center it. I hope :|

    # April 1, 2009 at 10:26 am

    Don’t really see a change.

    Just for reference I am looking at this page on a mac with no IE. The testing I am doing is in Could this be part of the problem? Are you looking at it in IE on a PC?

    # April 1, 2009 at 11:11 am

    This reply has been reported for inappropriate content.

    No I’m on a Mac too. Hence all the guesswork :)

    I have an old Sony laptop running XP (and Ubuntu) and when you first posted last week I looked at the page on that and noticed a horizontal scrollbar, which is why I was concentrating on the html scroll rule.

    What happens if you set the body width to 99% ?

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed