CSS border and padding not working in IE 8 + 9

Question

I have the following DOM and CSS:

var tableRow = jQuery(
    jQuery('<tr/>')
        .addClass('tr_class')
        .append(
            jQuery('<h3/>')
                .text('Title')
                .addClass('first_class second_class')
        )
).appendTo(table);


.tr_class{
    padding: 0px 0px 2px 5px;          /*not working*/
    display: block;                    /*not working*/
}


h3.first_class {
    font-weight: bold;                /*working*/
}


h3.second_class {
    border-bottom: 1px solid #5f7836; /*not working*/
    padding: 3px;                     /*not working*/
    display: block;                   /*not working*/
    font-size: 11px;                  /*working*/
}

In IE8 + 9, several of my CSS rules are not working.

border , padding and display .

Can anyone explain why this might be?

Here's a jsfiddle with the rendered HTML.

UPDATE

I appreciate all of the comments and suggestions, I'm going to look into fixing my mark up...

ANOTHER UPDATE

You were all correct! My horrendous mark up was the culprit here. Everyone's input was much appreciated!

Answer 1

This is not only IE 8+ issue but it won't work in any browser.

You can't have padding in table rows. Instead you need to add the padding styles in your td .

And I can't see that you're appending any td in your code so I could modify that.

Thus, ensure to put padding styles in your td instead of tr .

And just be ensure to put td in your tr and do the rest things like border and anything you want on it.

Answer 2

• Several css properties, padding and border among them, are invalid when applied to tr elements

• You are nesting an h3 directly under a tr , which is invalid HTML. tr elements may only directly contain th or td .

Answer 3

IE 8+使用CSS样式：边框，填充和显示，可能是HTML结构中的问题。

Answer 4

My first thought is that you have the HTML tags wrong. It is

<tr> and <h3> for starting a tag, and </tr> and </h3> for closing/ending a tag.

The second is the sytnax of the jQuery you are using. Try the more modern syntax, such as:

$('tr') instead of JQuery('<tr>').