1
main {
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 76%;
}

For some reason the CSS above works on Chrome, Firefox, iOS, Safari but not Internet Explorer, nor Windows Phone, Blackberry etc. The effect I was trying to achieve is to give a little offset between the edge of the page and the div. I'm using padding instead of margin so I can use box-sizing to eliminate the problem of the div overflowing.

Any ideas why?

Example:

Sample image

Etheryte
  • 24,589
  • 11
  • 71
  • 116
jskidd3
  • 4,609
  • 15
  • 63
  • 127
  • @j08691 Tested on version 10, though I imagine it doesn't work on all versions. I should also point out that I am using a HTML5 shiv to make sure the HTML5 main element works as expected – jskidd3 Mar 31 '14 at 20:12
  • 3
    Just a note, -moz-border-box should be -moz-box-sizing – Huangism Mar 31 '14 at 20:18
  • @Huangism Thanks, silly evening mistake – jskidd3 Mar 31 '14 at 20:18
  • Added an image to help explain what I mean, I know the difference is slight but the point still stands – jskidd3 Mar 31 '14 at 20:22
  • I might suggest simply adding padding to the element that contains 'main'. – captainrad Mar 31 '14 at 20:27
  • Some resources.. http://msdn.microsoft.com/en-us/library/ie/dd183522(v=vs.85).aspx and http://caniuse.com/css3-boxsizing – khollenbeck Mar 31 '14 at 20:28
  • Also this may be a duplicate ... http://stackoverflow.com/questions/11608291/box-sizing-border-box-for-ie8, but from everything I have found so far, it looks like it should work in IE8+ – khollenbeck Mar 31 '14 at 20:28
  • For Chrome it is `-webkit-box-sizing: border-box;`, so maybe it works in Chrome because it actually does not recognise this property. Have you tried removing the `box-sizing` altogether? – GolezTrol Mar 31 '14 at 20:44
  • Which version of Windows Phone? Windows Phone 7's browser is based on the IE 2 engine, or something else of old. WP8's one is much better, although it still might not support everything IE 10 and 11 support. – GolezTrol Mar 31 '14 at 20:45
  • Do you also have `main {display:block}` somewhere in your stylesheet? Some browsers might not recognise `main` as an element. And for very old IEs, you may also need to do `document.createElement('main');` See [Supporting New Elements in IE](http://blog.whatwg.org/supporting-new-elements-in-ie). – Mr Lister Apr 01 '14 at 06:27

0 Answers0