Bart Bart - 7 months ago 22
Javascript Question

Border-color not working in IE

I've tried as long as I could to solve this problem before posting but I just can't get it to work.

I have a button for deleting a table row that asks for confirmation before deleting it and highlights the row with a red background/border. In Chrome and Firefox this works as it should but not in IE, the background works but the border-top/bottom don't change color.

When changing the border-color property beforehand it works, so I think the problem is in the jquery css function.

In JSFiddle I created a small example of this problem and in IE it didnt work and in Firefox/Chrome it did, then I saw a topic where they said add the border to the td. I did this and in Chrome the border stopped working on the td, and in IE the border started working on the opposite element of the td.

JSFiddle

<table width='100%' style='border-collapse:collapse;'>
<tr style="border-top:1px solid #DDDED9; border-bottom:1px solid #DDDED9" class='tr'>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>

<p>
<button class='button'>Click</button>
</p>


jQuery

$('.button').on('click', function(){
$('.tr').css('border-top-color', 'red');
$('.tr').find('td').css('border-bottom-color', 'red');
});


If someone could help me with a working solution in all three browser that would be great.

Answer

Define border first, then add border color.

td {
   border-bottom:1px solid transparent;
}

OR Add in Jquery 'border-bottom', '1px solid red'

$('.button').on('click', function(){
    $('.tr').css('border-top-color', 'red');
    $('.tr').find('td').css('border-bottom', '1px solid red');
});

why don't you just change the border color of tr for exampe

$('.button').on('click', function(){
    $('.tr').css('border-color', 'red');
});

Fiddle

Comments