Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Vanilla CSS px to em

edited April 2007 in Vanilla 1.0 Help
Has anyone attempted to convert the Vanilla CSS from px to em? I prefer em because you can make the site zoom in and zoom out based on text size. Text can also be resized in Internet Explorer 6.


  • I don't know of any project fitting that description.

    IE(6) is horribly broken. Scaling of px fonts now works in IE7, so I certainly couldn't be bothered to do that job - it's not a small one. Firefox and Opera can scale px fonts, but I can't speak for Safari (I assume it does). If you want to do it and release it to the community that would be cool though :)
  • There is more to em than the scaling of fonts. You can make the entire page scale by using em for everything. Press CTR++/CTRL+- in Firefox and see for yourself.
  • thats pretty cool even tho it get messed oo a little when you go small, i think they for em for the title.
  • It will eventually brake. Most authors make it zoom about 3 times in either direction. I've been using relative sizes to make sites zoom for a while. This article is pretty good (and short) at explaining how it works . It only address on how to size text. But from there, we size any element. div#SingInForm { width: 20em; }. If 1em corresponds to 10px, the width of the div will be 200px. If 1em corresponds to 24px, the width of the div will be 480px. So, when you increase the font size, everything zooms as opposed to the text going outside the bounds of the container.
  • Another example: Again, resize ( CTR++/CTRL+- ) the text.
  • Yes this is the way to go.
    Every stylesheet I do is em sized when relevant. I stick with initial base font sizing in px (rather than pt or mm which would be better) because of broken/garbage IE.
    When tweaking Vanilla style to my need I use em also, but I've never gone through a systematic transposition. You know, testing in major browser and such…
  • It would probably be smarter to have a "default" style in addition to the "current default style" in em because Vanilla is the default theme/style used to create additional themes. Few are comfortable with em, even though it is better than using px values. Though, both will have to be supported and maintained.
  • If this is going to be done, it needs to be default in Vanilla, otherwise no one else will bother... going to be a serious mission though :)
  • @Spooky: FireFox scales em's and px's. You can use ctrl-+/- in the current theme too (in FireFox).

    There have been many discussions on em vs. px. The biggest benefit (seems) to be that ems are
    more consistent across browsers & platforms... All newer browsers however (incl. FF 2, Opera 9
    and IE 7) support the zoom functions irregardless.

    Check it! {Of course IE7 does the worst job... (does not scale images well)}

    FF2: ctrl +/- for 10%(?)
    OP9: +/- for 10%, ctrl +/- for 100%
    IE7: ctrl +/- for 10%(?)
  • Good browsers scale fonts regardless of the initial unit, for sure.
    What spooky means is that other sized containers elements should be sized in em to follow the size of the fonts.
    i.e. the login box would resize according to the font inside rather than folding (overflowing) content.
  • I was working on something like this last summer, but it's really not complete. :(

    I thought this idea was interesting (among many similar snippets to be found): setting the font-side on the <body> tag to 100.01%, then the other elements in ems (follow the link in the article for more).

    Dan Cederholm recommends <body> styled with font-size: small and subsequent elements in percentages for more consistent text sizes across browsers, e.g. h1 { font-size: 130% } (from Bulletproof Web Design). Vanilla only uses a small range of pixel sizes in its default CSS anyhow. Figuring out an equivalent shouldn't be too bad, except for nested items with percentages.

    The challenge is you're playing with an unknown mix of different browsers with different font size defaults. Get stats for your forum to see what is actually being used and plan according to that.

    There should be little difficulty making an alternate CSS file for the default Vanilla theme though, if one just wants to change the font-sizing method. I don't see the problems with inclusion or non-inclusion, though I'd rather the default be something resizeable in all browsers. Or just leave Win IE 5/6 users in the dark with their pixels. ;)
  • edited March 2007
    As far as I know, by default all browsers have a text size of 16px. The sites I make look virtually the same in IE6/7, Firefox, Safari, Konqueror, and I use ems. I prefer 62.5% over 100.01% because it makes the initial 1em = 10px. Everything in Vanilla is px based. The issue here is that if I want to embed vanilla at it will break when text is resized and text will overflow containers while everything around it will not since the site is em based.
  • Somewhat related to this discussion (image resizing in elastic lay-outs)
  • Even if browsers default to 16px, users may change the defaults or they may be running their monitors at differing resolutions. Do they have an effective display of 72 pixels/in (old Mac standard), 96 (Windows), 100-something (many laptops nowadays), etc. — all of which will affect perceived size and readability.

    (not unlike color accuracy on the web... who calibrates their monitors?)

    I agree Vanilla could be more "bulletproof" for text resizing in some areas, but why not work out your own custom style off of the Vanilla default CSS? Your hockey site does it nicely. Maybe a quicker solution is to rework your custom header and navigation area to fit Vanilla (using the Lussumo Banner extension), until the rest can be hammered out.
  • edited March 2007
    Yeah, I know. <h1><span>text</span><img src="banner.jpg"/></h1> Then you hide the text and set the img size in em. That's what it is doing in the banner example. However, you have a dependency on javascript and flash. For more advanced stuff, it's worth it. Other than that, it is not.
  • If anyone tries to this, remember that graphics, such as background, have to be 3 times larger if you want to support 3 times zooming. This is based on the sliding doors technique:
  • dan39dan39 New
    edited March 2007
    It's also important to realize that in CSS, pixels are not absolute units. In CSS, they are in fact relative units that relate to the users' environment. This is particularly important when designing for High-Resolution/HD screens in the future as pixels afford the designer a great deal of consistency and accuracy with layout positioning and can be zoomed without any issues.

    A great description of why pixels are considered relative units can be found here:

    The post also talks about why ems are useful:

    "The other units worth discussing are em and ex. These units are interesting to use primarily because of the text zoom feature of Web browsers. Because some browsers (like Safari and Firefox) just zoom text without zooming other content, expressing everything in these units can give you a way of having content other than text also scale with the font size."
  • edited March 2007
    Ignore ex for now. ex is a little more complicated with no value over em from what I've seen. ex is the height of letter x. Sometimes it's 0.5em. Sometimes it is isn't. However, ex is less prone to rounding errors. Browsers round ex much better.
  • I forgot to mention, I finally embedded Vanilla in KSU Ice Hockey I did it March.
This discussion has been closed.