Blogger adding an extra clear: both div to posts

Lots of people have noticed recently that Blogger has started publishing posts with a <div style="clear: both"></div> tag before the posting text. This broke my layout and have me invalidly nested tags since I was including the opening and closing <p> tags in the template. The extra <div> tag meant that the browser closed the previous block element (the <p>) and then after closing the <div> went back to put the first paragraph of content straight after. This meant my posting class wasn't being applied so the first paragraph of every post didn't look right. It also broke the already broken HTML on the site.

So, since it was annoying for me, I've written a partial fix in JavaScript. Paste the code below into your Blogger template just before the closing </body> tag. This is important as it needs to be in the code after all the content.

<script type="text/javascript">
var allDivs = document.getElementsByTagName("div");
for(var i=0;i<allDivs.length;i++){
 var curDiv=allDivs[i];
 if(curDiv.parentNode.className=='postingBlock'){
  var block=curDiv.parentNode;
  html=block.innerHTML;
  html=html.replace(/(<\/p>)?<div style="clear: both(;)?"><\/div>/gi,'');
  block.innerHTML=html;
 }
}
</script>

I've tested it in IE6 and Firefox so far, and I'm not really bothered about the rest at the moment although it should work in IE5+.

Link to this post

Comments:

Okay - adding a comment to my own post, it can be turned off within Settings -> Formatting and change 'Enable float alignment' to 'No'.

posted by Blogger Karl Bunyan : July 12, 2005 11:47 AM

The original solution is better.

posted by Anonymous Bealers : July 18, 2005 5:53 PM

Post a Comment