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 :

#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

#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,

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?

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.

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; }

Thank you for that. So basically the same approach I take. Good to know. Your right about the inheritance though :slight_smile:

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;


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

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!

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 :slight_smile: )

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?

The font size of the tab text is controlled here (in red):

#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;
	[COLOR="Red"]font-size: 85%;[/COLOR]
	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 gave you a solution in post #3. Have you tried that? It worked for me when I applied it to your code. :slight_smile: