Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Safari VS Firefox font-size

    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.


  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Not without the CSS/HTML we won't. A link to your page would be better.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    rizzledon (05-03-2012)

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question

    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?

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    19
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Caliburn; 05-03-2012 at 08:21 AM.

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    19
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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>

  • #10
    New Coder
    Join Date
    Jan 2012
    Posts
    19
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #12
    New Coder
    Join Date
    Jan 2012
    Posts
    19
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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?

  • #13
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    hah yeh it's always the way. Appreciate you trying man, cheers

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    not really sure why, but I managed to fix it by removing the font-size and spacing from .footnav a

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •