473,322 Members | 1,526 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

How do I clear without a gap in FireFox?

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
3 5933
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Ghazan Haider | last post by:
I am posting this for the lack of a better newsgroup, and for the knowledge of people here, and because its only partially OT. We have a bunch of users with their computers at work. There are...
6
by: Stan Brown | last post by:
http://www.acad.sunytccc.edu/instruct/sbrown/stat15/demo.htm http://www.acad.sunytccc.edu/instruct/sbrown/npscreen.css The first table is floated right (class="fr"). Text does not flow around...
5
by: Urs Martini | last post by:
Hi! I experienced some problems using IE 6 and some kind of css like this: .... text above ... <div style="border: 1ps solid blue; float: left;">This is my 1st float</div> <div...
6
by: yawnmoth | last post by:
In IE6, setting clear to both in a span tag seems to work, whereas it doesn't seem to work in Firefox. A demonstration can be found here: http://www.frostjedi.com/terra/dev/test3.html Any...
6
by: ima | last post by:
http://www.kencoffman.com/templates.htm I've been experimenting with float:left and I've been able to clear those floats as far as Opera 8.02 and Firefox 1.0.6 but IE6 is a problem. I've...
16
by: Brian D | last post by:
I have a multiple select list that is created dynamically based on a previous selection on an asp page. The first thing I do is to clear the curent option list by ...
9
by: vighnesh | last post by:
Hi Folks Greetings to you all. I have been dealing a project, in which one of the requirement is to clear FireFox browser history programatically. Can anybody suggest me, how this can be...
11
by: rakeshvthu | last post by:
hi all, i am new bee to script and some how i find code to clear data of clipboard it is working fine for IE browser not for Firefox can any one help me out what all we need to change in...
2
by: Vighneswar | last post by:
Hi All Please let me know is there any way to clear the address bar history ( Typed URLs) of Firefox browser programmatically. Deleting 'index.dat' under profiles folder of firefox will delete...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.