khtml browsers & clear

[bigfatsumoguy]

I recently noticed something that I'm not sure is documented, nor am I sure
it's correct.

A two-column layout I've been working on has a smaller right column
float:left (very similar to www.simplebits.com except the column widths are
reversed). The only content in the left column are several identically
classed divs containing a thumbnail & some text. The divs simply wrap down
the column (because the column's width is the same as a thumnail div) & are
separated by its 5 pixel bottom margin; the width & height are set
explicitly.

Here's where it gets interesting. In all browsers this renders properly,
except for Konqueror/Safari (other khtml-based ones?). Apparently I had
been a little extra careful and had added 'clear:both' to the thumbnail divs
style just to be certain they would wrap (they aren't floated - but at one
time in an earlier build were).

All browsers seem to ignore the 'clear' because the divs arent floated and
the margin simply makes the box area larger. But in Konq/Saf 'clear' on a
non-floated element seems to tell the browser to ignore that margin
altogether and the divs rendered butted up against one another -- as if the
bottom margin had been set to 0.

A floated element with a margin is simply viewed as the size of the element
plus the margin (trying hard not to word this wrong). Why would a
non-floated element with a 'clear' attribute, which is intended to /clear/
an element below the total box size of a float, result in ignoring the
margin of the preceding non-floated element? Shouldn't a 'clear' attribute
result in completely ignoring everything if there are no floated boxes
whatsoever?

Screenshot:

http://us.f1f.yahoofs.com/bc/37e2428f/bc/khtml/clear-bug.jpg?CC.1rgABWSwOdLYX

[Rower_CPU]

Got a link to a live page?

I've actually had the opposite problem where Firefox was ignoring a clear and everyone else was getting it right...

[Urdam]

I agree

[bigfatsumoguy]

Got a link to a live page?

I actually have it on a testing server & cannot put it live due to the client's request. I know it makes it harder to debug this way, but perhaps someone would like to try it themselves?

Here is a snippet of the left column style, along with the thumbnail div style. The left column floats left; right column position is set by its left margin. (once again refer to the www.simplebits.com layout)


#content-left {
float: left;
clear: left;
margin: 0;
padding: 1px 0 5px 5px;
width: 221px; /* box model hack */

voice-family: "\"}\"";
voice-family:inherit;
width: 211px;
}

html>#content-left { /* opera kindness */
width: 221px;
}

/* thumbnail divs inside left content column */
div.button-thumb-left {
background-color: #FFF;
color: #497EA9;
width: 215px;
height: 119px;
margin: 0 0 4px 0; /* bottom space between thumbs */
padding: 0;
overflow: hidden;
/* clear: left; --> this is the trouble line */
}

div.button-thumb-left img {
float: left;
width: 102px;
height: 119px;
margin: 0 5px 0 0;
padding: 0;
border-right: 1px solid #D4E8D0;
}

[Rower_CPU]

OK, I got it to work - http://organicallydigital.com/dev/clear/

The width in the IE box model hack was off (221px vs 216px) which seemed to throw the other parts out of whack. Don't ask why...

[bigfatsumoguy]

hey thanks for taking the time to check it out!