Forum Moderators: not2easy
#left {
width: 13em;
float: left;
}
#other {
margin-left: 13em;
}
<div id="left">
<p>some stuff that goes on the left</p>
</div>
<div id="other">
<h1>Other Stuff</h1>
<p>the rest of the stuff</p>
</div>
This will work fine in Mozilla, Firefox, and probably Opera. In IE, however, I *think* (maybe someone can confirm) it takes its font size off the first element. So the ems in "left" and "other" are not equal and the effect is not as desired and can be off be 20% or more.
If you switch to pixels or percent, it all works fine.
Now here's the trick to make IE work right
Add one more declaration to your body tag:
body {font-size: 100%;}
Now the layout looks great in IE, Mozilla and Firefox.
Tom
His solution is to set the reduction factor using percentage on <body>, so that body text does not need to go below 1.0em. Thus,
body {font-size: 76%}
p,li {font-size:1em}
Upon reflection, that doesn't make sense, but it was so. Do you know why that might be?
Tom
body {font-size: some%;}
Basically, set at 100%, which is what I want anyway, it works fine in all browsers tested (basically Firefox and IE), so I pretty much quit there. But I didn't notice that percentages other than 100% threw Firefox off.
Since <body> is already the containing element for the divs in question, why would
html {font-size: 100%;}
body (font-size: 200%;}
div {font-size: 1em;}
be any different than without the html declaration at all?
Mr Briggs ran across the solution 76%, and he liked the size of it, but in actual fact it is an IE bug and you should (if you care about users and their defaults) set it to 100% then adjust your following em's/percentages accordingly
i.e he suggests using body : 76%... but then inherited sizes are from then on based on 1em / 100% of 76%
but that means an IE (majority) user who does have their default pixel size set lower or higher than default are no longer seeing the page based on 100%, but 76%... (it's OK for most other browsers as they "zoom")
So what you could do is set the default body to 100% (as long as it's a percent value you've "squished" the bug) you can then happily use 0.76em or 76% for the rest of the text and that will apply the same to all browsers but will keep the the MS users on a par....
you can still specify your "container/wrapper" text as 76% if you so wish but you are no longer interfering with the M$ pixel default which bases itself different from everything else, it relies on 100% equalling the default pixel text size setting the user has requested. They may still not like you for setting small fonts but at least they will be able to use their text-size "smaller" or "bigger" option 'cos of the percentage body setting
oh... it's a minefield ;)
Suzy
I would have to test more, but the thing that I found curious is that the layout in Firefox was disturbed by percentages other than 100%. I didn't investigate far enough to figure out why.
Tom
interesting what you say about firefox.. I will test that too..
at the minute I'm having a distinct problem with javascript styleswitchers trying to do the browsers job...
is anyone else having IE image cache/hover or a browser override problem with this?
I'm looking at mezzoblue (it'll probably be the death of me ;)), which offers both percentage fonts and a switcher but there does seem to be a conflict.. would appreciate some extra thoughts
Suzy
