In IE, Why don't cell borders become colored when a class is added to a row?

Question

In a Gridview I'm adding a row CSS class depending on certain criteria. This class adds an inset box shadow to the border of the row, and it works fine in FireFox. In IE it adds the row shadow, but it adds it at the cell level so the cell borders on the left and right of a cell is highlighted as well. This shows each cell border with the insert glow when I only want the row highlighted.

Chrome acts like IE, but with out the inset box shadow. It only colors the border.

As I said, it looks good in FF. Any ideas on how to correct this in IE ... and Chrome, where the box shadow only colors the border, but I can live with that.

Css Class

.rowGlow
{
border-collapse:separate;
border-color:#ff0000;

box-shadow:inset 0 0 3px 1px  #ff0000; 
-moz-box-shadow:inset 0 0 3px 2px #ff0000;
-webkit-box-shadow:inset 0 0 3px 2px #ff0000;
}

Row Tag

<tr class="rowGlow" style="color:#333333;background-color:#F7F6F3;">

jQuery to add css class to row, depending on a hidden value in the row

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {if (args.get_error() == undefined) {alertTest();}}

    function alertTest() {
        $(document).ready(function () {
            $('tr').each(function () {
                if ($(this).find('input[type=hidden]').val() == 'False') {
                    var du = <%= DateUpdates() %>;
                    if(du){$(this).addClass('rowGlow');}
                }
            });
        });
    }

    alertTest();

This is what I ended up with. Updated jQuery to this to add two additional CSS class', one for the first TD and one for the last TD:

$(this).addClass('rowGlow').find('td:first-child').addClass('firstCell');
$(this).find('td:last-child').addClass('lastCell');
.rowGlow
{
-webkit-box-shadow:inset 0 -3px 3px -1px #ff0000,inset 0px 3px 3px -1px #ff0000;
-moz-box-shadow:   inset 0 -2px 3px -1px #ff0000,inset 0px 2px 3px -1px #ff0000;
box-shadow:        inset 0 -3px 3px -1px #ff0011,inset 0px 3px 3px -1px #ff0000;    
}

.firstCell
{
-webkit-box-shadow: inset 3px 0px 3px -2px #ff0000;
-moz-box-shadow:    inset 3px 0px 3px -2px #ff0000;
box-shadow:         inset 3px 0px 3px -2px #ff0000;
    }
.lastCell 
{
-webkit-box-shadow: inset -3px 0px 3px -2px #ff0000;
-moz-box-shadow:    inset -3px 0px 3px -2px #ff0000;
box-shadow:         inset -3px 0px 3px -2px #ff0000;
}

<!-- For IE8 and lower I have this conditional -->
    <!--[if lt IE 9]>
    <style type="text/css">
        .rowGlow {
                background-color: #F9ACAA !important;
                /* color: #000!important; */
        }
    </style>
<![endif]-->

@Greg My Chrome (v21 W7) doesn't render a thing of that box-shadow (probably because the browser is told not to on ``s) nor border. Maybe you need to resort to PNG images as backgrounds of the ``s instead. — Henrik Ammer, Aug 27 '12 at 16:53
@aspirinemaga ... Sorry, but should have mentioned. This is being generated from a gridview. The html being generated is valid. what are you looking for? — Greg, Aug 27 '12 at 17:47
@HenrikAmmer ... I'm adding the class to the TR via a jQuery find(). Code has been added. — Greg, Aug 27 '12 at 17:48
The problem is still though that the browsers with the problem does not support the feature so you need to either gracefully degrade with complementary CSS for IE or Chrome or go for a PNG version. There is the answer below regarding styling with first/last-child but since you are using a box shadow it will be hard to replicate the way it looks in Firefox since then you need to move the box-shadow to the left and right differently so that it does not look the way it does in IE currently. — Henrik Ammer, Aug 28 '12 at 10:06
If I have time I'll try the png to keep the look for down grade browsers, but need to move on with this. Thanks for the idea!! — Greg, Aug 28 '12 at 14:41

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

What about trying to style the :first-child and :last-child TD in the row to be something different.

Here is the link on the stack. You will, however, have to alter your jQuery to accomodate the individual td cells, which will be a little bit more work.

edited May 23 '17 at 12:12

Community

1
1

answered Aug 27 '12 at 18:21

ZombieCode

1,646
2
24
46

Added your suggestion and its looking good now. Updated jQuery to this to add two additional CSS class', one for the first TD and one for the last TD: $(this).addClass('rowGlow').find('td:first-child').addClass('firstCell'); $(this).find('td:last-child').addClass('lastCell'); – Greg Aug 28 '12 at 14:23

In IE, Why don't cell borders become colored when a class is added to a row?

1 Answers1