Grow your CSS skills. Land your dream job.

Container div off-center in certain browsers – Need Help!

  • # July 1, 2008 at 5:04 pm

    Greetings:
    You can see my problem at http://www.daisyblossoms.com/index3.html

    I have a Container div that holds my header, maincontent and footer div. The body has a background that repeats on Y, and the Header and Footer div each have a background image that matches up with the background image of the body.

    The problem is that in IE and Firefox the horizontal lines in all these background images match up. But in Safari and Opera, it is like the container div is pushed to the right 1px. I can even add a "left: 1px;" to the container div and it will line up in Safari and Opera, but ultimately break IE and Firefox.

    Can someone tell me what is occurring here? Again you can see it happen going to http://www.daisyblossoms.com/index3.html opening with these browsers.

    Thanks in advance for any help

    # July 2, 2008 at 7:07 am

    No one has any idea why one browser pushes to the right 1px and some don’t?

    box
    # July 2, 2008 at 12:32 pm

    try removing text-align:center from #container.

    # July 2, 2008 at 2:25 pm

    Unfortunately, that did do anything.

    box
    # July 2, 2008 at 5:17 pm

    Ok, another solution would be to use a transparent PNG for your header image – remove the pattern element from it and allow that space to be transparent – then you won’t be trying to line-up the background image.

    # July 2, 2008 at 7:01 pm

    Not sure if you figured out your problem, but design wise you might want to add

    a {
    outline: none;
    }

    that will get rid of the grey outline around your buttons when clicked

    # July 3, 2008 at 7:20 am

    THanks Box and Nick.

    Unfortunately, I have tried the transparency option, but PNG8 just doesn’t give the quality that I need in the image especially regarding shadows. I know that PNG24 would, but it isn’t supported enough on past browsers, I will have to wait a few more rounds of browser versions until we can safely feel the unsupported older browsers are out of the picture.

    Thanks Nick for pointing the outline out, didn’t realize that. Definitely will add that rule.

    I think what I will do is actually put a div at the top of the container that is X pixels high and has the same background in it. I will also extend the footer to the bottom of the website also. This will then take care of this problem and the problem of keeping everything center when resizing the window in some of the browsers which cause it to break.

    # July 3, 2008 at 3:27 pm
    Quote:
    I know that PNG24 would, but it isn’t supported enough on past browsers

    Get IE PNG Fix – problem solved ;)

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

You must be logged in to reply to this topic.

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