SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast henkc7's Avatar
    Join Date
    Feb 2005
    Location
    Groningen, The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it wise to use 'ex' to define measures in a website?

    For accessibility reasons I want to build a scalable website.
    I started designing a site using 'ex' as a standard. Now I want this site to start with a width similar to 770px. I set the body's font-size to 12px. The width of my layout is set to 110ex. Which is similar to 770px in firefox but 660px in Internet Explorer. How do I get these 2 browsers to match?

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use ems instead.
    Simon Pieters

  3. #3
    SitePoint Enthusiast henkc7's Avatar
    Join Date
    Feb 2005
    Location
    Groningen, The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I seem to figure that out now.

    What purpose does 'ex' have then?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ex is supposed to refer to the x-height of the font, i.e., the height of lowercase letters. In reality I think most browsers simply assume that 1ex=.5em whatever the font is, which is not correct.

    The ex unit may be useful (or would have been if implemented properly) when you actually need to refer to the x-height of the text. Like if you want to position something just above some lowercase text or something. I think there are few real-world applications for ex on the web.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast henkc7's Avatar
    Join Date
    Feb 2005
    Location
    Groningen, The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Autisticcuckoo: Indeed, I found that IE is doing the 1ex=.5em calculation. FF does the right thing. Which makes it unusable for this purpose... Em is doing the job now, now this is working I don't understand why we have been building sites using absolute measuring for all these years... This is so powerful when it comes to accessibility.

  6. #6
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might want to set your font size in ems too.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  7. #7
    SitePoint Enthusiast henkc7's Avatar
    Join Date
    Feb 2005
    Location
    Groningen, The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Blain you are right. But unfortunately IE and Firefox have different font sizes then (if, for example, I set font-size to 0.8em). Do you know to which size to set them if I want them to be the same? I know I have to since I just found that my site is not scalable in IE if I don't.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do they have to be the same? Are you expecting lots of users who run IE and Firefox simultaneously, side by side, comparing pixels?

    BTW, there's no guarantee that two instances of IE will look the same, either. If one user has changed the default font size, em-based sizes will differ. But that's OK. You're still basing your sizes on the user's preferred font size.
    Birnam wood is come to Dunsinane

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also declare a specific font size for the document, (like assigning a default font size of 16px to the body tag via CSS for example), and then reference the font size whenever you specify an EM value (for example, if you want something to be 32px, assuming the default is the 16 you specified, as opposed to a user-specified rule, then assign a value of 2em to the style rule--even if the user specifies a larger or smaller font size, the font size you specify will be twice as large or small as the baseline).

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you specify a font-size in pixels (px) on body, then you take away the benefit of using EMs for specifying font sizes, thus you might as well just specify all font sizes in pixels.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Enthusiast henkc7's Avatar
    Join Date
    Feb 2005
    Location
    Groningen, The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see, I set the font-size for the body to 75% now. Which makes it comparable to 12px in standard settings. For some bright reason firefox and ie do the same thing which makes this a good day

  12. #12
    SitePoint Enthusiast henkc7's Avatar
    Join Date
    Feb 2005
    Location
    Groningen, The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone know if it is possible to resize a background when scaling the site as described above? For example:

    I make a background of 300 pixels by 200 pixels but in fact I want to show it at a size of 210 pixels by 140 pixels. So people who scale it larger will still have a sharp background image.


Bookmarks

Posting Permissions

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