Firefox display issue with <div style="clear:both;">

webpage does not display correctly in Firefox

[susanlprince]

It has come to my attention that my blog does not display correctly in Firefox, that one needs to scroll waaaaaaaaaaaaaaaaaay down to find the comment link. It displays fine in IE.

In my attempts to find the problem, I was told my issue is with this tag: <div style="clear:both;">

I find that tag when I view the source of the page, but not in my template. It appears to have something to do with rss or atom through Blogger or something, but I am not a wiz with all this stuff to understand how to fix this issue. I'm hoping someone here would be able to help me out.

snippet of template code possibly causing the issue:

----------------------------------------------

<div id="content">

<Blogger>
<BlogDateHeader>
<H3><b>:: <$BlogDateHeaderDate$> ::</b></H3>
</BlogDateHeader>
<a name="<$BlogItemNumber$>"></a>

<blockquote>
<BlogItemTitle>
<H4><B><$BlogItemTitle$></B></H4>
</BlogItemTitle>

<p align="justify"><span class="rss:item"><$BlogItemBody$></span></p><br>

:: <small><$BlogItemAuthorNickname$> <$BlogItemDateTime$> ** <a href="javascript:HaloScan('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCount('<$BlogItemNumber$>'); </script></a> ¦ <a href="javascript:HaloScanTB('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCountTB('<$BlogItemNumber$>'); </script></a> ¦<a href="<$BlogItemArchiveFileName$>#<$BlogItemNumber$>"> Permalink </small></a>** ::
<BR CLEAR="ALL">...
</blockquote>
<ItemPage>
<BlogItemCommentsEnabled>
<div class="blogComments">
Comments:
<BlogItemComments>
<div class="blogComment">
<a name="<$BlogCommentNumber$>"></a>
<$BlogCommentBody$><br />
<div class="byline"><a href="<$BlogCommentPermalinkURL$>"title="permanent link">#</a> posted by <$BlogCommentAuthor$> : <$BlogCommentDateTime$></div>
<$BlogCommentDeleteIcon$>
</div>
</BlogItemComments>
<$BlogItemCreate$>
</div>
</BlogItemCommentsEnabled>
</ItemPage>
</Blogger>
</div> <!-- einde #content -->

---------------------------------------------------------

This is what I get when I view the source of template code on actual page:

---------------------------------------------------------
<blockquote><div id="content">

<H3><b>:: Wednesday, August 31, 2005 ::</b></H3>

<a name="112552660633612775"></a>

<blockquote>

<H4><B>Post title</B></H4>

<p align="justify"><span class="rss:item"><div style="clear:both;"></div>Post goes here<div style="clear:both; padding-bottom: 0.25em;"></div></span></p><br>

:: <small>Susan L. Prince 4:51 PM ** <a href="javascript:HaloScan('112552660633612775');" target="_self"><script type="text/javascript">postCount('112552660633612775'); </script></a> ¦ <a href="javascript:HaloScanTB('112552660633612775');" target="_self"><script type="text/javascript">postCountTB('112552660633612775'); </script></a> ¦<a href="2005_08_01_newarchive.html#112552660633612775"> Permalink </small></a>** ::
<BR CLEAR="ALL">...
</blockquote>

<a name="112549997786475701"></a>

<blockquote>


</blockquote>

</div> <!-- einde #content -->
</blockquote>

---------------------------------------------------

Thanks in advance!

[RayofTennessee]

Here's a link that may assist with your issue. It is just a rendering difference issue between ns, ie, and ff but has a hack for it available if you so choose.
[positioniseverything.net...]

[susanlprince]

RayofTennessee - thanks for the link, but I didn't really understand what I was reading. I'm not quite to that stage of understanding all the code and stuff.

I did get my issue solved and thought I'd post how in case it may help others with the same problem:

A couple of steps, and this is for those people who use Blogger and may have the same problem with posts.

1. Disable "float alignment" This is how to do that: From Blogger control panel click SETTINGS, then FORMATTING, then scroll down to "ENABLE FLOAT ALIGNMENT" and choose "NO". Save Settings and republish.

2. Remove any "bad code", in my case it was the following: <BR CLEAR="ALL">:

which was found in the main template code:

<blockquote>
<BlogItemTitle>
<H4><B><$BlogItemTitle$></B></H4>
</BlogItemTitle>

<p align="justify"><span class="rss:item"><$BlogItemBody$></span></p><br>

:: <small><$BlogItemAuthorNickname$> <$BlogItemDateTime$> ** <a href="javascript:HaloScan('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCount('<$BlogItemNumber$>'); </script></a> ¦ <a href="javascript:HaloScanTB('<$BlogItemNumber$>');" target="_self"><script type="text/javascript">postCountTB('<$BlogItemNumber$>'); </script></a> ¦<a href="<$BlogItemArchiveFileName$>#<$BlogItemNumber$>"> Permalink </small></a>** ::
<BR CLEAR="ALL">...
</blockquote>

Once I did both those things, my problem was corrected.

YAY!