SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question TR background image bug in IE8 >> IE7 Solution does not work?

    Hi All,

    Probably a bit of a difficult question: I am trying to apply a background image to a table row <tr> (it should spread over the entire row). This goes well in Firefox. IE7 and IE8 had some problems.

    IE7 didn't show the background image at all. IE8 shows the background image as if it were applied to the td:first-child, i.e. it only covers the first column, instead of the entire row.

    Through googling I found that applying position: relative to the table row and background: none to the <td> elements inside the <tr> solved this problem for IE7.

    The solution that works for IE7, does nothing for IE8. It still shows the background image covering only the first column. I checked the clientWidth and clientHeight of the <tr> element, with Firebug Lite. They both are fine and the content of the cells shows up fine. It is just the background-image that is not applied properly.

    Any ideas on what the problem may be? Any help would be highly appreciated. I've spent quite some time trying to solve this already...

    Best regards,
    Martijn Senden.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Hi, IE in general don't support background images on the <tr> element well at all, though this isn't ideal, assuming you know the width of the <td>s you could slice up the image you put on the <tr> and place it on the <td>s.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is working for me in IE6 -IE8. The single image is painted onto the row in one image and not repeated in the td.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    table {width:900px}
    tr.test {background:url(images/Untitled-7.png)}
    td {background:none}
    tr {position:relative;}
    td, th {padding:10px}
    </style>
    </head>
    <body>
    <table  cellspacing="0" cellpadding="0">
        <tr>
            <th scope="col">x</th>
            <th scope="col">1</th>
            <th scope="col">1</th>
            <th scope="col">1</th>
            <th scope="col">1</th>
            <th scope="col">1</th>
        </tr>
        <tr class="test">
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
    </body>
    </html>
    Works in Firefox and Opera but not safari.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    Thanks for the replies!

    Paul, I tried your code and it works perfectly. Still, when I apply the code to my site, it doesn't work... I have gone as far as pasting the generated html of my table into a separate html file and added the css styling from my website, just to test what might be wrong. When I did this, I found that my table works well on it's own, but in the context of my website it doesn't. Maybe there is some style in another stylesheet overriding the settings of the stylesheet that covers the table in question. I can't find anything suspect however.

    I haven't been able to create a single html file that has this problem. It only shows up when it is loaded in the web application (with php, jQuery ajax, etc.).
    Therefore: if you go to http://demo.mwhgeoviewer.nl and log in to the site using username: gast password: gast.
    Now, you will not have all functionality, but you will be able to zoom into the map (scrollwheel or navigation buttons in the map). When zoomed in far enough, dots will appear. Click a purple dot and an overlay pops up. This popup contains tables that have the problems i described. And if you click on a row in the lower table, this will show another table with the same problems.

    I hope anyone can help out. I've been looking at this all morning, but can't find the problem. Please note that the problem only seems to arise in IE8. In IE7 the fixes Paul proposed did work (I had already applied them some time ago).

    Best regards and thanks in advance.
    Martijn Senden.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem seems to be that IE8 can't handle the image being placed at right bottom.

    If you change the images to be left bottom then they display full width.

    e.g.
    Code:
    #attributes table tr.attr_selected, #attributes table tr.attr_selected.attr_hover {
      background: url('http://demo.mwhgeoviewer.nl/geoviewer/images/attributes/item_divider_selected.png') no-repeat left bottom;
      cursor: auto;
    }
    I assume you can adjust your images to work from the other end of the table but it looks like the only solution that I can see presently.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    I probably could (though it's a bit of a hassle. On the right side the image provides a custom border).

    But that is a really strange bug! Very much so, because in this test page, IE8 is able to place the images at bottom left.....

    This is what I meant when I said that there must probably be something wrong in another stylesheet (maybe some undocumented IE8 bug?)

    If there is no other solution, I must go and redo the images in some other way, but I still have some hope left that this might be solved (since IE8 does show the image wrapping the entire table row in the test page I just mentioned).

    Any more thoughts? Thanks again.

    Best regards,
    Martijn.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's working in the last example because you have dropped down to quirks mode (no uri in the doctype) and therefore you are basically getting ie5 (not quite) instead of ie8.

    It does seem to be an IE8 bug as a simple test confirms.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    table {
        width:1200px
    }
    tr{width:100&#37;}
    tr.test {background:url(images/Untitled-7.png) no-repeat 0 0;}
    /* ie8 places the right position at right of first cell*/
    tr.test2{background:url(images/Untitled-7.png) no-repeat 100% 0;}
    td {background:none}
    tr {position:relative;}
    td, th {padding:10px}
    
    </style>
    </head>
    <body>
    <table  cellspacing="0" cellpadding="0">
        <tr>
            <th scope="col">x</th>
            <th scope="col">1</th>
            <th scope="col">1</th>
            <th scope="col">1</th>
            <th scope="col">1</th>
            <th scope="col">1</th>
        </tr>
        <tr class="test">
            <th>1</th>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr class="test2">
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
    </body>
    </html>

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    WHOOPS

    Well, I'll just edit the images then!

    Thanks a lot for your answers and time!

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    BTW: shouldn't this bug be documented somewhere? Maybe at microsoft or something?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sendeman View Post
    BTW: shouldn't this bug be documented somewhere? Maybe at microsoft or something?
    I sent James an email as he has most bugs documented there.

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. For the link too, I never found that list.

  12. #12
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about the delay in replying.

    This does appear to be an undocumented bug in IE8, relating specifically to a background-image assigned to a table-row instead being incorrectly applied to the first-child table-cell.

    I created a reduced test case, and I've created a bug report. I've also documented the issue on my IE8 bugs page.

    Incidentally, Safari 4.0.3 also fails this test; it applies the background-image intended for the table-row to all children (table-cells).

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jameshopkins View Post
    Sorry about the delay in replying.

    This does appear to be an undocumented bug in IE8, relating specifically to a background-image assigned to a table-row instead being incorrectly applied to the first-child table-cell.

    I created a reduced test case, and I've created a bug report. I've also documented the issue on my IE8 bugs page.

    Incidentally, Safari 4.0.3 also fails this test; it applies the background-image intended for the table-row to all children (table-cells).
    Thanks James Also thanks for the heads up on Safari as I didn't notice that. It seems to affect all versions of safari (and chrome)

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys!


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
  •