dcsimg
www.webdeveloper.com
Results 1 to 10 of 10

Thread: Firefox add space under image

  1. #1
    Join Date
    Aug 2004
    Location
    San Diego, CA
    Posts
    225

    Firefox add space under image

    I thought I had seen a post on this issue, but now I can't find it. As I recall, though, in that post it was IE that was adding the space. Anyway, Firefox is adding several px of spcae below the image in the <cleft> divs, but not in the <cright> ones. IE does not do so. There are several rows of these "buttons" but I just posted the code for one row.
    Code:
    .cbox {
         margin: 0 auto;
         position: relative;
         text-align: left;
    }
    .cleft {
         text-align: left;
         float: left;
    }
    .cright {
         float: right;
         text-align: left;
         clear: right;
    }
    .cright img {
         display: block;
    }
    
    
    <div class='cbox' style='width:395px;'>
        <div class='cright' style='width:223px; margin-top:12px;'>
            <a href='index.php?Pass=1'><img src='images/mnu_pass.gif'></a>
        </div>
        <div class='cleft' style='width:138px; margin-top:12px;'>
            <a href='../timecard/s_viewcard.php'><img src='images/mnu_time.gif'></a>
        </div>
    </div>
    This is another case of knowing that Firefox is doing something right, but not knowing why. You guys are really good at pointing out why.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add to .cbox clear:both;
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Aug 2004
    Location
    San Diego, CA
    Posts
    225
    As usual, Fang, you have solved my problem. Thay line up nicely. But Firefox is now adding the space below the image in both <divs> and IE is not. So the alignment is fine, but why is Firefox adding the space?

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Looks the same in the code snippet. Do you have a live example?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Mar 2003
    Location
    The Lone Star State
    Posts
    1,126
    Try adding img{vertical-align:bottom;}
    "If at first you do suceed, try not to look astonished."
    I have 50 gmail invitations at my disposal, if you want one pm me with your First and Last name and your email address
    HTTPGuru

  6. #6
    Join Date
    Aug 2004
    Location
    San Diego, CA
    Posts
    225
    Putting a red border arounfd the two interior divs and a blue one around "cbox" (after adding "clear:both" per Fang's direction) shows this

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    .cbox img {
         display: block;
    }
    or soccer362001's solution
    At least 98% of internet users' DNA is identical to that of chimpanzees

  8. #8
    Join Date
    Aug 2004
    Location
    San Diego, CA
    Posts
    225
    Yep, things now look the way one (I) would expect them to. But...

    Why is the "block" needed when the images is in a div inside the cbox?

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    An image is displayed inline the same as text. The baseline is not at the bottom of the container. This link explains it very well.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  10. #10
    Join Date
    Aug 2004
    Location
    San Diego, CA
    Posts
    225
    Learning all the time. Thanks for the ref.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles