best practice for CSS : Display same font size in all browser.

There is a cross browser problem with css regarding font size. each browser display font size differently. To overcome this issue. You should declare standard font size say 14px in your body code in css like this:


body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
}

Now you take 14 px; as relative to define font size for other tags in your css like:
If you want to have 18px font then declare like this

.post .title a {
font-size: 1.125em;  /* 18px/16=1.125em   Here em is 1.125 times the 14px of body font size*/
color: #618C04;
}


Now your page will almost look similar in all browsers. and zoom in and zoom out will work effectively.
If you use  font-size: 100%; in body tag then it may still arise problem because each browser has different default font size.


- Vinod K



Comments

Anonymous said…
Hi Vinod ! The problem regarding the Cross Browser really getting sucked to solve but ur blog seems quite interesting to know about it.
web design company