Grow your CSS skills. Land your dream job.

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.
    Jeane

    The web page is <www.thishope.org/contactold.htm>

    # March 26, 2009 at 9:55 am

    I think your problem is coming from this line:

    Code:
    html {
    overflow:scroll;
    }

    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?
    <www.thishope.org/contactold.htm>

    Thanks
    Jeane

    # March 31, 2009 at 3:45 pm

    You coud try this:

    Code:
    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

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

    How about :

    Code:
    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

    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 Netrenderer.com. Could this be part of the problem? Are you looking at it in IE on a PC?

    # April 1, 2009 at 11:11 am

    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.

*May or may not contain any actual "CSS" or "Tricks".