Forum Moderators: not2easy
When seen in both IE 6 and Firefox, size is identical on the screen.
Then, I have parts of the layout that require smaller size so for those DIVs I set font size to 90%.
Firefox reflects this change nicely, while IE does not.
I wonder why?
I also wonder about best practices in font size control.
Thanks
what is your doctype and is there any tables involved in the hierarchy between the 80% body and 90% div?
I also wonder about best practices in font size control
sounds to me as if that is OK what you are doing.. as long as you know that font-size is inherited, which your post above suggests you do, then percentage "control" is possibly the best way, as that allows user resizing - so the control is relative and is the best route to go IMHO.
[edited by: SuzyUK at 5:32 pm (utc) on Dec. 11, 2007]
It may look the same in IE6 and FF but what are the settings in font-size for the browser?
Even if you set it in the CSS to something the browser setting can overwrite that.
To get an accurate test you would have to have all the browsers default font-size setting the same, and since they are different in each that will be near impossible to do.
You can't perfectly control font size stuff since the end user still has some control over the font sizes. just try to make it all relative.
You will drive yourself crazy trying to get them all looking the same because someone with different settings then what you are testing in won't get the same look.
[edited by: Demaestro at 6:06 pm (utc) on Dec. 11, 2007]
It's kind of strange you say that your firefox and IE fonts looked the same, since IE uses 5 different settings using pts as the base (and those are the only options for zoom), and firefox uses any setting of pixels you want as the base. It's unlikely, but no where's near impossible, that both the firefox pixel setting, and internet explorer pt size were the same. Nonetheless, you must realize, and support, the fact that all users will have and prefer different text sizes, so you should cater to that.
Some sites cater to it by using javascript text resizing (perhaps only because they were forced to since they stupidly decided to use pixel based text sizing), but I assume that the user is smarter than a monkey, and can set their default font size to what they want, so it works on all the pages they visit.
I'm not sure if it's the same issue, but I've had IE cause problems with em measurements, and the fix was to set font-size:100% on the body.
[edited by: Xapti at 6:38 pm (utc) on Dec. 11, 2007]
It's pretty much pointless to be setting base font sizes of a webpage to something like 80%.
What that's doing is essentially saying "okay, let me take your default browser text size, the size you prefer, and then shrink it by x%
pointless = I don't think so.. but that of course is your opinion. and while I agree in the main that you should ideally go for 100% of the users default, it is an ideal (right boss, right site) scenario. You are assuming that at least users even know how to adjust their browser default font-size (devil's advocate comment;)). Isn't it easier to click "zoom" or CTRL++ (as in shortcuts rather than wading through pref settings..)
It has been shown over quite a long period of time that mostly only users of Opera/FF (anything other than IE) generally know, or want to know, how to change their default/personal prefs. - IE users are now getting there, and I'm talking Jane/Joe Public, not us lot! - That's why 'designers' have been 'fixing', or at least trying to fix design sizes via pixels for years, and it's no coincidence that now IE7 has "zoom", it's backfiring slightly ;)
You can use something like font-size:80%, or it's more conveniant to use EMs in my opinion, .8em,
- %, em's and ex's - are virtually the same unless you want to take font-family as well as inheritance (.."who's your daddy" to quote a previous mod ;)) into this too?
An
emex80% size should be used for small notes, copywright notice, descriptions, or things like that,
again - iyo perhaps - hehe, you know it wasn't so long ago we were being advised that 67.5% was "the optimum" :o - and while I personally didn't subscribe to that pov either.. imo it's pretty much the same as a response to the question as to which screen resolution is best to design for. Actually 67.5% probably suited smaller resolutions that were predominately used previously. IMO, you have to go "middle for diddle" given the best information you have at the time, there may be no "perfect" answer, we don't have stats, just usability studies and good old research - sometimes you just need to trust that your users (or at least the majority of them) know how to set their own prefs, or at least click "zoom"
Now the reason I use ems is because it can also be used for width and height of elements, so if I want my container to be the same height as the text (assuming that lets say there was an image larger than that height, or something),
That's a big (and imho) misleading assumption. This will indeed work but only if it's an image or something of a known height in order to guage the base - which font and therefore number of lines (line-height) will never be, because of the resize capability (that'll be the catch 22 for fixed designers?)
You can still use ems for width/height if you wish and size your fonts via %, you can mix them, they are so close no-one will notice, this is because they are both relative (to font-size/family/resolution) as are other methods, but none of them will beat PIXELS! even though that method is not yet 100% perfect (IE6 and below won't resize pixels) it should not be discounted, now we are going forward with IE7.
Pixels are relative too, they are relative to the users resolution and most users as far I know understand the concept of pixels those little dots that make up a screen..just how does a camera, wide-screen TV, zoom in on them? - I'm guessing it doesn't really matter... but it's the same reason as Opera, IE (and now FF?) use Zoom, they can now all resize a 'screen', images included as that's what users want - a magnifying glass scenario - if not it's very close and was always the likely outcome regardless of our earlier efforts to make sure everyone could be happy using CSS ;)
I'd assign it a height of 1em. I could do the same thing with widths, except the one catch is since most fonts are not monospaced, you have to measure your text length in ems individually, since QQQQ WWWW QWWQ QW would be longer than iiii iill ilil li.
Your example is confusing, or at least I'm not understanding it :o - as earlier mentioned it only matters the width of the capital "M" or "X" as regards the font-family not of the width of the individual letters. - Font-Family, "Georgia"'s "M" will obviously be different from "Arial"'s "M" in width and height.. that's where the difference comes in, in order to set your width consistently in EM's you would need to use a consistent font-family on the 'parent/ancestor' element and the width would be based on a multiple of the one letter?
All in all it's about letting the pages flow and letting the user have control, which they have more of these days - you should never try to control height, because which ever unit you use, you would have no idea of the width of a screen a user will be using, and will therefore have no idea how many lines of text/content will make up the height.. if it's fixed you may very well lose some content unless of course overflow is used properly..
And lastly, imo, and has already be said, designs/sizing will always look different x-browser - imho this is as much to do with different browser interpretation of recommendations as it is to do with said browser users free-will!
all this led to me suggesting (in earlier shorter reply ;)) that using % might be easier to understand when it comes to getting to grips with inheritance, the rest will follow naturally perhaps because of the nature of modern browsers "zoom" functions?
ahhhh, so much from one little question
-Suzy
[edited by: SuzyUK at 12:02 am (utc) on Dec. 12, 2007]
