Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] px versus em, who wins?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #151846
    CrownRock
    Participant

    Likely I missed it when this topic was addressed.

    I started coding HTML in 2009 and learned CSS later that year. In my first class the instructor favored elastic layouts using em with font-size and % for width and height of divs and other HTML elements. Then my next instructor favored doing everything in pixels in a fixed layout.

    Today I’m seeing most HTML elements that are containers using elastic layout and other elements, like fonts, using fixed or elastic.

    Is there a “universal rule” or strong opinions for when to use elastic attributes and when to used fixed attributes in laying out a page? Does it depend on the type of content? How does one avoid overlapping of content that occurs in elastic layout when viewed at higher zoom levels? thanks!

    #151873
    tomasz86
    Participant

    What you may want to be careful about is using ems for things like borders. Normally you would convert 1px to 0.0625em but if the font-size of the element is smaller than 16px then the border may not be displayed at all. This behaviour seems to be inconsistent depending on the browser you’re using.

    Check: http://codepen.io/tomasz86/full/EmuCx

    The last div’s border won’t be displayed at all in old Opera (Presto) and Webkit browsers. It will be displayed in IE and Firefox.

    #151926
    CrownRock
    Participant

    thanks to both of you for your replies ;-)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.