CSS DIV height fix for IE6

[jannmirch]

I need some sort of workaround for a DIV height in IE6. The page renders fine in Firefox, Netscape and Opera.

I'm ready to resort to a table!!

Here's the page: www.katestreasure.com

Here's my CSS:

#item {
float: left;
clear: inherit;
width: 120px;
text-align: left;
padding: 5px;
margin: 2px 2px 2px 2px;
height: 220px;
border: 1px solid #CCCCCC;
vertical-align: top;
}
#item p {
padding: 0px 0px 5px 0px;
font-size: .9em;
line-height: 1.1em;
}
#item .Price {
margin: 0px;
font-style: italic;
}

[jannmirch]

Nevermind. I increased the height some more and that seems to work.

[bj]

First of all I can't see any difference in IE. Secondly you have another significant problem. Not everyone uses the default font size. Increase the font size and see what happens. If you MUST set heights on those boxes, do it in EMS so they expand with the text. Personally I'd remove the height and let it flow OR set it in a table since it actually is tabular data of a sort. Regardless of how you do it, that needs attention. If you don't fix that your layout is too brittle and doesn't hold up well, especially at narrower window widths. The stuff from the first row overlaps the second row and it's a real mess.

Which would be a shame since the design as it's intended is very attractive.

[jannmirch]

Thanks for pointing that out. Sometimes we can't see the obvious things!

[jannmirch]

The problem with the flow is if the box in the middle of the "row" is longer than the text to the right of it, the box below gets "stuck" on the longer box and can't align all the way to the left.

I hope I'm explaining it correctly.

[jannmirch]

As an aside, one nice advantage of setting up a "faux" table with DIVs is I can delete one product and put in another where ever I want it to appear without having to move around cells the way you do with real tables.

Thanks again, BJ. As ever, your eagle eye sees it all!

[bj]

Did you try the display: table properties?

dizque.lacalabaza.net/temp/full-width-navigation-bar-with-css.html

This is written up to apply to a horizontal menu, but it might fit for your situation.

[jannmirch]

I had tried it. It was one of my first attempts actually. But for some reason, I couldn't get it to work. I don't remember what the issue was now.

[bj]

Well, I hate to say this since I try to not use them, but since this is tabular data, a table for that part of the design really is suitable. It'll avoid the font resizing problem, since all row cells will height-expand together with the text. I'd try doing it without specifying heights.

Good luck!