...

View Full Version : Floats: Huge vertical space in Firefox following two floats and a BR clear:both



jwhittlestone
12-14-2007, 12:20 PM
Hi All,

Hope you could shed some light on this strange behaviour.. CSS behaving incorrectly in Firefox (a change from the norm)

In my sidebar, a P is floated to the left, the image is to the right, followed by an HTML break with clear:both. There seems to be an enormous vertical gap

Here is a screenshot of what it should look like (with firebug) (http://www.barbaryonline.com/jw/personal/firefox_div.png)

And here's what the intended layout in IE (http://www.barbaryonline.com/jw/personal/worksfineIE.png)

Here is the actual page (http://magazine.foxybingo.com/category/love/)

And here is the html

<code>
<div class="sidebar_entry">
<a href="http://magazine.foxybingo.com/category/love/love-laundry/">
<img src="http://magazine.foxybingo.com/wp-content/sidebarimages/fbm_sidebar_lovelaundry.jpg" style="float:right; padding-right:5px"><P style="float:left; width:70px; text-align:left"> left Love Laundry. Test sidebar desc. Edit in category</P></a>
<br style="clear:both">
</div>
</code>


I am using <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And it validates


Any help would be greatly appreciated! thanks a lot

Jon Whittlestone :confused:

abduraooft
12-14-2007, 12:55 PM
<div class="sidebar_entry">
<a href="http://magazine.foxybingo.com/category/love/love-laundry/">
<img src="http://magazine.foxybingo.com/wp-content/sidebarimages/fbm_sidebar_lovelaundry.jpg" style="float:right; padding-right:5px"><P style="float:left; width:70px; text-align:left"> left Love Laundry. Test sidebar desc. Edit in category</P></a>
<br style="clear:both">
</div>
You have some errors in your markup (http://validator.w3.org/check?uri=http&#37;3A%2F%2Fmagazine.foxybingo.com%2Fcategory%2Flove%2F&charset=%28detect+automatically%29&doctype=Inline&group=0) especially in the above code. ie putting <p>(block element) inside <a>(inline) is not permitted.

I think you can omit those <p> by giving float to your <img> inside <a> to get the desired effect.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum