CODEWITHSUNDEEP
htmlcssinternet-explorer
ChrisJ
ChrisJ

Reputation: 51

Simple floated-DIV layout in IE8 not working

We've got a really annoying layout problem on our site only in IE (7 & 8 tested), Firefox and Chrome works fine. The problem is on this page:

http://www.foe.co.uk/community/campaigns/climate/rio_resources_33589.html

The problem code is that the report images should appear to the left of the text to the right. We have a simple that contains the item and the a inner floated to the left and another floated to the left too. Both have widths that are less than add up to less than the outer DIV. Here's an example bit of code that isn't working:

<div class="resourceitem">
    <div class="resourceleft">
        Test LEFT
    </div>
    <div class="resourceright">
        Test RIGHT
    </div>
</div>

The relevant CSS is simply:

.resourceitem {
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
}

div.resourceleft {
    float: left;
    margin-left: 20px;
    width: 156px;
}

div.resourceright {
    float: left;
    padding: 0;
    width: 268px;
}

Any help is much appreciated, it's driving me bonkers!

Cheers, Chris.

UPDATE - Fixed it.

Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).

Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.

Cheers!

Upvotes: 1

Views: 690

Answers (2)

ChrisJ
ChrisJ

Reputation: 51

UPDATE - Fixed it.

Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).

Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.

Cheers!

Upvotes: 0

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

Remove </a> from the following code It is an extra code (might be a typo) and causing trouble in IE:

<div class="resourceleft">
    <img border="0" alt="Rio+20: Is this it?" src="http://www.foe.co.uk/imgs/Rio_-_is_this_it.png" />
    </a>
</div>

Note: every <div class="resourceleft"> has an extra </a>

Upvotes: 1

Related Questions