CSS gurus - Why double list font size? - GoFuckYourself.com

DWB · 02-14-2011, 03:32 PM

I'm working with a Wordpress theme and the CSS is listing font size as two sizes, like this...

Code:

.nav-entries a, .post-entries a { font: 14px/16px Arial, Helvetica, sans-serif; color:#6ca0a8; font-weight: bold; text-decoration:none;}

Never come across this before. Can someone explain to me the reason?

Thanks

harvey · 02-14-2011, 03:58 PM

it's a bad behavior, but it's used to determine the line-height

glowlite · 02-14-2011, 04:53 PM

As harvey said it has to do with the line-height property when using font: shorthand.
Very bad behavior, unpredictable results.

font: 14px/16px is the same as,
font-size: 14px; line-height: 16px;

CSS shorthand is not always reliable cross-browser.
For best cross-browser results body{ baselines are best practice along with baselines for other commonly used elements.
ie: P{ margin:;padding:;}

DWB · 02-14-2011, 06:36 PM

Thanks guys, I will re-write this.

02-14-2011, 03:32 PM	#1
DWB Registered User Industry Role: Join Date: Jul 2003 Location: Encrypted. Access denied. Posts: 31,779	CSS gurus - Why double list font size? I'm working with a Wordpress theme and the CSS is listing font size as two sizes, like this... Code: .nav-entries a, .post-entries a { font: 14px/16px Arial, Helvetica, sans-serif; color:#6ca0a8; font-weight: bold; text-decoration:none;} Never come across this before. Can someone explain to me the reason? Thanks

02-14-2011, 03:58 PM	#2
harvey Confirmed User Industry Role: Join Date: Jul 2001 Location: 127.0.0.1 Posts: 9,266	it's a bad behavior, but it's used to determine the line-height __________________ This post is endorsed by CIA, KGB, MI6, the Mafia, Illuminati, Kim Jong Il, Worldwide Ninjas Association, Klingon Empire and lolcats. Don't mess around with it, just accept it and embrace the truth

02-14-2011, 04:53 PM	#3
glowlite Confirmed User Industry Role: Join Date: Dec 2005 Location: Arizona/Indiana Posts: 366	As harvey said it has to do with the line-height property when using font: shorthand. Very bad behavior, unpredictable results. font: 14px/16px is the same as, font-size: 14px; line-height: 16px; CSS shorthand is not always reliable cross-browser. For best cross-browser results body{ baselines are best practice along with baselines for other commonly used elements. ie: P{ margin:;padding:;}

02-14-2011, 06:36 PM	#4
DWB Registered User Industry Role: Join Date: Jul 2003 Location: Encrypted. Access denied. Posts: 31,779	Thanks guys, I will re-write this.