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
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.
0
This discussion has been closed.
Comments
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
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…
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%(?)
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 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.
http://lussumo.com/community/discussion/5680/new-swfflash-image-replacement-technique-swfir/
(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.
A great description of why pixels are considered relative units can be found here:
http://webkit.org/blog/?p=57
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."