correct?

[DanUK]

hi .. does my stylesheet look right? I've had some people seeing different font sizes and such like and I cannot see where .. :o

a:link, a:active, a:visited {
color: #666666;
Font-Family: Tahoma, Verdana, Arial, Helvetica;
text-decoration: none}

input, textarea, select {
background-color: #CCCCCC;
border-style: solid;
border-width: 1px;
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 10px;
color: #333333;
padding: 0px;
}

.title{
color: #ffffff;
font-size: 9;
font-weight: bold;
font-family: Tahoma, Verdana, Arial, Helvetica;}

.pg_title{
color: #0168B3;
font-size: 9;
font-weight: bold;
font-family: Tahoma, Verdana, Arial, Helvetica;}

.sub_title{
color: #000000;
font-size: 9;
font-weight: bold;
font-family: Tahoma, Verdana, Arial, Helvetica;}

p {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 9px;
margin: 8px;
line-height: 15px;
}

content {
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 9px;
margin: 8px;
line-height: 15px;
}

BODY {
SCROLLBAR-ARROW-COLOR: #97AABA;
SCROLLBAR-FACE-COLOR: #F2F5F7;
SCROLLBAR-HIGHLIGHT-COLOR: #B2C3D0;
SCROLLBAR-SHADOW-COLOR: #B2C3D0;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF}
.bold { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 8pt; font-style: normal; color: #669999; font-weight: bold}
.bodyplain { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 8pt; font-style: normal; color: #000000; font-weight: normal}
.boldwhite { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 8pt; font-style: normal; color: #FFFFFF; font-weight: bold ; text-decoration: none}
.boldwhiteCopy { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 8pt; font-style: normal; color: 4A627A; font-weight: bold ; text-decoration: none}
.credit { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 8pt; font-style: normal; color: #CCCCCC; font-weight: bold ; text-decoration: none }
.bodyplainred { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 8pt; font-style: normal; color: #FF6633; font-weight: normal ; text-decoration: none}
.bodyplaingrey { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 8pt; font-style: normal; color: #999999; font-weight: normal }
.bodyplainwhite { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 8pt; font-style: normal; color: 98A2AB; font-weight: normal }
td {font-family:Verdana; font-size:8pt; wont-weight:100; text-align:left;
color:#000000; cursor:default; vertical-align:top}
td.contact {font-family:Tahoma, Verdana, Arial, Helvetica; font-size:8pt; font-weight:600; color:#000000}
td.datetime {font-family:Tahoma, Verdana, Arial, Helvetica; font-size:8pt; font-weight:100; text-align:right;
color:#A00000; background-color:#F0FFF0; cursor:default; padding-right:8pt;
border-top-style:solid; border-top-width:1px; border-top-color:#0000A0;
border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#0000A0}
td.faq_cmd {padding-top:4px}
td.faq_mode {width:10px; text-align:center; font-weight:800}
td.faq_modec {width:180px; text-align:left; font-weight:800}
td.faq_spacer {width:10px; text-align:center; font-weight:800}
td.header {font-family:Tahoma, Verdana, Arial, Helvetica; font-size:8pt; font-weight:100; text-align:left;
color:#000000; cursor: default; height:16pt; vertical-align:middle}
td.menu {font-family:Tahoma, Verdana, Arial, Helvetica; font-size:8pt; font-weight:800; text-align:center;
color:#000050; background-color:#F0FFF0; cursor:default;
border-top-style:solid; border-top-width:1px; border-top-color:#0000A0;
border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#0000A0}
td.right {text-align: right; font-size:7pt}
td.stats {border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#000000;
font-size:7pt}
td.statsdata {font-size:7pt}
td.submenu {font-family:Tahoma, Verdana, Arial, Helvetica; font-size:8pt; font-weight:800; text-align:center;
color:#000050; width:126px; background-color:#F0FFF0; cursor:default;
border-top-style:solid; border-top-width:1px; border-top-color:#0000A0;
border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#0000A0}
td.server_caption_l {font-weight:600; text-align:right; border-bottom-width:1px; width:48px;
border-bottom-style:solid; border-bottom-color:#0000A0; color:#C00000; padding-right:24px}
td.server_caption_r {font-weight:600; border-bottom-width:1px; width:200px;
border-bottom-style:solid; border-bottom-color:#0000A0; color:#C00000}
td.server_port {color:#0000A0; text-align:right; width:48px; padding-right:24px}
td.server_item {color:#0000A0}
td.subnet_caption_l {font-weight:600; border-bottom-width:1px; width:144px; padding-left:6px;
border-bottom-style:solid; border-bottom-color:#0000A0; color:#C00000; padding-right:24px}
td.subnet_caption_r {font-weight:600; border-bottom-width:1px; width:300px;
border-bottom-style:solid; border-bottom-color:#0000A0; color:#C00000}
td.subnet_mask {color:#0000A0; padding-left:6px; width:144px; padding-right:24px; font-family:monospace}
td.subnet_desc {color:#0000A0}
a.server {color:#FF0000; text-decoration:none}
a.server:hover {text-decoration:underline}
a.contact {font-family:Tahoma, Verdana, Arial, Helvetica; color:#606040; text-decoration:underline}
a.contact:hover {text-decoration:none}


thanks if you can help.

[toicontien]

In many of the style declarations you do not specify a type of measurement for your font sizes. I saw several instances of "font-size: 9;" and some of "font-size: 9px;"

The font size problem should go away if you add "px" to the end of every font-size.

Some browsers, Internet Explorer, I believe, will just take the number by itself to be measured in pixels, other browsers won't recognize the font-size declaration unless a measurement is specified.

CSS Standards for measuring fonts

1. px - size in pixels

2. % - size as a percentage of the font size of current element's parent element (kind of confusing, I know)

3. em - Measured as a multiple of the average width and/or height of a character in a given character set.

4. pt - size measured in Points, which is often used in the print media

5. Relative sizes: xx-small, x-small, smaller, small, medium, larger, large, x-large, xx-large.

The W3C recommends using relative font sizes or percentage font sizes, that way the sizes are resolution independant. Many handheld devices are only 160 pixels across, so a 9 pixel size font is fairly large on that screen, whereas it's pretty small on a desktop monitor.

Whichever type of measurement you decide on, stick to that measurement throughout the entire style sheet for the sake of continuity.

Hope this helps out.

Good reading:

http://www.alistapart.com/stories/readingdesign/

http://www.w3.org/TR/REC-CSS2/

[DanUK]

Originally posted by toicontien
In many of the style declarations you do not specify a type of measurement for your font sizes. I saw several instances of "font-size: 9;" and some of "font-size: 9px;"

The font size problem should go away if you add "px" to the end of every font-size.

Some browsers, Internet Explorer, I believe, will just take the number by itself to be measured in pixels, other browsers won't recognize the font-size declaration unless a measurement is specified.

CSS Standards for measuring fonts

1. px - size in pixels

2. % - size as a percentage of the font size of current element's parent element (kind of confusing, I know)

3. em - Measured as a multiple of the average width and/or height of a character in a given character set.

4. pt - size measured in Points, which is often used in the print media

5. Relative sizes: xx-small, x-small, smaller, small, medium, larger, large, x-large, xx-large.

The W3C recommends using relative font sizes or percentage font sizes, that way the sizes are resolution independant. Many handheld devices are only 160 pixels across, so a 9 pixel size font is fairly large on that screen, whereas it's pretty small on a desktop monitor.

Whichever type of measurement you decide on, stick to that measurement throughout the entire style sheet for the sake of continuity.

Hope this helps out.

Good reading:

http://www.alistapart.com/stories/readingdesign/

http://www.w3.org/TR/REC-CSS2/

Hello, thanks that's brilliant. I realised that actually, and on the font tags of my site i used the size '2', and for my CSS I just used:

font-size: 12;

This seems to have resolved a lot.
Is there anything else you can see which may be incorrect? Many thanks!

[pyro]

Running it through the validator will show you any errors you may have (and there are a lot...): http://jigsaw.w3.org/css-validator/

[gizmo]

Also I noticed the word 'wont-weight' where it should read 'font-weight' .:cool:

[Hester]

One of the reasons for using stylesheets is to cut back on repeated font declarations. There's no need to keep declaring the fonts, just use one of two methods below:* {font-family:Arial... etc ;}This applies the font to EVERYTHING. The only drawback is that it doesn't work in Netscape 4.

The second, most common method is to add the font element by element using just one line:body, p, div, td, span... etc {font family... blah blah blah ;}This requires you to make sure you add any newly used elements to the list.

You can also declare the font size at this point. Then simply override it when you need. Headers always need resizing anyway as they are too big I find. The majority of your page is likely to be one font size, maybe one smaller, and one larger.

Remember also that styles cascade. This is something I've only come to appreciate myself recently, after years of writing bloated long-winded stylesheets. You can group identical styles into one line, then merely apply any differences.

Example:.one {border:1px solid #000; color:red;}
.two {border:1px solid #000; color:green;}
.three {border:1px solid #000; color:blue;}
.four {border:1px solid #000; color:gold;}Here we style four classes which all have black borders but different colours. This can be better written by styling all the classes to have borders in one go, then applying the colours..one, .two, .three, .four {border:1px solid #000;}
.one {color:red;}
.two {color:green;}
.three {color:blue;}
.four {color:gold;}Believe me this can save masses of code! Especially when identical positioning, width and height is used where only one line of code changes between each class used.

Hope this helps.

[Vladdy]

Originally posted by Hester
element by element using just one line:body, p, div, td, span... etc {font family... blah blah blah ;}This requires you to make sure you add any newly used elements to the list.

font is by default inherited from the parent element. Therefore a single declaration:
body
{ font-family: Arial, sans-serif;
}
is sufficient (there are several browser bugs where form elements do not behave, but those are few)

[Hester]

Yeah I think that was in response to coding for Netscape 4 when body didn't seem to be enough.

[Vladdy]

Sorry, I must have missed the reference to NS4, which is such a rare browser that it is hardly worth bloating a stylesheet.