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
  • #151846

    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!


    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.


    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.


    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.