Font in style sheet not working properly (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

arllc -> Font in style sheet not working properly (10/14/2005 16:52:40)

Was hoping someone can help me on this issue. I have a css linked to my home page and the font type and size does not show up when typing. I am using this code in the css page.

{
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 9pt; color: "#3C3C3C"; line-height:18px
}

What shows is Times New Roman, 12pt. Then when I change the default font in page options the font type shows as Verdana but it shows at 12 pt, not 9.

Any ideas on how to get this to work properly?

Thanks for any feedback.



womble -> RE: Font in style sheet not working properly (10/14/2005 17:39:01)

You don't need the quotation marks around your font names, or the hex number. That may be contributing to your problem. Also, pts are best avoided on screen and reserved for printing. You're best to use relative font sizes so that the text will rescale properly if a user chooses to increase the font size.

It may be a problem with inheritance, perhaps something else is over-riding it. Perhaps if you could post a url/more code it would be easier to spot the problem?

Welcome to OF btw! [:)]



arllc -> RE: Font in style sheet not working properly (10/14/2005 18:20:05)

Thanks for the response. This is very frustrating. I uploaded the site files. I appreciate your help. The code is listed below.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="styles.css">


<script type="text/javascript" language="JavaScript1.2" src="_pgtres/stmenu.js"></script>

</head>

<body topmargin="0" leftmargin="0">

<div align="center">
<table cellpadding="0" cellspacing="0" width="800" height="1264" bgcolor="#FFFFFF">
<!-- MSTableType="layout" --><tr>
<td valign="top" colspan="2"><a href="../AttainResponse/index.htm">
<img src="images/web_with_tag.gif" width="300" height="73" border="0" alt="AttainResponse Logo"></a></td>
<td align="center" height="73"> </td>
</tr>
<tr>
<td valign="top" colspan="3" height="275">
<!-- MSCellType="empty" -->
 </td>
</tr>
<tr>
<td valign="top" colspan="3" height="44">
<img border="0" src="images/d_01.gif" width="37" height="44"><img border="0" src="images/d_02.gif" width="163" height="44"><img border="0" src="images/d_03.gif" width="191" height="44"><img border="0" src="images/d_04.gif" width="409" height="44"></td>
</tr>
<tr>
<td valign="top" height="25">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="4" -->
<tr>
<td height="100%" width="100%" valign="top">
<!-- MSCellFormattingType="content" -->
 </td>
</tr>
</table>
</td>
<td valign="top" colspan="2" rowspan="7">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="3" -->
<tr>
<td height="100%" width="100%">
<!-- MSCellFormattingType="content" -->
<table border="0" width="100%" height="100%" cellpadding="10" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="432" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="9" -->
<tr>
<td height="100%" width="100%">
<!-- MSCellFormattingType="content" -->
<table border="0" width="100%" height="100%" cellpadding="10" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="top">
<img border="0" src="images/l1.gif" width="11" height="11"> </td>
</tr>
<tr>
<td width="100%" height="100%" valign="top">
 </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" height="53">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="5" -->
<tr>
<td height="100%" width="100%">
<!-- MSCellFormattingType="content" -->
<table border="0" width="100%" height="100%" cellpadding="5" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" height="47">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="6" -->
<tr>
<td height="100%" width="100%">
<!-- MSCellFormattingType="content" -->
<table border="0" width="100%" height="100%" cellpadding="5" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" height="43">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="7" -->
<tr>
<td height="100%" width="100%">
<!-- MSCellFormattingType="content" -->
<table border="0" width="100%" height="100%" cellpadding="5" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" height="40">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="8" -->
<tr>
<td height="100%" width="100%">
<!-- MSCellFormattingType="content" -->
<table border="0" width="100%" height="100%" cellpadding="5" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" id="stTABLE" height="29">
<table cellpadding="0" cellspacing="0" border="0" width="180" height="29">
<!-- MSCellFormattingTableID="1" -->
<tr>
<td height="29" width="180">
<!-- MSCellFormattingType="content" -->
<table border="0" width="100%" height="100%" cellpadding="5" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="3" height="172">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<!-- MSCellFormattingTableID="2" -->
<tr>
<td height="100%" width="100%">
<!-- MSCellFormattingType="content" -->
<table border="0" width="100%" height="100%" cellpadding="5" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="3" height="30">
<!-- MSCellType="empty" -->
 </td>
</tr>
<tr>
<td width="180"></td>
<td width="120"></td>
<td height="1" width="500"></td>
</tr>
</table></div>

</body>

</html>

CSS:

a:link
{
color: #346699;
}
a:visited
{
color: #8C8C8C;
}
a:active
{
color: #000000;
}
a:hover
{
text-decoration: none; color: #006A00;
}
UL LI
{
list-style-image: url(images/bullet1.gif);
list-style-type: disc; color: #000000;
}

UL LI LI
{
list-style-image: url(images/bullet2.gif);
list-style-type: circle; color: #000000;
}

UL LI LI LI
{
list-style-image: url(images/bullet3.gif);
list-style-type: square; color: #000000;
}
body
{
background-color: #73828C;
color: rgb(0, 0, 0);
}
font
{
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #3C3C3C; line-height:18px
}



