Forum Moderators: not2easy
Note: the font displays correctly in Dreamweaver design mode.
I'm struggling to think of another way to explain problem so I'll resort to showing my embarrassing efforts at css coding.
It starts like this...
#masthead {
width: auto;
height: 50px;
background-image: url(file:///C¦/Documents%20and%20Settings/Owner/My%20Documents/RIDCAN/e-RIDCAN_site/images/longyel.gif);
background-position: left;
background-repeat: no-repeat;
background-color:#6CA7C6;
text-align: right;
padding-bottom: 1px solid #006699;
font:Arial, Helvetica, sans-serif;
font-size: 0!important;
margin: 0px 10px 0px 10px
}
I don't think I need to specify fonts for all of the divs since I want everything to be the same font. But I've went back and added the font specification in every single div just to try to resolve problem. Still I'm getting Times serif.
Here's more of the code.
#contentbgd {
font: Arial, Helvetica, sans-serif;
background-color:#B3D1E1;
width: auto;
height: inherit;
margin: 0px 10px 0px 10px;
padding: 20px;
}
/***** inside left nav *****/
#left {
float: left;
width: 200px;
height: auto;
margin: 0px;
background-color: #FDF4D0;
padding: 10px;
font: Arial, Helvetica, sans-serif
}
.left{
font: Arial, Helvetica, sans-serif;
font-size:small;
color:#006699;
font-weight: bold;
background-color: #FFF;
padding: 10px;
}
I admit that I haven't even begun to understand this stuff, and for my audience I'm not worrying about older or lesser-used browsers. But still am open to your advice on any issues.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Shouldn't I still be able to set varying fonts for different divs and also use the different classes to set styles for different sections, headings, etc.?
This is how dumb I am -- Is that not within my control? The view is established by the user's browser settings?
Also, you're using font: to define your font family. Try explicitly using font-family instead, since you don't seem to be specifying any other font settings. I don't know if that has anything to do with your problem, but give it a try.
I guess I'll stay with single font-family here. But in my pre-css sites, I always used serif font with non-serif paragraphs. I worry that I'll want to do that again in future and I can't figure out why I can't do that or do different fonts for different sections. I've searched this discussion board and others and googled, but haven't seen advice on this topic. Perhaps mixed fonts just aren't done except thru graphics?
Anyway, you've been very tolerant.
Thanks,
cw
Suppose you define your overall fonts to be arial:
body { font-family: arial,sans-serif; }
Next, suppose you want the text in a particular area to display serif fonts instead. You simply add another style rule for that area. For example, suppose I have the following HTML:
<body>
<div id="header">...</div>
<div id="content">...</div>
</body>
Now, suppose I decide that I want the content to contain serif fonts. Just do this:
body { font-family: arial,sans-serif; }
#content { font-family: serif; }
In your case, though, it looks like you're using the same font throughout the site, so there's no need to include that information over and over if you just define it up at the top level.
