SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2002
    Location
    vancouver, bc
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question need help with changing font size

    Hi,

    I am having trouble changing the font size of some text in this stylesheet.

    I tried to add "font-size: 2em;" to some elements but its not taking effect and I don't know why its not. I just want to change the font size of the text in the tabs and it won't change.

    I think I am supposed to change this :

    Code:
    #header ul#primary li  {     background-color: white;     color: white;     display: inline;     list-style: none; }
    Here is the url and CSS below.
    http://www.tanpoposushi.com/beta/lunch.php

    Code:
    #main {
        border: 1px solid #666;
        clear: both;
        background: #FFF3B3;
        padding-top: 2em;
    }
    
    #contents {
        padding: 1.5em;
        background: #FFFDF3;
        min-height: 300px;
    }
    
    #header {
        position: relative;
        width: 100%;
        height: 3em;
        width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
    }
    
    #header ul#primary {
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: -1px;
        width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
    }
    
    #header ul#primary li  {
        background-color: white;
        color: white;
        display: inline;
        list-style: none;
    }
    
    #header ul#primary a,#header ul#primary span,#header ul#primary a.current {
        width: 8em;
        display: block;
        float: left;
        padding: 4px 0;
        margin: 1px 2px 0 0;
        text-align: center;
        font-family: tahoma, verdana, sans-serif;
        font-size: 85%;
        text-decoration: none;
        color: #333;
    }
    
    #header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover {
        border: 1px solid #666;
        border-bottom: none;
        background: white;
        padding-bottom: 6px;
        margin-top: 0;
    }
    
    #header ul#primary a {
        background: #FFFAE1;
        border: 1px solid #AAA;
        border-bottom: none;
    }
    
    #header ul#primary a:hover {
        margin-top: 0;
        border-color: #666;
        background: #FFF7CD;
        padding-bottom: 5px;
    }
    
    #header ul#secondary {
        position: absolute;
        margin: 0;
        padding: 0;
        bottom: -1.4em;
        left: 1px;
        width: 50em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
    }
    
    #header ul#secondary li a,#header ul#secondary li span {
        color: white;
        width: auto;
        display: block;
        float: left;
        padding: 0 10px;
        margin: 0;
        text-align: auto;
        border: none;
        border-right: 1px dotted #AAA;
        background: none;
    
    }
    
    #header ul#secondary li a {
        color: #06C;
        text-decoration: underline;
    }
    
    #header ul#secondary li a:hover {
        color: #333;
        background: transparent;
        padding: 0 10px;
        border: none;
        border-right: 1px dotted #AAA;
    }
    
    #header ul#secondary li a:active {
        color: #000;
        background: transparent;
    }
    
    #header ul#secondary li:last-child a { border: none; }
    any comments? what am I doing wrong?

    Thanks,

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's important to set a default font size in your body tag, which makes managing the font size for other elements an easy task. Most browsers have a default font size of 16px. One of the methods used to manage the font size for different elements is to reduce the default font-size for the entire website to 10px which makes managing font sizes for the rest of the site easy. To do so you need to set font size for your body tag to 62.5%: 16 x 62.5% = 10;
    Code CSS:
    body {
        font-size: 62.5%;
    }

    From this point forward you can use em as measurement. I.o.w. 1.2 em is equal to 12px, 1.4em equal to 14px and so on

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by edwinx View Post
    I tried to add "font-size: 2em;" to some elements but its not taking effect and I don't know why its not. I just want to change the font size of the text in the tabs and it won't change.
    The font size of the tab text is controlled here (in red):

    Code:
    #menu-header ul#primary a,#menu-header ul#primary span,#menu-header ul#primary a.current {
    	width: 8em;
    	display: block;
    	float: left;
    	padding: 4px 0;
    	margin: 1px 2px 0 0;
    	text-align: center;
    	font-family: sans-serif;
    	font-size: 85%;
    	font-weight: bold;
    	text-decoration: none;
    	color: #333;
    }
    But changing font-size: 85%; to font-size: 2em; would make the text WAY too big.

    @donboe That 62.5% technique is generally frowned upon these days. It is too risky, as some people have font sizes set to smaller than the norm, meaning that text can be riidiculously small and thus illegible.

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    @donboe That 62.5% technique is generally frowned upon these days. It is too risky, as some people have font sizes set to smaller than the norm, meaning that text can be riidiculously small and thus illegible.
    Hi ralph.m thank you for the tip. Didn't look at it that way, but maybe I did, because for quite some time now I use the 100.01% rule for the body tag. Usually I set the font-size for the wrapper after that to 0.8 em. What would you suggest to use?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I just use 100% on body and make my standard 1em from that point on, but I don't like tiny text. When I make text smaller or bigger, I still try to base it on some round pixel size (even if that's just a fantasy). So anyway, I often work with 0.75em, 0.875em .. 1.25em etc. Of course, once inheritance starts to kick in, you can kiss whole number pixel sizes goodbye. (E.g. 0.875 x 1.25 = no hope )

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I just use 100% on body and make my standard 1em from that point on, but I don't like tiny text. When I make text smaller or bigger, I still try to base it on some round pixel size (even if that's just a fantasy). So anyway, I often work with 0.75em, 0.875em .. 1.25em etc. Of course, once inheritance starts to kick in, you can kiss whole number pixel sizes goodbye. (E.g. 0.875 x 1.25 = no hope )
    Thank you for that. So basically the same approach I take. Good to know. Your right about the inheritance though

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2002
    Location
    vancouver, bc
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    thanks for the quick reply guys.

    So I added font-size: 100% in my body so that I have a standard to start from. But that still doesn't explain why my changes in the tabs.css is not applied?

    I chose 2em so that it would be a drastic change so that I can easily see if changes are applied.

    I have 2 style sheets. style.css for the site and tabs.css for the tabs only.

    this is the styles.css:

    I don't think there is anything conflicting as I use different names and stuff.
    Code:
    body {
     
        background-repeat: repeat;
     
        background-image: url(images/background.gif);
     
        background-color: #aa7361;
        text-align:center;
        font-size: 100%;
    
     
    }
    
    #top-nav-container { 
      padding-right: 35px; 
      margin-top: -4px; 
      margin-bottom: 20px; 
      padding-left: 35px;
    }
    
    #top-nav-container ul {
      margin-bottom: 27px;
      margin-left: -14px;
      margin-top: 13px;
      padding:0px; 
      font-size: 0.7em; 
      font-weight: bold; 
      color: black; 
      font-family: sans-serif;
    }
    
    #top-nav-container ul li {
      display:inline; 
      list-style:none;
      margin-left: 14px;
    }
    
    #top-nav-container li a {
      color:black; text-decoration:none;
    }
    
    #top-nav-container li a:hover {
      color: red; text-decoration:none;
    }
    
    #foot-nav-container { 
      padding-right: 35px; 
      margin-top: 30px; 
      margin-bottom: 5px; 
    }
    
    #foot-nav-container ul {
      margin-bottom: 0px;
      margin-left: -14px;
      margin-top: 13px;
      padding:0px; 
      font-size: 0.7em; 
      font-weight: bold; 
      color: silver; 
      font-family: sans-serif;
    }
    
    #foot-nav-container ul li {
      display:inline; 
      list-style:none;
      margin-left: 14px;
    }
    
    #foot-nav-container li a {
      color:silver; text-decoration:none;
    }
    
    #foot-nav-container li a:hover {
      color: #333333; text-decoration:none;
    }
    
    #wrapper { 
      width: 900px; 
      padding: 0px; 
      margin: 0px auto; 
        text-align:left;
    
      border-width: 5px; 
      border-color: #AA7361; 
      border-style: solid; 
      background-color: white;
    }
    
    #header { background-color: white;}
    #logo {
      background-repeat: repeat; 
      background-image: url(images/img-header-bg.gif); 
      border-color: #3F3F3F; 
      border-style: solid; 
      border-width: 5px; 
      background-color: #333333;
    }
    
    p {line-height: 1.4em; font-size: 0.9em; color: black; font-family: Helvetica, Verdana, Arial, sans-serif;}
    
    p.heading { text-align: left; line-height: 1.4em; font-size: 1.2em; color: black; font-family: Georgia, "Times New Roman", Times, serif;}
    
    p.price { text-align: left; font-size: 1.5em; color: black; font-family: Georgia, "Times New Roman", Times, serif;}
    
    p.disclaimer { font-family: Helvetica, Verdana, Arial, sans-serif; text-align: left; line-height: 1.5em; font-size: 0.8em; color: black;}
    
    table {padding: 0px; margin: 0px;}
    #2nd {margin-left: 20px;}
    
    H5.menu-heading { margin-bottom: 5px; padding: 0.4em; font-family: sans-serif; color: white; background-color: #cc0000;}
    
    #body-container { padding-right: 35px; padding-left: 35px; }
    
    #copyright { padding-top: 1px; padding-bottom: 10px; font-size: 0.6em; font-family: sans-serif; }
    
    #logo img { margin-bottom: 13px; margin-left: 17px; margin-top: 18px; }
    
    img { border-style: none; }
    
    H2.body-heading { font-family: sans-serif; }
    
    img.quote { float: right; }

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I gave you a solution in post #3. Have you tried that? It worked for me when I applied it to your code.

  9. #9
    SitePoint Zealot
    Join Date
    Dec 2002
    Location
    vancouver, bc
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The font size of the tab text is controlled here (in red):

    Code:
    #menu-header ul#primary a,#menu-header ul#primary span,#menu-header ul#primary a.current {
        width: 8em;
        display: block;
        float: left;
        padding: 4px 0;
        margin: 1px 2px 0 0;
        text-align: center;
        font-family: sans-serif;
        font-size: 85%;
        font-weight: bold;
        text-decoration: none;
        color: #333;
    }
    But changing font-size: 85%; to font-size: 2em; would make the text WAY too big.

    @donboe That 62.5% technique is generally frowned upon these days. It is too risky, as some people have font sizes set to smaller than the norm, meaning that text can be riidiculously small and thus illegible.

    I just tried this and added 2em instead of 85% and nothing changed. In fact, I've had this problem before where changes do not update or font sizes do not change. what else should I be looking for?

  10. #10
    SitePoint Zealot
    Join Date
    Dec 2002
    Location
    vancouver, bc
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I finally figured it out, Thanks guys. It was one of those stupid late night mistakes..

    But I've learned something new in this thread about how to set up my fonts. Thanks!


Bookmarks

Posting Permissions

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