CODEWITHSUNDEEP
htmlcssinternet-explorer-7
Matt Elhotiby
Matt Elhotiby

Reputation: 44086

IE7 is rendering my page wrong

I have this page which renders great in all the browsers that I have tested except for IE7

here is my relevant HTML

<div class="col col-left">
    .....
    .....
</div>

<div class="col col-right">
    .....
    .....
</div>

<div class="col col-middle">
    .....
    .....
</div>

and the CSS...

.col-left {
    display: inline;
    float: left;
    margin-left: 10px;
}
.col-left, .col-right {
    width: 186px;
}
.col-right {
    display: inline;
    float: right;
    margin-right: 10px;
}

.col-middle {
    display: inline;
    float: left;
    margin-left: 7px;
    width: 559px;
}

The problem that in IE7 the middle div .col-middle is falling to the bottom and not in the middle like it is in ie8 and firfox and chrome. ANy ideas why IE7 is displaying it off

Upvotes: 1

Views: 274

Answers (5)

Graham
Graham

Reputation: 15244

Try wrapping your div columns in another div wide enough to contain the columns, e.g. http://jsfiddle.net/F8VVW/1/.

<div class="wrapper">
    <div class="col col-left">
        .....
        .....
    </div>

    <div class="col col-right">
        .....
        .....
    </div>

    <div class="col col-middle">
        .....
        .....
    </div>
</div>

...

.col-left {
    display: inline;
    float: left;
    margin-left: 10px;
}
.col-left, .col-right {
    width: 186px;
}
.col-right {
    display: inline;
    float: right;
    margin-right: 10px;
}

.col-middle {
    display: inline;
    float: left;
    margin-left: 7px;
    width: 559px;
}

.wrapper { width: 1000px; }

Upvotes: 0

Dave
Dave

Reputation: 6189

Try structuring your html like this:

<div class="col col-left">
    .....
    .....
</div>

<div class="col col-middle">
    .....
    .....
</div>

<div class="col col-right">
    .....
    .....
</div>
<div class="clear"></div>

With css like this: 

.col-left {
    margin-left: 10px;
}

.col-left, .col-right {
    width: 186px;
}

.col-right {
    margin-right: 10px;
}

.col-middle {
    margin-left: 7px;
    width: 559px;
}

.col {
    float: left;
}

.clear {
    clear: both;
}

Floating has always been tricky in IE7. Just giving all of the columns you want to be on the same row float: left allows you to keep them in the same order in your markup. Also, adding the empty div with the clear class stops the float rule from propagating to other, unintended elements (which is likely the cause of the problem you're seeing).

So, as a general rule, always add an empty div with a clear:both as the LAST sibling of any floated elements. Also, try sticking to floating in one direction. Mixing float: lefts/rights as siblings is likely to cause weird/inconsistent rendering across browsers.

Upvotes: 2

Jonah Katz
Jonah Katz

Reputation: 5298

Make sure you have the DOCTYPE at the top of your page!!

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

Upvotes: 0

daveyfaherty
daveyfaherty

Reputation: 4613

When you declare a float, you cancel your display: inline Floated elemenets have display: block. That might be part of it.

As all the elements have fixed width, you might try having them in order, left, middle , right, and giving them all float: left

Upvotes: 0

Andrea
Andrea

Reputation: 1057

you can check for valid HTML at the W3C site

Upvotes: 2

Related Questions