Safari VS Firefox font-size

rizzledon · 05-03-2012, 06:16 AM

Hi,
I'm playing around with a navigation menu in my footer and I'm finding that
firefox is dramatically shrinking the font-size for my List Items..
Anyone know why this might happen?

It's also changing the letter spacing abit which Im not overly concerned about.

_Aerospace_Eng_ · 05-03-2012, 06:51 AM

Not without the CSS/HTML we won't. A link to your page would be better.

rizzledon · 05-03-2012, 07:06 AM

CSS

Code:

.footnav {
	font-family: "Century Gothic";
	letter-spacing: 0.19em;
	font-size: 0.6em;
	text-decoration:none;
	color: #000;
	display: inline;
	position: relative;
	width: 100%;
	text-align: center;
	text-decoration: none;
	}
.footnav a {
	font-family: "Century Gothic";
	letter-spacing: 0.19em;
	font-size: 0.6em;
	text-decoration:none;
	color: #000;
	display: inline;
	position: relative;
	width: 100%;
	text-align: center;
	text-decoration: none;
	padding-right: 23px;
	}
.footnav a:hover {
	color: #666;
	text-decoration: none;
	}
.footnav ul {
	list-style-type:none;
	}
.footnav li {
	display:inline;
	}
.copyright {
	font-family: "Century Gothic";
	letter-spacing: 0.19em;
	font-weight: normal;
	font-size: 0.6em;
	text-decoration:none;
	color: #000;
	padding-left: 20px;
	display:block;
	}
#copyright {
	position:relative;
	width: 100%;
	height: 10px;
	text-align: center;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:50px;
   background:#ffffff;
   opacity:0.8;
   filter:alpha(opacity=80);
}
#footnav {
	display: block
	position:relative;
	width: 100%;
	height: 10px;
	text-align: center;
	position: relative;
	top: 0px;
}

HTML

Code:

<div id="footer">
<div id="footnav">
<div class="footnav">
	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">about</a></li>
		<li><a href="#">work</a></li>
    	<li><a href="#">projects</a></li>
   	  <li><a href="#">contact</a></li>
	</ul>
</div>
</div>
<div id="copyright">
<p class="copyright">© 2012 MY SITE All Rights Reserved. Terms & Conditions</p>
</div>
</div>

_Aerospace_Eng_ · 05-03-2012, 07:15 AM

When a font-size is specified in em or percent will inherit the parent elements font size as well. So for example if you set the font-size to 100% in your list you will see it get bigger and look closer to Safari.

http://webdesign.about.com/od/typeme...g-is-an-em.htm

rizzledon · 05-03-2012, 07:56 AM

Thanks Aerospace, I think I understand what you're saying but I'm still abit confused.
None of the list items parent elements or divs have a font-size specified?
so why would they shrink in firefox and while the <p> tag remains a similar size?

Caliburn · 05-03-2012, 08:14 AM

Aerospace will probably beet me by the time I write this out but...

You can specify your font sizes in pixels, percentages, and by using 'em'.

Pixels: When you set a font size in pixels, you're telling the browser quite literally how many pixels tall the letters should be.

Percentage: This works completely different from pixels. When you use a percentage, a font size percentage tells the font how big it should be relative to another font size.

EM: EM is another relative unit of measure. You specify a scaling factor using EM.

Keywords: You can adjust font size using keywords like "small" and "x-small".

You probably already know this but it's all I can contribute. I am also quite curious on this one.

rizzledon · 05-03-2012, 08:23 AM

Thank Caliburn, I understand that but I still don't understand what's happening in my case. Why is firefox taking a different em size for the list items than the paragraph?

The reason I'm using em's rather than px's is because I want it to be scaleable.

Caliburn · 05-03-2012, 08:26 AM

Accessibility? I follow you. I am not personally seeing anything in the CSS you exampled that would be causing this. Can you possibly post the entire CSS file so I can get a better review of it please? I'm a novice so I use everything I can to learn. It's as much for me as it is for you. Now I am determined to solve this.

rizzledon · 05-03-2012, 08:53 AM

Sure maybe we'll both learn something

I used px's for some of my other fonts, maybe firefox is basing the em size of one of them? I have another issue with the top nav menu aswell but I was going to go back to that..

CSS

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	background-image: url(rosetest.jpg);
	background-size: cover;
	background-repeat: no-repeat; 
	margin: 0;
	padding: 0;
}
@font-face {
    font-family: BellMTitalic;
    src: url(/fonts/BellMT-Italic.otf);
    font-weight:400;
	font-family: BellMTreg;
    src: url(/fonts/BellMTStd-Regular.otf);
    font-weight:100;
 }
