By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,852 Members | 2,152 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,852 IT Pros & Developers. It's quick & easy.

How do I clear without a gap in FireFox?

P: n/a
I am creating a blog and I have a problem which seems fairly common:

Within the content of the posts I sometimes have floated images. The
comments bar that follows each post will not clear the float unless I
use clear:both in the class for the comment bar. HOWEVER, when
clear:both is used for the comment bar, the first post on the blog
shows a huge, (enormous) vertical gap between the content and the
comment bar when viewed using FireFox 1.5.0.6.

I have read that a fix is to set the margins of the content and the
comments to 0: that didn't work.

I have also read that deleting the clear:both will get rid of the gap.
That is true. Only, when I do that, the comment bar no longer clears -
part of it sits alongside the image.

Please, I've been fiddling with it for 8 hours. Any suggestions would
be g-r-e-a-t-l-y appreciated.

Sep 13 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
ff******@gmail.com wrote in news:1158190842.744001.269330
@e3g2000cwe.googlegroups.com:
I am creating a blog and I have a problem which seems fairly common:

Within the content of the posts I sometimes have floated images. The
comments bar that follows each post will not clear the float unless I
use clear:both in the class for the comment bar. HOWEVER, when
clear:both is used for the comment bar, the first post on the blog
shows a huge, (enormous) vertical gap between the content and the
comment bar when viewed using FireFox 1.5.0.6.
[snip]
Can you post a URL that shows this behavior?
Sep 14 '06 #2

P: n/a
I posted it at www.briandoeschina.com

Thanks

Jim Land (NO SPAM) wrote:
ff******@gmail.com wrote in news:1158190842.744001.269330
@e3g2000cwe.googlegroups.com:
I am creating a blog and I have a problem which seems fairly common:

Within the content of the posts I sometimes have floated images. The
comments bar that follows each post will not clear the float unless I
use clear:both in the class for the comment bar. HOWEVER, when
clear:both is used for the comment bar, the first post on the blog
shows a huge, (enormous) vertical gap between the content and the
comment bar when viewed using FireFox 1.5.0.6.
[snip]
Can you post a URL that shows this behavior?
Sep 14 '06 #3

P: n/a
YEEEEEESSSSSSS!

I've found the answer.

I found it at:
http://www.sitepoint.com/blogs/2005/...ing-of-floats/

For those of you who will be searching for the same answer I was, here
is a detailed explaination of my problem:

I was creating a blog for a friend gone to China. I designed the
content of the blog message to contain images that had the css
attribute float:left or float:right so that they were aligned to either
of the sides of the post and allowed text to flow around them. The
problem was that when when one of these floated images extended past
the text of the message, that the comment bar below, (the line that
contains the permanent link to the blog entry, a link to the comments
and a link to make a new comment) would rise and become flowing text to
the right or left of the image when viewed in FireFox 1.5.0.6 (my
version).

I found that if the clear:both css was used on the comment bar, that it
then pushed itself low enough to clear the bottom of the image. Of
course, when I used that fix in FireFox, a HUGE gap opened up in the
blog entry at the top of the page between the message content and the
comment bar.

No matter what I tried, (for well over eight hours) I couldn't clear
the comment bar without the clear:both attribute. I couldn't get rid
of the gap either. I found mention of it, people explaining that the
bug had to do with 'margin size' and that the fix was to set the top
margin of the comment bar explicitly to 0 in order to get rid of the
gap. That didn't work.

THE ANSWER:

After even more searching, I found a thorough explaination of what was
actually happening and, yes, an answer.

The problem is that the containing element (in my case a <ptag)
wasn't recognizing that the floated image was extending beyond it's
lower boundary.

By adding OVERFLOW:AUTO, (had to shout that for those who are just
browsing the article, the tag is reminded that it has to enclose the
floated element. It didn't work for my <ptag. Of course I simply
placed a <divtag just within the <ptag, enclosing the actual
content within the <ptag, and presto, the boundary was extended to
the bottom of the image and there was no gap in FireFox.

Thank god.

ff******@gmail.com wrote:
I posted it at www.briandoeschina.com

Thanks

Jim Land (NO SPAM) wrote:
ff******@gmail.com wrote in news:1158190842.744001.269330
@e3g2000cwe.googlegroups.com:
I am creating a blog and I have a problem which seems fairly common:
>
Within the content of the posts I sometimes have floated images. The
comments bar that follows each post will not clear the float unless I
use clear:both in the class for the comment bar. HOWEVER, when
clear:both is used for the comment bar, the first post on the blog
shows a huge, (enormous) vertical gap between the content and the
comment bar when viewed using FireFox 1.5.0.6.
[snip]
>
Can you post a URL that shows this behavior?
Sep 15 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.