www.webdeveloper.com
Results 1 to 5 of 5

Thread: consistent text formatting across browsers

  1. #1
    Join Date
    Mar 2007
    Posts
    11

    consistent text formatting across browsers

    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?

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Mar 2007
    Posts
    11
    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?

  4. #4
    Join Date
    Jul 2004
    Location
    Newcastle upon Tyne
    Posts
    116
    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.

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by 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?
    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.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles