CODEWITHSUNDEEP
jquerycss
user3334332
user3334332

Reputation: 73

jQuery width() get/set inconsistency cross different browsers

I have TH element, which has both left and right padding set to 18px, and I try to get its' width by jQuery, convert obtained width in px to % and set the width of this element to computed percentages.

var originalWidth = $("#thElement").width();
var newWidth = (originalWidth / $("#thElement").parent().width()) * 100
$("#thElement").width(newWidth + "%");

On the first line in code above, all browsers returns the width without padding. It's OK.

But on the third line, only Firefox sets the elements' width to computed value again without padding. The result is, that in IE11, Chrome and Opera the width is 36 px less, because part of the new width is "consumed" by padding.

Any idea, how to solve this and ensure consistency across all these browsers?

EDIT: I am using jQuery 1.11.1

Upvotes: 3

Views: 486

Answers (1)

Lucas Rodrigues
Lucas Rodrigues

Reputation: 1192

You should set your box-sizing property on CSS as different browsers have different standards if this property is left undeclared, and that impacts whether padding and border are calculated as part of the element's size.

#thElement {
    box-sizing: border-box;
}

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Upvotes: 2

Related Questions