float: left; all mucked up in Netscape 4

...no big surprise, but what do I do?

[mivox]

OK... so my CSS is set up to format all <blockquotes> as 160px suares, with a green background and 2px border, with text specifications, and blah, blah... The blockquote specifications also include float: left; because I want 4-6 of them on the same page, displayed 2-3 per line, depending on window width.

This works great in IE & Opera (no surprise). I currently have a group of three set up... when I enlarge the browser window, all three sit on one line, and when I make the window narrower, the third one in the line "bumps down" and sits directly below box #1.

It doesn't work properly at all in NN4.7/Mac (again, no surprise, but big frustration). In NN4, my 160px squares become taller or shorter than they should be (annoying, but no big deal)... AND... When I resize the browser window, which should bump #3 to the next line, they all get REALLY tall and super-skinny (like one word wide) instead of number three "floating" to the next row down.

Some other potentially relevant details:

The blockquotes are "nested" inside a #content <div>... #content is absolutely positioned on the page, with width & height set to "auto". When I tried setting the #content width to a percentage, nothing changed.

The blockquotes currently have no "position" attribute. I've tried various permutations of absolute and relative positioning, and it generally made things worse.

Any other details needed? I can post a code snippet of my CSS tonight when I get home, if needed.

[papabaer]

"Snippets are GOOD!" Just perhaps, collectively, we may find a solution. No guaranties with NN4.x, but who can tell! ;)

[mivox]

Hehe... snippet it is then. I was just hoping for a tedster's-problem-like "Why yes, I've had exactly this problem and here's how I fixed it" type answer. ;)

It's not quite 2pm here though, so it will be a few hours before I can get home to post it. Don't even have a test page up on my server yet... :(

[pageoneresults]

> When I resize the browser window, which should bump #3 to the next line, they all get REALLY tall and super-skinny (like one word wide) instead of number three "floating" to the next row down.

Hey there mivox! I too am seeing the above problem. At first I thought maybe I was missing the NN Resize Fix in my javascript but I am not. I think there is a bug there.

I'm also seeing NN4.x ignorning white-space:nowrap. With all the changes at AOL, maybe we'll get lucky and they will force users of NN4.x to upgrade! I'm anxious to start using some of the other CSS tips I've picked up here but can't because they are not NN4.x compatible and I still have a large percentage of NN4.x users in a lot of my clients stats. Arrrggghhh!

[mivox]

Well, richinstyle lists a whole bunch of bugs for NN4 & "display: block" as well as "float: right/left" and I honestly couldn't figure out which was causing the problem when I browsed their site last night, but at least I'm not the only one...

How 'bout if you post a snippet of your floating item's css attributes, and I'll post my snippet later tonight, and maybe if we see what they have in common we can figure something out... Even if the only thing I figure out is NOT to use floating blocks in commercial site designs.

(This problem is cropping up on my personal site, so I'm willing to say "forget it" for the NN4 users, and just leave them a note blaming their browser... ;) )

[mivox]

OK, here's the #content <div> that encloses the floating <blockquotes>, and the blockquote declarations, exactly as they appear on my page:

#content { position: absolute; top: 125px; left: 180px; visibility: visible }
blockquote { color: #666; font-size: 12px; line-height: 14px; font-family: Arial, Helvetica, Geneva; background-color: #9f9; display: block; float: left; padding: 5px; border: solid 2px #666; width: 160px; height: 160px }

[mivox]

...help? Any ideas, or am I stuck with yucky blockquotes in Netscape?

[papabaer]

Hi Mivox! I worked on this earlier today, looking for a way to "fool" NN4 - no luck so far... I will try some other things when I get back later tonight.

It is frustrating once you see how nice and smooth modern browsers handle "float" elements. It certainly opens up a lot of possibilities for displaying text blocks.

Not ready to throw in the towel yet, but it does look grim! For Netscape "oldskool" 4.x! ;)

[mivox]

I may use the @import trick discussed in another thread to feed NN4 an absolutely positioned group of blockquotes (or maybe wrap them in positioned <layers> or something nasty like that), while allowing everyone else to enjoy the nice, floaty ones...

Back to the drawing board, but if anyone discovers a trick around it, I'll be keeping an eye on this thread!