Hi -
I've got a draft design (still in progress) here (http://apps.cpe.ky.gov/temp_docs/prototypes/kyvl/default2.htm).
I've noticed that in IE, the font-size and the line-height is much larger (about 4px) than the size in Fx. I know there are differences between browsers, but.... is there a way to normalize how this displays through a conditional comment? Or, am I stuck with the variance?
KDLA
ray326
05-24-2007, 03:47 PM
I think the normal tactic is to set the default in absolute units like px then use % for the alternate sizes.
I'll try that. I hadn't experimented with the %'s yet. Only the px and em combination.
WebJoel
05-24-2007, 04:22 PM
or, default ALL text to a maximum (or a minimum even??) size, then re-state it again, thus, sizing-down/up from defaulted value. It is like the
* {margin:0 padding:0}
hack. -Make them be ZERO first, then, re-state to the size that you really wanted.
I have had good luck stating :
body, html {....font-size:100%; font-size:1.0em;....}
whereby any/all fonts in body, html are maxed 100% (irregardless of browser-specific default size), then re-sized back to what I want. Otherwise, "1.0em" might be 14px in browser-brand A, but 15px in browser-brand B..
This has solved alot of problems for me with how text looks in Opera vs. IE and Fx vs. IE. Not perfect, -but saves me a LOT of hassle when doing horizontal navigation lists x-browser.
some 'how to' page I visited states to set the sizes to font-size:90% and then, re-sizes to 1.0em (in body, html), and if/when necessary, re-state font-sizes for specific DIVs, ULs, etc. That is how my 'default template; spits it out now.
(p.s.: -you write good code :) )