SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image Cutoff in Webkit and Opera

    In Webkit and Opera a background image doesn't fully expand to it's height like it does in Firefox and IE, it only remains behind the content.

    The table cell styled with the following properties appears to expand its height fully to the tip of the previous table cell that has the background image applied.

    Code CSS:
    .c_nosig {
    border-top: 0 !important;
    padding: 0;
    height: 1%;
    vertical-align: top;
    width: 100%;
    }
    I'm using ZetaBoards, a free forum provider, so these elements are default.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Sorry Cory, could you provide more code? I don't even see a background mentioned in the code posted above??

    Why is there a cell if its height is being set to 1%?

    I'm totally not familiar with ZetaBoards. You should post a bit of example HTML of the area in question.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, as Stomme mentioned..no image there

    You could set a min-height on the table cell to relect the height on the image
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Something about teh 1% height cell covering the other cell who does have the image... that's what I need to see what's going on.

  5. #5
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://s1.zetaboards.com/CutoffPreview/topic/3409441/

    There's an example.

    I'm sure you two have developer tools to mess with the CSS, so have fun.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Is the pink testing area where the bg image would be on the live site?

  7. #7
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just about. Our image is 193 pixels in height, that image is 200 pixels high.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, tables are only meant to shrinkwrap to the content, Assuming the pink image is the image we are talking about..

    Background images have no influence on the height/width of the element. They only fully show/show how yo uwant if the width/height is correct.

    You need to set a height on the <td> (or a min-height) (as I said earlier )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried it before and it didn't work, so I must have been doing something wrong. But it works now, so thanks!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You're welcome! GLad it worked.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •