Mozilla 1.7 float bug with clear: both?

Will Hartung

Hi all...

I'm working on a site that is show up a strange float bug (shocking I know)
using Mozilla 1.7.

You can see the problem here:

http://www.marieosmond.com/Catalog1.aspx?coll=Y&page=2

This is how it should work: (but it's fluke luck, not, apparently, design)

http://www.marieosmond.com/Catalog1.aspx?coll=Y&page=2

What confuses me is not that missing graphics (different problem), but the
fact that I have several thumbnails, all surrounded by a div. That div is
float: left. I then stack 5 of these.

After 5 I throw in a div styled with clear: both; to break for the next 5.

Yet, I still get images that "hang" if some of the thumbnails are taller
than the others.

This also seems to "not work" on Safari, yet it "works" on IE 6.

Any hints why my <div style="clear: both;"></div> does not break my line
here?

I REALLY don't want to use tables here, but I can't seem to predictably get
my line to break.

Thanx for any tips.

Regards,

Will Hartung
(wi***@msoft.com)

Jul 21 '05 #1

Jan Roland Eriksson

On Tue, 1 Feb 2005 14:52:26 -0800, "Will Hartung" <wi***@msoft.com>
wrote:

I'm working on a site that is show up a strange float bug (shocking I know)
using Mozilla 1.7.

[...]

Me thinks your assumption of "bugs" in MZ is wrong.

http://validator.w3.org/check?uri=ht...3DY%26page%3D2

"Character Encoding mismatch!
The character encoding specified in the HTTP header (utf-8)
is different from the value in the <meta> element (iso-8859-1).
I will use the value from the HTTP header (utf-8) for this
validation."

"No DOCTYPE Found! Falling Back to HTML 4.01 Transitional"

"Render Mode: Quirks mode"

Fix your markup first, then you may want to ask again.

Jul 21 '05 #2

joeZ

i've put this in your stylesheet:

..spacer {clear:both;height:10}
and the images fitted.
I think it's because, if your div is empty, and has nothing about
dimensions, it just doesn't appear or make strange things. you could
also make <div class="spacer">.</div>, or something ...
try that.

Jul 21 '05 #3

kchayka

joeZ wrote:

.spacer {clear:both;height:10}

I suggest you validate your code before posting it to the group. It will
save you some embarassment, if nothing else.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Jul 21 '05 #4

Jonathan N. Little

joeZ wrote:

i've put this in your stylesheet:

.spacer {clear:both;height:10}
and the images fitted.
I think it's because, if your div is empty, and has nothing about
dimensions, it just doesn't appear or make strange things. you could
also make <div class="spacer">.</div>, or something ...
try that.

'height:10'

No unit identifier specified in value which is required in a stylesheet,
only after a zero length is the unit identifier is optional.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jul 21 '05 #5

Will Hartung

"joeZ" <jz*****@gmail.com> wrote in message
news:11**********************@g14g2000cwa.googlegr oups.com...

i've put this in your stylesheet:

.spacer {clear:both;height:10}
and the images fitted.
I think it's because, if your div is empty, and has nothing about
dimensions, it just doesn't appear or make strange things. you could
also make <div class="spacer">.</div>, or something ...
try that.

Thanx for the tip Joe. I don't know why I didn't think of that.

I "fixed" it by using absolute positioning for the boxes, I've had
consistent results with that, and it worked pretty well. This site is as
rigid as the Sears Tower anyway, so it was an easy leap to make.

Thanx again Joe!

Regards,

Will Hartung
(wi***@msoft.com)

Jul 21 '05 #6

joeZ

Sorry for the 'px'. I just assumed anybody could realise that. I know
about the units, I just tried it quick on my mozilla, it worked, and I
said it.
I mean, that 'code' was not meant to be on a page, it was an example, I
did it just for 'saving' the typing of two letters.

Jul 21 '05 #7

Jonathan N. Little

joeZ wrote:

Sorry for the 'px'. I just assumed anybody could realise that. I know
about the units, I just tried it quick on my mozilla, it worked, and I
said it.
I mean, that 'code' was not meant to be on a page, it was an example, I
did it just for 'saving' the typing of two letters.

Understand, just some folks don't know and try things like width: 300;
and cannot figure out why their divider did not size correctly! ;-)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jul 21 '05 #8