heh, though the display weirdities are amusing.
I spend a lot of time poking around CSS info sites (quirksmode is nice).
I've been using Firefox 1.0.6 as my 'instant feedback' browser, sometimes checking in
IE6 (or Maxthon, where rendering is IE's and looks the same… so far) and Opera8,
advert version.
I'm writing just a few similar pages, where pages use similar CSS of float:left
div/columns. I'm K.I.S.S. ing my layouts. I'm not using 100% width clear:left (invisible)
breakers. Instead I'm carefully sizing so that columns add to 100% (this causes little
problem except that columns in IE hop around while I drag the browser's window edges,
which is how I check resize effects. But as a non web author, I can ignore IE :-) )
Abstracted html+css code here:
[Div .headr clear: both; width: 100%; ]
[wrap1 float:left 100% [Div #col1 clear: both; float:left 30% img only] [Div #col2
float:left 36% text only] [Div #col3 float:left 30% img only] ]
[wrap2 float:left 100% [Div #col4 float:left 30% img only] [Div #col5 float:left 36% text
only] [Div #col6 float:left 30% img only] ]
[wrap3 float:left 100% [Div #col7 float:left 40% text only] [Div #col8 float:left 60% text
only] ]
after i see how much text and images fill the divs in firefox, i then apply top margins to
visually pull the divs up or down relative to div above..
---------------
But even ff shows an annoyance: Drag window edges, and nonwrapping content
(images) in left div begin under/overflowing into the column (div) to right; the visual effect
is something of a rectilinear jigsaw cutting effect.
So eventually.... poking around the web, I find a topic, overflow, that *seems* to apply
to this FF problem. overflow looks very applicable to this... appears overflow will fix the
problem.
my first experiment is to add overflow:auto to the properties of all column divs.
Since I've tested by simply applying that property:value to *all* col divs, I've noticed
weird stuff in FF :
1st test, apply overflow:auto;
result: rapid flickers occur when hovering the mouse across many different boundaries.
One flicker seems to be div2 jumping over in a irregular checkerboard overlay onto div1
(haha!) The boundaries that cause this are SOME image edges in SOME cases. SOME
div edges, in SOME cases. Links in SOME cases (I've got :hover background colors on
a href's).
and, the scrollbars appear on text-only div7 which has the largest amount of text. text-
only div8 has little text.
But when I hover across the single (text) href in div8, div7 instantly rewraps, and its
scrollbars disappear.
Next test, apply overflow:hidden; to all col divs:
result: No more flicker, but that last phenom still occurs. (div7 rewraps and div7
scrollbars instantly disappear when mouse hovers across link in div8)
------------
enough experiments. do the pages:
overflow:auto all my col's works, but scrollbars are ugly. scroll seems little use for the
img divs, so I'll overflow:hidden; those. Yes, that's good.
now... apply overflow value to text-containing divs? no... since the text wraps, leave
text divs left as they were, omit the overflow property.
yes, that works in FF and opera8... and ha'snt imporved or worsened IE6. no flicker
problem. no jigsawing of leftmost image.
(as I create a few pages where text and img are within a single div, I'm not sure what
may happen with overflow values. Perhaps *convert* that div to a wrapper div for new
text-only and img divs… ughhh,, later…)
PS IE6 seems non-responsive to overflow:auto, and my mixed overflow solution)
