4 replies [Last post]
thesoundsmith
thesoundsmith's picture
Offline
newbie
Monterey, CA, USA
Last seen: 6 years 15 weeks ago
Monterey, CA, USA
Timezone: GMT-7
Joined: 2008-03-28
Posts: 3
Points: 0

Hi, folks. I am having difficulties getting fonts to display at similar sizes in IE vs FFox. I have added 'default zeroing-ing' code at the beginning of the styles , but it seems to make no difference. What am I missing? You can view the page at www.thesoundsmith.com/index.html, it looks the way I want in IE (and my HTML app, Site-Aid, which only knows IE (sigh...) but the header fonts are displaying smaller than I wish in FF and Netscape.

I know some of this is clumsy, I am just transiting to CSS and have a lot of misunderstood stuff, plus I'm a musician, not a coder anymore, so I really don't do this on a daily basis. But I want the site to look correct. Thanks for the help.

David Kempton
The Soundsmith

The Soundsmith-Jazz and Cool Music

html {height: 100%}

body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em;}

a {text-decoration: none}
a img {border: none}

body
{background-color: #9533C8;
}
h1 {font-size:200%;
font-family: verdana, arial, helvetica, sans-serif;
font-variant: small-caps;
text-align: center;
width: 1000px;
}

h2 {font-size: 110%;
font-family: verdana, arial, helvetica, sans-serif;
text-align: center; margin-top: 80px;
font-weight: bold;
font-variant: normal;
color: #FFFF00}

h3 {font-size: 100%;
font-family: verdana, arial, helvetica, sans-serif;
text-align: center;
font-weight: bold;
font-variant: small-caps;
color: #FFFF00}

p {font-family: arial; text-align: left; font-size: 100%; font-weight: bold; margin-left: 1cm; margin-right: 1cm;}
p.center {text-align: center}
h1 {visibility: hidden}
.yellow {color: #FFFF00}
.white {color:#FFFFFF}
.blue {color:#0000FF}
.green {color: #00FF40}
.orange {color: #FF8000}
.black {color: #000}

a:link {color: white}
a:visited {color: white}
a:hover {color: aqua}
a:active {color: blue}

.nowrap {white-space: nowrap; background-color: #9533C8}
DIV.hedd {
position:absolute;
left:316px;
top:4px
}

DIV.hed2 {
position:absolute;
left:349px;
top:60px;
}

DIV.txt {
position:absolute;
left:12%;
top:490px;
}

DIV.fotr1 {
position:absolute;
left:9%;
top70px;
}
DIV.fotr2 {
position:absolute;
left:35%;
top80px;
}
p.ccsok {
position:absolute;
left:680px;
top:10px
}

Click my head to enter the site

David "Dasher" Kempton

Welcome to the musical website of Soundsmith Productions
and David "Dasher" Kempton.
The Soundsmith offers a great musical experience.
World-class jazz, R&B and soul, plus some unique musical styles,
including Electronic Impressionist and World Fusion.


Watch the "Dino and David Do It All" Demo. Check it out!

Learn to play jazz (and R&B, etc.) on the mighty Hammond organ.

Or just come on in and look around.


The Soundsmith Logo

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

(1) Don't get too worried

(1) Don't get too worried about small differences between browsers. Different OS don't have identical fonts and even when they do, they render things slightly differently. Also different browsers on the same OS render the same font at the same size with slightly different spacings.

(2) These are my rules of thumb
- 100% == 16px
- IE multiplies all percentages then tends to round up.
- FF multiplies all percentages then tends to round down.
- Opera multiplies, rounds (tending down) for each percentage required to get to the final font size.

To get good matching of font sizes decide on pixel size you want, calculate the percentage required to get that pixel size. Use 3 or 4 significant digits, rounding up at the end.

e.g. to set default font-size to 12px. font-size: 75%
to make a 14px header based on the default font-size, font-size: 116.7%

thesoundsmith
thesoundsmith's picture
Offline
newbie
Monterey, CA, USA
Last seen: 6 years 15 weeks ago
Monterey, CA, USA
Timezone: GMT-7
Joined: 2008-03-28
Posts: 3
Points: 0

Thanks, Chris, but it's not

Thanks, Chris, but it's not really a small difference, the entire impact of the message gets lost, IMHO. It's more like going from bold to roman/normal. I just added the longer stylesheet baseline zeroing-out commands to the main css and the index page and they still look like the style isn't being read by one of the browsers, even though I know it is, because the color change is working.

It appears to be a font-weight issue, FF is displaying the text thinner and weaker than IE, and I don't remember it being this much different back when I was using specific font sizes rather than scalable type. i don't care if it is identical, or if it is exactly 14 pt vs 14.5, but I need the weight to lend credence to the text. (Plus it's harder to read thin text over some of my jpg backgrounds, even though they are quite low contrast so as to not interfere.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Found it. Perhaps I need to

Found it. Perhaps I need to be a bigger stickler for these forums posting rules Smile

Your HTML is invalid. The particular flaw causing the font-size difference, is the incorrect closing of the H2 (with the black text). You seem to be closing it with a </P> by mistake.

As a result of that:
- IE treats the H3 elements as nested within the H2, so they get the affect of the font-size: 110% applied to the H2 and end up with 18px text (same as the H2).
- FF follows the doctype rules more closely and realises an H3 shouldn't be nested within an H2, so closes the H2 before the H3 starts. The H3 only gets its own font-size (100%) so is drawn at 16px.

A secondary difference is the H2 font-size, (as per my earlier reply) IE calculates 110% as 18px (17.6 rounded up) and FF calculates it as 17px (17.6px rounded down). Use 112.5% to get both to 18px.

thesoundsmith
thesoundsmith's picture
Offline
newbie
Monterey, CA, USA
Last seen: 6 years 15 weeks ago
Monterey, CA, USA
Timezone: GMT-7
Joined: 2008-03-28
Posts: 3
Points: 0

Good Eye, mate! A minor but

Good Eye, mate! A minor but definite improvement, and my bad for missing the H2/P mixup (that happened when I tried to get the style consistent by making the whole paragraph H2 rather than just the top line...) And the 112% also helps.

Thanks.