CODEWITHSUNDEEP
htmlcss
user3153014
user3153014

Reputation: 318

different font size for same class in css

In my css I have 

.name{
 text-align:right;
 font-size:0.85em;
 font-weight: bold;
 vertical-align:middle;
 width: 40%;
}

I am using same css for two different pages but I am getting one font is bigger than other.

Upvotes: 0

Views: 4279

Answers (4)

thecoffee
thecoffee

Reputation: 1

Had a similar problem. Parent Font sizes were exactly the same and written in px. Turns out it was because one of my pages was missing a doctype. I pasted the same doctype form the othr page and that solved the problem.

Upvotes: 0

SatAj
SatAj

Reputation: 1979

Parent element of the fon-size must be having different font-sizes, "em" always works in proportion of parent element's font-size. Please check the font-size of parent element in both the pages or you can give font-size in "px" which will not affect by any parent element.

Upvotes: 0

T.Schinler
T.Schinler

Reputation: 25

em's go based on the current size. Make sure that the font size has not been changed before the call on the second page. IE: The font size was changed in the beginning of the second page.

Upvotes: 0

War10ck
War10ck

Reputation: 12508

Problem

It is most likely that you've defined the default font-size for that element in some other css file on one of the two pages. em units are abstract unit. By definition the values are arbitrary.

Here's a snippet from: http://css-tricks.com/css-font-size/

Em values are probably the most difficult values to wrap the ol' noodle around, probably because the very concept of them is abstract and arbitrary. Here's the scoop: 1em is equal to the current font-size of the element in question. If you haven't set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px.

Solution

If you've previously defined a font-size for the element that the class is attached to, then your em values may be different. If you're using this class on two different elements <div> or <span> it's also very likely that they could be different. Make sure any default font-size values applied to your elements are consistent on both pages and are not being overwritten. Also, you may consider setting an initial font-size for the elements in question yourself to ensure accurate results.

Alternative

If you're really wanting a consistent fixed size, you should consider something like px. px provide fine grain control, as you're telling the browser exactly how many pixels to use to render the text.

Upvotes: 2

Related Questions