#logoRectangle {
	width:101px;
	height:25px;
	background-color:#ffffff;
	border:none;
	opacity:0.8;
	filter:alpha(opacity=80);
	margin-left: 0px;
	margin-top: 10px;
}
#navmenu {
	position: absolute;
	height: 20px;
	width: 324px;
	background-color: #000;
	opacity:0.6;
	filter:alpha(opacity=60);
	top: 41px;
	right: 0px;
	float: right;
}
#p1{
	position: relative;
	top: -41px;
	left: 21px;
	opacity: 1;
	filter: alpha(opacity=100);
	width: 100px;
}
.brownlogo {
	font-size: 19px;
	color: #231c0e;
	font-family: 'Alternate Gothic No1 D',sans-serif;
	letter-spacing: 2.6pt;
}
.redlogo {
	font-size: 19px;
	color: #c32035;
	font-family: 'Alternate Gothic No1 D',sans-serif;
	letter-spacing: 2.6pt;
}
.menu {
	display:block;
	position:relative;
	right:0;
	width: 381px;
	height: 10px;
	float: right;
	top: -93px;
	}

.menu a {
	background:transparent;
	font-family: "American Typewriter";
	letter-spacing: 0.19em;
	font-weight: normal;
	font-size: 0.6em;
	text-decoration:none;
	color: #FFF;
	padding-left: 20px;
	}

.menu a:hover {
	background:transparent;
	}

.menu ul {
	list-style-type:none;
	padding-right: 33px;
}

.menu li {
	display:inline;
	}
.footnav {
	font-family: "Century Gothic";
	letter-spacing: 0.19em;
	font-size: 0.6em;
	text-decoration:none;
	color: #000;
	display: inline;
	position: relative;
	width: 100%;
	text-align: center;
	text-decoration: none;
	}
.footnav a {
	font-family: "Century Gothic";
	letter-spacing: 0.19em;
	font-size: 0.6em;
	text-decoration:none;
	color: #000;
	display: inline;
	position: relative;
	width: 100%;
	text-align: center;
	text-decoration: none;
	padding-right: 23px;
	}
.footnav a:hover {
	color: #666;
	text-decoration: none;
	}
.footnav ul {
	list-style-type:none;
	}
.footnav li {
	display:inline;
	}
.copyright {
	font-family: "Century Gothic";
	letter-spacing: 0.19em;
	font-weight: normal;
	font-size: 0.6em;
	text-decoration:none;
	color: #000;
	padding-left: 20px;
	display:block;
	}
#copyright {
	position:relative;
	width: 100%;
	height: 10px;
	text-align: center;
}
		
#progress {
	margin-left: 22px;
	width: 500px;
	position: relative;
	top: 58px;
}
#topbar {
	background-color:#ffffff;
	height: 25px;
	width: 100%;
	margin: 0;
	padding: 0;
	opacity:0.8;
	filter:alpha(opacity=80);
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:50px;
   background:#ffffff;
   opacity:0.8;
   filter:alpha(opacity=80);
}
#footnav {
	display: block
	position:relative;
	width: 100%;
	height: 10px;
	text-align: center;
	position: relative;
	top: 0px;
}
</style>
</head>

HTML

Code:

<body>
<div id="topbar"></div>
<div id="logoRectangle"></div>
<p class="brownlogo" id="p1">MY<span class="redlogo">SITE</span></p>
<div id="navmenu"></div>
<div class="menu">
	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">about</a></li>
		<li><a href="#">work</a></li>
    	<li><a href="#">projects</a></li>
    	<li><a href="#">contact</a></li>
	</ul>
</div>
<div id="footer">
  <div id="footnav">
<div class="footnav">
	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">about</a></li>
		<li><a href="#">work</a></li>
    	<li><a href="#">projects</a></li>
   	  <li><a href="#">contact</a></li>
	</ul>
</div>
</div>
<div id="copyright">
<p class="copyright">© 2012 MY SITE All Rights Reserved. Terms & Conditions</p>
</div>
</div>
</body>
</html>

Caliburn · 05-03-2012, 09:10 AM

Remember I'm a novice here but the only thought that's coming into my mind is that the EM is basing off the pixels you used in some font sizing. Have you played around with that?

Also I came across this. Relevant?

http://www.webmasterworld.com/css/3121655.htm

rizzledon · 05-03-2012, 09:20 AM

yeh I changed the .brownlogo and .redlogo classes to 1.2em it made no difference to the other fonts but NOW THEY ARE APPEARING DIFFERENT SIZES TO EACHOTHER!?!? hah now I'm even more confused :P
thanks for the link btw

Caliburn · 05-03-2012, 09:25 AM

Yeah I am a total loss on this one. I was hoping I could help you resolve it but I'm looking at the CSS right now, referring to a couple of books, and I honestly can't tell you what the problem is. I bet you it's something simple that we'll both smack ourselves in the head over once we know what it is. It looks just fine to me.

Any guru's awake out there want to chip in?

rizzledon · 05-03-2012, 09:33 AM

hah yeh it's always the way. Appreciate you trying man, cheers

rizzledon · 05-03-2012, 11:31 AM

not really sure why, but I managed to fix it by removing the font-size and spacing from .footnav a

_Aerospace_Eng_ · 05-03-2012, 12:49 PM

So as I told you when you specify your font size in a relative font size i.e. em or % it will inherit the parent font-size as well. You have 0.6em for your footer, then you have 0.6em for your menu that is in your footer. So rather than being 0.6em of the default browser font-size it is 0.6em of whatever 0.6em is in your footer. Read the article I gave you. It talks about inheritance.