Why does jQuery.css('width') return different values in different browsers? -


i've written jquery code reads width of columns in table , applies them table.

on page, there table this:

<table style='table-layout:fixed;'>      <tbody id='mytablebody'>          <tr>              <td style='width:100px;'>foo</td>              <td style='width: 40px;'>bar</td>          </tr>      </tbody> </table> 

i've written following jquery code read css width properties of table:

var colwidths = []; var cells = $('#mytablebody').find('td'); (i = 0; < cells.length; i++)     colwidths.push($(cells[i]).css('width')); 

after code runs, expect colwidths [100, 40], , in firefox, is. however, in ie8, [92,32]. breaks page in ie depends on values being correct.

i believe may pertinent table contained within jquery-ui-tabs element, , know jquery-ui css can weird things, wouldn't surprised if has it.

why jquery.css('width') doesn't return value expect in ie8? can it?

jquery normalizes browser handling in situation via $().width().

css("width") different attribute / property not normalized instead retrieves css value element(s). width() "actual size in dom" doesn't take padding , margins applicable consideration css("width") retrieves css value. others have mentioned below answer, .outerwidth() .width() accomplishes, includes padding , margins represented native browser.

in short:

$(this).width() != $(this).css("width") 

a parallel example this:

$(this).css("width") 

is closer

$(this).attr("name") 

than $(this).width() or $(this).height().

edit:

here tabbed on , saw illustrates difference:

$(this).css("height", "auto"); alert($(this).height()); 

the alert numeric value (pixels).


Comments

Popular posts from this blog

delphi - How to convert bitmaps to video? -

jasper reports - Fixed header in Excel using JasperReports -

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -