/    Sign up×
Community /Pin to ProfileBookmark

consistent text formatting across browsers

I’m working on [URL=”www.cidic.info”]my site[/URL] 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?

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelApr 12.2007 — 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. */

[B]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;}[/B]


</style>[/QUOTE]
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.
Copy linkTweet thisAlerts:
@cidicauthorApr 13.2007 — 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?
Copy linkTweet thisAlerts:
@ToonMarinerApr 13.2007 — 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.
Copy linkTweet thisAlerts:
@WebJoelApr 14.2007 — 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?[/QUOTE]

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

<p style="[B]letter-spacing:0.2em;[/B]">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 <h[I]n[/I]>"

Same can be applied to header tags as well.
×

Success!

Help @cidic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...