2

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>
ingredient_15939
  • 3,022
  • 7
  • 35
  • 55
  • Do you really have *one* table cell in your *real* page? – meder omuraliev Sep 06 '12 at 18:13
  • 1
    Interestingly it is only when the browser and the page are in IE 8 mode - changing *either* (in IE 8) results in the local page alerting 0px correctly. – Sean Vieira Sep 06 '12 at 18:13
  • maybe your IIS is adding a header like `X-UA-Compatible=EmulateIE7` or something – Rodolfo Sep 06 '12 at 18:14
  • This is occurring on 2 different machines, one has IE7 on it, the other IE8. They're both behaving the same - both show 0px using jsFiddle and 1px on the local page (which isn't using IIS just my test html file dragged into the browser - however it is also happening in my IIS project). meder: this is a simplified page to demo the problem. :) – ingredient_15939 Sep 06 '12 at 18:19
  • @SeanVieira, how exactly do I change the mode? Can you show me the code which makes it behave properly? But what about IE7 (and possibly IE6 if that does it as well)? I'm still baffled why it works in jsFiddle but not here. – ingredient_15939 Sep 06 '12 at 18:22
  • @SeanVieira I see.. if I remove the doctype, it goes into compat. mode and returns 0px. In "standards mode" (whatever that means to IE) it returns 1px. Is that what you mean? Still doesn't explain why it works in jsFiddle tho. :) – ingredient_15939 Sep 06 '12 at 18:32

1 Answers1

3

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.

John Koerner
  • 37,428
  • 8
  • 84
  • 134
  • ah.. that's interesting. Yes, it's setting TD (and a bunch of stuff) to padding:0 in normalize.css. That'll mean adjusting my CSS a bit to suit, but it seems the only way. Looks like using a "normalizer" is pretty common practice - never knew that. :) Thanks heaps! – ingredient_15939 Sep 06 '12 at 18:36