womble -> RE: Font in style sheet not working properly (10/14/2005 18:44:49)

Well it took me a couple of minutes to figure out there's no text in that code (long day and I don't use table layouts any more so it took a while for the brain cells to kick in [;)]), but once I stuck some test text in there, figured out what the problem could be.

I think this bit of your css might be the problem:

quote:


font
{
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #3C3C3C; line-height:18px
}


When I put some text in there, nothing happened, as you said, I got Times New Roman. It's your 'font' selector that's causing the problem, I think. I put some text in there with <p> tags, changed the 'font' in the css to 'p' (without the quotes), tried again, and...Verdana 9pt!

That should work. If you're using FP you can quickly edit the tags by selecting the <p> tag on the list of tags at the top of the page, then pick 'edit tag' from the drop-down list, or just make sure you've got a <p> tag (presuming it is paragraph text) around the text if you're doing it in code view.

i.e., in your code, for example:

<td width="100%" height="100%" valign="top"> <p>Test</p></td>

and in your css:

p
{
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #3C3C3C; line-height:18px
}

Hope that helps!



arllc -> RE: Font in style sheet not working properly (10/14/2005 18:54:33)

Ah yes, you are brilliant. Thank you.

This is what I get for trying to get the CSS to work too soon, before some text.

Thanks again.

Also, you mentioned that you no longer use table layouts. Can I ask what you do use?

Thanks



womble -> RE: Font in style sheet not working properly (10/14/2005 19:02:46)

CSS positioning - don't try and leap in and do styling and positioning all in one go though - you'll drive yourself crazy and tear all your hair out lol (I used to be (relatively) sane 'til I started using CSS [8D][:D])

You're best to get some confidence with using css for styling first, then once you're comfortable with that, then move on to using css for positioning - the principles are fairly logical, but trying to get it to work across all browsers is one huge headache!



arllc -> RE: Font in style sheet not working properly (10/14/2005 19:06:29)

Yes, thanks for the advise. I do not build Web sites for a living so I think I will take your advise and keep my css use to the basics.

Thanks again. You really saved my sanity.



womble -> RE: Font in style sheet not working properly (10/14/2005 19:11:17)

[sm=yikes.gif] You mean they didn't confiscate it as soon as you got to the OF door?! Usually we have to hand it in at the cloakroom and collect it again on the way out...[:D]



c1sissy -> RE: Font in style sheet not working properly (10/15/2005 6:41:21)

You anchor styles are also in the wrong order, always remember LVHA, Link, visited, hover, active.

You might run into future problems if you don't fix this as well.

Good luck.



arllc -> RE: Font in style sheet not working properly (10/16/2005 23:32:40)

Great, thanks so much for the expert feedback.

Can I ask you another question about my bullets. When I use picture bullets in css the font comes out 12 pt. on the design page but 9pt. when I view it in IE or FireFox.

Also, the bullet itself is misaligned in IE but not in FireFox. In IE the text is dropped down about half a line so it looks funny.

Any ideas? Also, I really appreciate your help and would be more than happy to compensate you to help trouble shoot this. Just let me know what you would charge.

Thanks again.



c1sissy -> RE: Font in style sheet not working properly (10/17/2005 0:05:17)

In your styles in the 

 html, body
           {font-size: 100.01%;}


This should help you get your fonts to be equal in other browsers. Then in the rest of the page, you do your style rules with the font size as you wish for them to be.

Also, for your web pages, you should be using relative sizes for your font sizing so that those who wish to resize their fonts may do so.

Using pixels, ems or percentages is usually the way to go, unless you are styling a page for printing then you to to the fixed sizing.

I start with the font sizing as I showed you above, and then I use ems for the rest of the page, increasing and decreasing as I wish to.



arllc -> RE: Font in style sheet not working properly (10/17/2005 10:30:23)

Thanks again. Just to clarify, when you say - Then in the rest of the page, you do your style rules with the font size as you wish for them to be - are you saying to use inline formatting for the bullet text?

Also, I attached an image showing the misaligned bulltets. They were aligning properly when I first set it up but somehting happened in the last few days to knock it off alignment. Any help here would be great.

Thanks again.


[image]local://upfiles/16741/1EFE8745B8DD4E2FB3C72F6A6D278B23.jpg[/image]



c1sissy -> RE: Font in style sheet not working properly (10/18/2005 9:12:05)


quote:

ORIGINAL: arllc

1.Thanks again. Just to clarify, when you say - Then in the rest of the page, you do your style rules with the font size as you wish for them to be - are you saying to use inline formatting for the bullet text?

2.Also, I attached an image showing the misaligned bulltets. They were aligning properly when I first set it up but somehting happened in the last few days to knock it off alignment. Any help here would be great.

Thanks again.


[image]local://upfiles/16741/1EFE8745B8DD4E2FB3C72F6A6D278B23.jpg[/image]


1. No you don't have to use inline styles to do this, just do it in the style sheet. Like you have your links styled, you would put your font size in there that you wished for, say you wanted them to be .8em or whatever pixel size you wish for. Just don't use pts. That is for print only.

2. If you are messing with the positioning, you could be messing this up.





Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.1835938