By phuile on

Each of the blog heading on this page:
http://www.refbc.com/news
is set to H3

In the stylesheet, it is specified as

H3,H3 a,H3 a:hover {
font-size: 18px;
font-family: "Arial";
color: #78a22f;
margin-bottom: 5px;
text-decoration: none;
}

There used to be a line-height: 25px as the last entry but I deleted it.

I tried setting the line-height to 5px to decrease the spacing between each blog listing but after I did that, some people using Chrome and Firefox, and some computers said the blog titles are all in teeny tiny fonts. IE is ok.

I am wondering what's the issue here? Is it the font size??

Please help!

Comments

Anthony Pero’s picture

Anthony Pero commented

You are not very clear on what you are trying to accomplish, to me at least. Are you trying to decrease the space between the header and the text, or between the bottom of the row and the next header? The reason line-height: 5 px makes the font look teeny is because you are setting the space from the middle of one line of text and the middle of the next line of text. FF and Webkit (Chrome) automatically decrease the size of your font in order to compensate for this, so the font will fit in the line-height. Spacing is handled by margin and padding rules.

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

phuile’s picture

phuile commented

I have deleted the line-height item already, as you can see from the posted H3 specs. But some people are still seeing the tiny fonts. Where else can I trace the problem? I can't see why it should be tiny - as it is set at 18px.

I have another question on the same issue but on the home page, but I will ask that in another post so it's not confusing.

Thanks for any help!

Anthony Pero’s picture

Anthony Pero commented

I'll take a look, I have Mac and PC and every web browser.

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

bawoor’s picture

bawoor commented

use em unit not px, its more consisten for line-height.
1em equal to 1 character height unit.
0.7em equal to 70% of character height unit.
2em equal to 200% of character height unit.,

ꦱꦠꦽꦶꦪ

Anthony Pero’s picture

Anthony Pero commented

Ok. I think the issue is the way sIFR is being rendered by each browser. You have a pixel height of 18 set on the embed code. This means that the max height of the object, including the font itself, and the line-height built in to the font, should be no more than 18 pixels. Then you have no line-height set, so it is defaulting to the line-height from the BODY tag (18 px). IE is honoring your font size as the most important, and rendering the page accordingly. FF and WebKit recognize the line-height as being the most important, so are setting it to 18 and automatically resizing the font to fit.

I think. I've never used sIFR before. In order to make this work, you are going to need to explicitly increase your line-height, I think, and set the height rule to your max size.

Anthony Pero
Project Lead
Virtuosic Media
http://www.virtuosic.me/

field4000’s picture

field4000 commented

Check it the font size is being inherited by an early class. This could be one possible issue.

Another could simply be that the CSS is cached.

I suggest that you go through your whole CSS file and find where there is an instance of a 'small font' and work out from there what is causing the H3 to render small.