I have a footer ...

#footer {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(images/footer.jpg);
    background-repeat: no-repeat;
    height: 250px;
    clear: both;
    position: relative;
    z-index: 10;
}

but the damn thing wont sit in the middle with IE. I even added a clear/position and a z-index...nothing! Every other browser is fine. Any clues? All the styles are inline so have a look at the source. Cheers

5 answers

4
points

Several things are standing out as I'm looking at your source code.

  1. You have no doctype declared (a little ironic given the site you've posted this question on, eh?). With no doctype declaration, some browsers are going to default to quirks mode - you don't want that. Using a proper doctype can help to ensure that your content is properly formatted across all browsers.
  2. I would change the way you're setting up the footer entirely. Something more like this:

Sometimes it's not the individual object that causes alignment issues but those surrounding/nearby that screw up alignment. It looks like it's the way that you're aligning #leftcol and #rightcol that's causing the distortion.

Here's how I've re-interperated your code (minus some of your look & feel) so that the footer works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Test Page</title>
<style type="text/css" media="screen">
    body {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #capsule {
        text-align: center;
        width: 100%;
    }
    #footer {
        background: #000;
        color: #fff;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        width: 600px;
    }
    #footerLeftCol {
        float: left;
        text-align: center;
        width: 250px;
    }
    #footerRightCol {
        float: right;
        text-align: center;
        width: 250px;
    }
</style>

Purchase from our NEW gift shop. We have selected toys & gifts at great prices. We deliver nationwide. (October 1st 2009)

Receive our newsletter and be the first to hear of specials and new products!


Email address:

Also, while I realize that everyone has a different style of coding, you could really optimize the code you've already posted by changing it to shorthand, like so:

footer {
background: url("images/footer.jpg") no-repeat;
clear: both;
height: 250px;
margin: 0 auto;
position: relative;
width: 800px;
z-index: 10;

}

Answered about 8 years ago by Scott Savage
love 38
3
points

i test ur code then at the end i add this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

everything goes fine then.. cant explain why.. haha.. hope its help..

Answered about 8 years ago by love
1
point

love was correct w/ the doctype solving the issue. The doctype tells the browser how to interpret CSS. If you do not have the correct doctype, then IE will not display the CSS correctly. This is an issue seen many times when updating older sites, because they use an older doctype or none at all.

Answered about 8 years ago by Efficient Pixel
Ibrahim 10
1
point

Like others said, use a doctype. Otherwise you'll have to use text-align: center in the parent DIV for centering in IE.

Answered about 8 years ago by Ibrahim
0
points

Thank you both for putting in the time to help me out. I feel like Ive had my knuckles rapped by Scott - but a good lesson. Cheers.

Answered about 8 years ago by Paul@Rezolution