In Internet Explorer 7 part of the content doesn't display at all

HTML & CSS
21

Ok, I have added display: inline to .contentLeft, and have changed the percentages to pixels, and still nothing has changed in Internet Explorer 6. So can someone please tell me some other way of solving this? Thank you for everyones help so far. These problems make me wish my clients’ website users don’t use Internet Explorer at all.

22

Sorry about this, I am just not going to support IE6 anymore.

23

Edit - thought I had it fixed, but seems not.

24

Thanks Victorinox.

25

Let’s try again…

This has been tested for consistency in IE6, IE7, Firefox and Safari.

You’ll need to replace the separate .contentLeft, .contentRight, .row and .contentLeft ul with the relevant rules below.

New rules have been added to target .headings h2 and the contentLeft p (to align the Read more link).

.headings h2 {
    line-height: 40px;
    vertical-align: top;
    float: none;
    width: auto;
}

.contentLeft, .contentMiddle, .contentRight {
       float: left;
       margin: 0 0 0 15px;
       width: 260px;    
}

.contentLeft ul {
       margin: 0 0 1em 25px;
}

.contentLeft p {
       margin-left: 25px;
}

.row {
margin-top: 1em;
}
26

You must be precise and this is basic mathematics.:slight_smile:

Inside .contentRight which is 270px wide you have a nested div called .row which you have made 283px wide.! How can they fit?

The answer is that it can’t possibly fit and in an attempt to help you out IE6 stretches the parent to accommodate the larger inner element which has a knock on effect in that the float no longer fits in the allotted space. Other browers hide the overflow instead so they don’t drop but the error is yours and not the browsers because you have told it to do something that doesn’t add up and therefore has to error handle.

Just change the width of .row to match the parent and the layout will work in IE6 with no problem.


.row {
	[B]width: 270px;[/B]
	margin-top: 3em;
}

You will still get the double margin big on the first float in IE6 unless you add display:inline :slight_smile: (although with your reduced width it should still fit bit won’t be identical.)