CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer-8
Daft
Daft

Reputation: 10964

CSS border and padding not working in IE 8 + 9

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!

Upvotes: 0

Views: 331

Answers (4)

id1
id1

Reputation: 221

IE 8+ use css style: border, padding and display, likely problem in you html structure.

Upvotes: 1

the digitalmouse
the digitalmouse

Reputation: 222

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>').

Upvotes: -1

ChrisV
ChrisV

Reputation: 1309

  • 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.

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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.

Upvotes: 6

Related Questions