CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxinternet-explorer-7
kingrichard2005
kingrichard2005

Reputation: 7269

IE8 vs IE7 html formatting

I've been struggling with getting a div container element to center along with it's child content and is starting to get frustrating. The inline styling I have for div is as follows:

    <body id="body1" style="vertical-align: middle; text-align: center">
        <div id="container" style="position: relative; width: 910px; margin: 0px auto;">
             <!---Child Content--->      
    .
    .
.
</div>
    </body>

When these settings are viewed in IE7, the div container is off-set to the right as the below pic shows:

enter image description here

In order to center it I have to add define the right property in its position style in order to push it toward the center:

    <body id="body1" style="vertical-align: middle; text-align: center">
        <div id="container" style="position: relative; right: 425px; width: 910px; margin: 0px auto;">
<!---Child Content--->      
        .
        .
    .
        </div>
    </body>

This fixes the problem for IE7:

enter image description here

Predictably however, the formatting is off in IE8, Firefox, Chrome, etc. when applying the second styling format above:

Firefox (same behavior in Chrome and IE8)

enter image description here

Hope it's a simple fix, I don't understand why IE7 treats the styling differently. Any help is appreciated.

UPDATE:

@Dan Hardy, adrift - If I could accept both your answers I would, thanks guys it worked. That is very strange behavior, I figured by now I wouldn't have to cater to specific browsers.

Upvotes: 2

Views: 920

Answers (3)

Adrian
Adrian

Reputation: 2923

Was able to get the html in the original question to work fine in IE7 when you remove the position: relative from the div. There is also the chance that there are interactions in the content html/css that is causing the underlying issue so if this doesn't fix it could you post the content html/css that you have that demonstrates the issue in the screenshots that would be helpful.

Upvotes: 0

Jeff Ogata
Jeff Ogata

Reputation: 57783

If you put !ie7 after the width attribute, it will be ignored by browsers other than IE 7:

right: 425px !ie7;

For a better explanation of this, see this SO question and the accepted answer:

Bang IE7 - What does it mean?

I leave it to you to decide whether this is too 'hacky', but it is used in the Stack Overflow css.

Upvotes: 1

Dan Hanly
Dan Hanly

Reputation: 7839

This paves the way for a fix, but isn't strictly a fix:

You can add conditional browser specific statements into your HTML code:

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Basically what you can do is add the comment's below to your page:

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="conditional_ie_7_stylesheet.css" />
<![endif]-->

Between those tags you could add the necessary styling to offset the issues on specific browsers.

As I've said, this doesn't fix your CSS problem but it provides an alternative.

Upvotes: 2

Related Questions