Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool Floats: Huge vertical space in Firefox following two floats and a BR clear:both

    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)

    And here's what the intended layout in IE

    Here is the actual page

    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
    Last edited by jwhittlestone; 12-14-2007 at 11:37 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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>
    You have some errors in your markup 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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •