ansaurus

Question

IE6 Float Drop

Answer 1

A:

I added a style="float: left; clear: none;" to the content div, and that fixed it so that the middle div and the right div were on the same plane but both were pushed down the hight of the left div.

Why are you wrapping the content div and right div into a wrapper div but leaving the left div out? That's probably related.

Anthony 2009-08-16 14:33:36

Answer 2

A:

First of all you need a proper doctype so that the page is rendered in standards compliance mode. If it's rendered in quirks mode, IE uses a different box model which changes the size of most of your elemenents.

Is it the main or the content div that drops down? If it's the main div you could make it float left beside the left div.

You might have to adjust the size of the elements. Sometimes IE6 needs three extra pixels of space to fit elements in another element.

Guffa 2009-08-16 14:42:27

Answer 3

A:

I fixed the problem!

I used a conditional statement and changed the padding from 20 to 10:

<!--[if lte IE 6]>
<style type="text/css">
    #middle{ width: 980px; padding:10px; overflow:hidden; clear:both; }
</style>

2009-08-16 14:57:11

Answer 4

+1 A:

It's easy to see from the first look possible reasons (I even haven't dived into problem):

1) Always use DOCTYPE! Without it you'll never make crossbrowser normal-difficulty code.

2) For making such things try to use float properties more often!

3) I'm really surprised to see block with width: 980px; and padding: 20px; that should be placed in block with: width: 980px; Padding, included in width - is the past!!

4) #right has property: float: left; margin-left: 10px; - and IE6 makes margin-left = 20px in this case - it's very famous bug. Add to this block this property: display: inline; and it's gonna be ok (so, reason isn't in paddings, but in margins)

And don't forget to read standarts and recommendations!

2009-08-17 10:21:19

ansaurus

tags:

views:

answers:

IE6 Float Drop

related questions