consistent text formatting across browsers

[cidic]

I'm working on my site and the text formatting varies from ie, to ff, to safari. and I want it to be as consistent as possible. The main thing i want to fix is <span class="style4"> which I use for headings and dates, it doesn't seem to work properly in ie or safari, but works in firefox. what can i do?

[WebJoel]

Sometimes the best thing is to start off with a common font-size, then re-size according to page-needs. I have been having good luck with something like this to start my STYLE declarations:

<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 5px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

Notably, in BOLD. Some tweaking per~page required to acheive a desired mood, but this has been making my font in IE and Fx very similar. The 'font-size:90%;' re-sets default-whatever amount, and then you re-set again for the elements, in em-size usually, and the font come out alot closer x-browser.

[cidic]

i'm trying to make the headings smaller font with increased letter spacing, i don't think the above code will do that will it?

[ToonMariner]

bottom line is that different OS's render things oh-so-slightly differently. You can't everything exactly alike and is some cases someone will use their own settings that override yours.

So my advice would be to not worry too much if yout typography is not identical on every platform/client.

[WebJoel]

i'm trying to make the headings smaller font with increased letter spacing, i don't think the above code will do that will it?

Then you may need to edit the template I provided, and for the affected text, this:

<p style="letter-spacing:0.2em;">This text is very widely spaced"</p> (need to adjust spacing value to suite taste)

Here, I use "inline" but you could apply this to the STYLE and make it "external" if you want to apply this to all use of <p> or <hn>"

Same can be applied to header tags as well.