I am working on this design: http://www.decoratemyweb.com/scrapbo...oma/index.html
The layout works in IE7 and Firefox, but it is not working in IE6. The right section acts like it is too big, and falls below the left floated navigation. Any ideas on a fix for this?

(I know it doesn't look that pretty right now. I am still working on it, but I have to get past this IE problem first!)

Stephanie I don't have IE6 on the computer I'm on at the moment, but I can probably guess. IE6 doesn't do widths well and it adds a double margin on things that are floated.

I think the easiest way to make things work is to use conditional comments to set IE6 specific styles. I'm guessing you'll need to reduce the width a little to account for a border or possibly change the margins on the floated element.

using conditional comments will allow you to have specific css rules for IE6 alone and let other browsers see the css you're currently using.

If I can get to a computer with IE6 I'll take a look and see if I can be more specific.

IE6 doesn't do widths well and it adds a double margin on things that are floated.

Well, not entirely -- IE will double the margin of a floated element if you ALSO give that element a margin in the same direction, ie: float: left with a left margin value. BUT, you' didn't do that so it's not the problem.

Ok, this is what I found:
Your #left block is defined as 190px wide BUT, your LI inside that container is 189px wide PLUS 10px padding = 199.

#right is 720px wide plus 2px of border = 722px total width

722 + 190 + 10 = 922px wide - 2px too wide for IE to stand.

I would reduce the padding on the <li> in your nav so that the list stays inside the 190px of the #left div. Thanks IE's broken box model for this one !

By the way.. nice design I do Digital Scrapbooking, in fact, a new challenge started today that I have to work on !

Thanks guys!
Okay, so my widths were wacko, but I have fixed those. I am still having the same problem. If I make the #right small enough to fit up next to the #left, there is a gap between the two. I found this site: http://www.positioniseverything.net/...loatmodel.html
and that seems to be my problem. The only thing is, they dont really give a solution! Anyone know of a solution to this?

P.S. Thanks for the compliment LadynRed! I like to scrapbook and do all kinds of papercrafts. Those challenges and swaps really let you learn a lot and they are so much fun. Good luck with your new challenge.


EDIT** Okay, so it looks like there might be a solution here: http://www.positioniseverything.net/...reepxtest.html
but I cant figure out how to get it to work in my situation. Im not totally understanding the article I guess.

EDIT AGAIN! - I got this solved. It was so weird. All I had to do was add this code:

 /* hide from MacIE \*/
* html #left {
	margin-right: -3px;
	}
/* end hide */

Thanks for everyones help!

Make sure you use coniditional comments for those IE hacks Stephanie. IE7 will upchuck on that *html hack. If you're only worried about IE Mac, I wouldn't waste too much time on it.. IE for Mac is DEAD as a doornail and most people with a MAC will have moved on to Safari or one of the newer browsers.

The 3px gap, with I don't see you have a problem with in IE6, can be solved with the Holly Hack. All you need to do is put height: 1%; on the <p> and IE will stop misbehaving.