jqueryinternet-explorercellpadding

In IE7/8, jQuery tells me cellpadding=0 cells have padding of 1px

This is a strange problem - in the following jsFiddle, jQuery returns 0px for a cell's padding, when using IE7 or IE8, which is correct:

http://jsfiddle.net/ZmfHE/

However, when I test this locally in a simple HTML page in IE7 or IE8 (code below), jQuery tells me the padding is 1px. Can anyone see why this is happening? The code is the same as in jsFiddle, unless I'm missing something?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <script src="jquery-1.8.1.min.js" type="text/javascript"></script>
    <script>

      $(document).ready(function() {
        alert($("td").css("padding-left"));
      });

    </script>
  </head>
  <body>

    <table cellspacing="0" cellpadding="0" border="0" width="400">
      <tr><td>some text</td></tr>
    </table>

  </body>
</html>
Solution

  • The fiddle is applying normalize.css to the page, which is why it is coming back with 0. If you disable the styles from normalize on the fiddle using the IE development toolbar, it will come back with 1px too. Looking at the IE 8 developer bar, you can see that it think it should have 1px padding when the normalize is taken off in the fiddle or when you run it locally:

    Padding Image

    So the solution in your environment would be to use normalizing CSS to apply the formatting you desire.