Bug Tracker

#14819 closed bug (notabug)

Opened February 18, 2014 10:04PM UTC

Closed February 18, 2014 11:22PM UTC

IE10/IE11 not reporting padding with percentage on table-cell

Reported by: epascarello Owned by:
Priority: undecided Milestone: None
Component: css Version: 1.11.0
Keywords: Cc:
Blocked by: Blocking:
Description

See this bug in 1.10.2 and 1.11.0

There looks to be a bug with IE10/IE11 with table-cell layout with paddings that are percentages.

Chrome and Firefox return a pixel value while IE10/IE11 return 0px.

#!div style="font-size: 80%"
HTML:
  {{{
  <div class="pure-g-r" data-XXX="" >
      <div id="test" class="pure-u-1-2" style="padding: 30px 0px 30px 8.33%; cursor: default;" data-YYY="">
            <div data-ZZZ="" >
                <div class="actionsOuter" style=""></div>
                <div class="content" style="">XXXXXX</div>                
            </div>
        </div>
    </div>

}}}

#!div style="font-size: 80%"
CSS:
  {{{
  .pure-g-r {
    display: table-row;
  }

  .pure-u-1-2 {
    display: table-cell;
  }

}}}

#!div style="font-size: 80%"
JavaScript:
  {{{
var elem = $("#test");
var dElem = document.getElementById("test");

console.log("padding: ", elem.css("padding"), " - ", dElem.style.padding);
console.log("padding-left: ", elem.css("padding-left"), " - ", dElem.style["padding-left"]);
console.log("padding-right: ", elem.css("padding-right"), " - ", dElem.style["padding-right"]);
console.log("padding-top: ", elem.css("padding-top"), " - ", dElem.style["padding-top"]);
console.log("padding-bottom: ", elem.css("padding-bottom"), " - ", dElem.style["padding-bottom"]);

}}}

JSFiddle: http://jsfiddle.net/d796Y/2/

Attachments (0)
Change History (1)

Changed February 18, 2014 11:22PM UTC by dmethvin comment:1

_comment0: Yes, this does look like an IE issue and independent of jQuery. \ \ http://jsfiddle.net/d796Y/3/ \ \ Is this from real code? HTML like this seems like "they told me not to use tables for layout so I use the `display: table*` CSS instead." \ \ We can report this to Microsoft but it's too much of an edge case to fix in jQuery, even assuming we could. → 1392766051275025
component: unfiled → css
resolution: → notabug
status: new → closed

Yes, this does look like an IE issue and independent of jQuery.

http://jsfiddle.net/dmethvin/d796Y/4/

Is this from real code? HTML like this seems like "they told me not to use tables for layout so I use the display: table* CSS instead."

We can report this to Microsoft but it's too much of an edge case to fix in jQuery, even assuming we could.