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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image not positioning properly in FF

    I'm having issues getting images to position properly on a website I'm building. It's the first site I've built on my own using CSS, and I've spent some time reading books and visiting websites in order to learn it. However, I simply cannot figure this problem out.

    The page is http://www.soilsensor.com/overview.aspx

    In IE 6, the image positions properly to where I placed it in the code, to the right of the first paragraph. However, when viewed in FF 2 the image is pushed down the page to the third paragraph.

    This is particularly confusing because it's usually IE that mucks up CSS rendering, not FF.

    If you need to see the CSS, it's at http://www.soilsensor.com/global.css

    Any help would be appreciated, thanks!

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Squeak View Post
    In IE 6, the image positions properly to where I placed it in the code, to the right of the first paragraph. However, when viewed in FF 2 the image is pushed down the page to the third paragraph.
    In Firefox, whenever you apply clear: left/right/both to a float, then floats appearing later in source will never be positioned higher up than this float. I'm not sure if this is a violation of standards. I will need to investigate.

    Anyway, from your source:
    Code:
     .sidebar {
     width: 180px;
     float: left;
     margin-right: 15px;
     margin-bottom: 15px;
     border-top-width: 5px;
     background: #C0C0C0 url(images/nav_bottom.jpg) center bottom no-repeat;
     clear: left;
     padding-bottom: 30px;
    }
    For now, to solve your problem, collect your 'Site navigation' and 'Site Sponsors' floats and wrap them in one single div. Then float that new div to the left. That should solve your problem.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Brilliant, that worked perfectly. That solution would never have occurred to me, thank you!


  •  

    Posting Permissions

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