Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Indianapolis IN
    Thanked 2 Times in 2 Posts

    Which should I use em or px?


    I'm probably opening up a can of worms here! But which is more favorable when creating css layouts, em or px? Or doesn't it really matter anymore?

    I understand that px is more precise but em is made to be elastic on the users setting so that any interfaces used in the webpage won't break.

    Frankly the math is hell using em! px is much easier.

    I'd like to know what the more experienced community thinks!

    I appreciate your input!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,847 Times in 1,831 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Splendora, Texas, United States of America
    Thanked 293 Times in 287 Posts
    Quote Originally Posted by MrBiggZ View Post
    I'd like to know what the more experienced community thinks!
    Using ems is much more kind to the user since they can increase the text size without zooming the entire layout. I force the font size of all Web sites to 18 using a Firefox setting so that I don't have to strain to read them at a distance (of about 1.5 feet) and many sites break because they were designed using pixels.

    Unfortunately, I often encounter poorly designed Web sites that are broken by this and have to resort to a Firefox extension so that I can quickly toggle the "Minimum font size" on and off. Then I have to strain to read again.

    For some examples: I often see text disappearing beyond the boundary of an overflow: hidden element or overlapping other text (e.g., Facebook). Sometimes white text will escape a box with a dark background onto the white background outside of it and I can't read it (e.g., The Huffington Post). Other times people create custom, pixel- and image-based boxes that look broken when the box size expands (e.g., Dream.In.Code); this is probably the hardest issue to address since CSS and vector graphics support in browsers hasn't caught up yet. Finally, when people restrict their layout width using pixels, this also causes problems with a lot of text being squeezed into a small area horizontally as the text expands vertically when it otherwise could have used up more horizontal screen real estate (e.g., (NarutoFan) Naruto Forums).
    For every complex problem, there is an answer that is clear, simple, and wrong.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts