The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Weird display in IE 6

Below is a screenshot of a website that I am developing. As you can see it looks a bit funny in IE 6 - I have it looking perfect in IE 7 and firefox, but yet to test opera. How can I get this to look the same in IE6 as firefox or IE 7?

Without that, I suspect that it may be IE6 making a mess of the box model once again - occassionally IE6 applies double the margin you asked for. In order to rectify this, add 'display: inline;' to the offending div (in this case, either the 'Navigation' or 'Admin log-in' div.

You have floats of 150px width but you have items inside those floats sized at 325px width. Some of those widths also have padding added which makes then even bigger.

IE will always try to accommodate what you say and if you overstate the width it will increase it to compensate resulting in the fact the element increases in size and no longer fits in the allocated space.

I would simplify that section and add the top and borders onto a wrapper so that they always finish level. Then I would use headers for the headings and float two boxes of 325px width inside that wrapper.

The result is something like this although the code could be tidied up further.