467,880 Members | 1,122 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,880 developers. It's quick & easy.

Mozilla 1.7 float bug with clear: both?

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
  • viewed: 3668
Share:
7 Replies
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
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
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
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
"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
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
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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Robert William Vesterman | last post: by
9 posts views Thread by Johannes Koch | last post: by
5 posts views Thread by Mathias Schreiber [wmdb] | last post: by
5 posts views Thread by Andrey Tarasevich | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.