Results 1 to 4 of 4

Thread: White bottom border FF only DD Script Thumbnail Viewer

  1. #1
    Join Date
    Jul 2006
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default White bottom border FF only DD Script Thumbnail Viewer

    1) Script Title: Image Thumbnail Viewer

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    3) Describe problem: White bottom border on Thumbnail Viewer using FF only. IE ok. Problem not seen on Dynamic Drive Demo. Issue with my site. See URL below:


    URL of site http://www.ibanezfromguam.net/myrapt...n_linkage.html

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    In your thumbnailviewer.css file:

    Code:
    #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
    background-color: #313131;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I changed it but it's the white border is still there. It has to do with my css (not thumbnail css) because it doesn't happen to the demo.

    Your suggestion only changes the thumbnail background but some how the there is a bottom padding that increases the picture.

    Thanks

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    No, actually it is a quirk of HTML 4.01 Strict as applies to images. One of the cases where adherence to standards goes a little too far in my opinion.

    Anyways, you can fix it the way I suggested before, looks fine - no one will now the difference. However, if you want to get to the root of the problem, use this style:

    Code:
    #thumbBox #thumbImage img {
    display:block;
    }
    You see, in HTML 4.01 Strict, because images natively display inline, strict adherence to standards reserves room for inline layout of text characters like g and q that require a few more pixels below 'bottom'. By changing the display to block, this is avoided. Silly and stupid if you ask me but, it is a known fact.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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