Could anyone help me to check my CSS and make corrections where appropriate. Quiet new to the stuff. Thanks in Advance

/* Default CSS Stylesheet for a new Web Application project */

BODY
{

scrollbar-face-color: #d1dceb;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #4263b5;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #99B7D9;
scrollbar-arrow-color:#000000;

}


H1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

H2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.75em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

H3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.58em;
font-weight: 500;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

H4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.33em;
font-weight: 500;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

H5, DT {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

H6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}

A:link {
text-decoration: none;
color: #3333cc;
}

A:visited {
text-decoration: none;
color: #333399;
}

A:active {
text-decoration: none;
color: red;
}

A:hover {
text-decoration: underline;
color: #3333cc;
}



.AltStyle
{

background-color: #d1dceb;

}


.headerStyle
{
font-weight: bold;
font-size: 10pt;

color: black;
font-family: Arial;
text-align: center;
}
.ItemStyle
{
background-color: ghostwhite;
}



.txtbox
{
border-right: #4263b5 1px solid;
border-top: #4263b5 1px solid;
font-size: 10px;
font-family: Verdana;
border-left: #4263b5 1px solid;
border-bottom: #4263b5 1px solid;
background-color: ghostwhite;

}





.button
{
border-right: black 1px solid;
border-top: black 1px solid;
font-size: 10px;
border-left: black 1px solid;
cursor: hand;
border-bottom: black 1px solid;
font-family: Verdana;
background-color: #f9f6e5;
}

.box
{
border-color: #4263b5;
}

.tableimg
{
background-color: #d1dceb;
}


.label
{
font-weight: bold;
font-size: 14pt;
}
TD
{
font-size: 10px;
font-family: Verdana;
}

.dropdown
{
font-size: 10px;
font-family: Verdana;
}


.listb
{
vertical-align: super;
cursor: default;
position: static;
background-color: silver;
}

you cant use the scrollbar property since its only supported by IE so that would give you an error

validate your CSS here www jigsaw.w3.org/css-validator/

i cant check it for you right now since the page is acting up for some reason...

Hi r2xdesign. I think when you copied my sample into TextPad and save it in your local machine, you then need to browse to the location to upload, it will check the css.
Thanks in advance

Using scrollbar colors is quite safe from a functional perspective. Having these will not cause any other elements within your CSS to fail. It's either accepted or ignored, depending on what browser you use and what settings are being used within the browser.

Now, there may be some usability issues with this practice, since you are styling the visitor's UI which is generally considered a no-no. Imagine if every individual site could skin your browser however it wants. That's what scrollbar color does, only it does it to a small portion of the browser. Still, it's something I avoid myself.

Otherwise, if you want validation, just use a validator :)

Jigsaw is the standard validator people like to use. My preference is http://www.htmlhelp.com/tools/csscheck/ - the Web Design Group CSS Lint.

Just a suggestion, where you declare a background colour, declare a foreground colour too - and vice versa. Save problems later on :)

Paul,

I second WDG's validator. I believe it's a lot more detailed than W3C's - HTML and CSS wise.

Cheers,
Josh

I second WDG's validator. I believe it's a lot more detailed than W3C's - HTML and CSS wise.And I second your seconding of the WDG Validator :D It is the best one I've found - certainly the easiest to understand!

Just a suggestion, where you declare a background colour, declare a foreground colour too - and vice versa.This includes declaring a suitable background color to accompany tiled background images (if images don't load, your text might conflict with whatever color that background image was covering). Also, if it is not suitable to declare a background color in conjunction with text color, declare background:none or transparent, etc. But specify something, otherwise (in uncommon cases), the browser might make a decision on its own, possibly to the detriment of your content.

And I'll also recommend HTMLHELP.COM as it not only validates but also gives related links to help correct the problems found.

BTW, I sure do hope the CSS mentioned by the TS is for a print page. Using 'em' for anything else is never recommended. For Web pages it's best to use percentages or 'px' for font sizing.

Using 'em' for anything else is never recommended.The only reason I've found to avoid em for screen is a pesky IE bug. But careful planning can avoid this. I think em can be a perfectly good measurement for screen use, but if you have any other examples than the one I've shared many times in the past having to do with IE that causes problems, I'd really like to know about them!

Funny, most of the sides promoting accessible standards based design I've seen encourage using 'em' as is scales with the user's screen and browser settings. The only problem using 'em' is with IE 3.x as it usually interprets them em as px.

I know I personally hate having to enlarge browsers text viewing just to read some text set in in a miniscule px size that's essentially unreadable.

Originally posted by NyteOwl
Funny, most of the sides promoting accessible standards based design I've seen encourage using 'em' as is scales with the user's screen and browser settings.

I know I personally hate having to enlarge browsers text viewing just to read some text set in in a miniscule px size that's essentially unreadable. This is only because of IE. In fact, every problem we've identified goes back to IE.

em is buggy in IE (though it takes a pretty specific scenario to trigger the bug) so it's not that great an option. px would be fine, except for some God-knows-what reason, MS decided this unit should break its resizing mechanism (once they fix this and IE6 is gone away, px should be a relatively harmless unit to use). That leaves percentages. Frankly, there's very little difference between percentages and em, except for how the units are perceived logically by the developer. Just stick with percentages, and you'll be fine.

Anyone a fan of using ex? :)

Edit: nevermind, IE browser support of ex doesn't go back very far - stupid IE...

Well, for my own sites I don;'t cater to IE's eccentricities and the bug with em seems to be restricted to <=IE 3.x so it's occurance odds are pretty low.

For clients I test designs ahead of time. I haven't had a font problem yet though I have been prepared to beat M$ over the head with a club for the way it handles margin/padding/border interactions. :D

Unless you have a specific need for using px, em, or pt - I would recommend using such properties like "x-small", "small", etc. This allows for the user to easily up their font size without causing too much trouble.

Paul, what versions of IE do you see the em problem in?

Cheers,
Josh

Well, for my own sites I don;'t cater to IE's eccentricities and the bug with em seems to be restricted to <=IE 3.x so it's occurance odds are pretty low.Paul, what versions of IE do you see the em problem in?The bug is in IE6.

I've posted this on WHT in the past (seems it's archived and gone now). Open this in the latest version of IE, try resizing the text and tell me IE is still stable when it comes to em ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>IE resize bug</title>
<style type="text/css">
div { font-size: .9em }
</style>
</head>
<body>

It's a nasty bug indeed!
<div>
It's a nasty bug indeed!
<div>
It's a nasty bug indeed!
<div>
It's a nasty bug indeed!
</div>
</div>
</div>

</body>
</html>
The doctype makes no difference. Neither does quirks v. standards mode, since this is a style misinterpretation, not structure. Pretty gruesome, eh? The instructions clearly tell the browser each nested div's text should be .9 the size of the upper-level, yet when you size text larger, IE...well...I have no idea what kind of math IE does to the fonts, but it's not pretty. Check it in practically any other browser and you'll see what's supposed to happen!

I have been prepared to beat M$ over the head with a club for the way it handles margin/padding/border interactions.Three cheers for the IE broken box model :D

Yes, Paul. I am disappointed in the way IE works as well. There is a way out of everything, usually, with CSS hacks. I am going to try the two-stylesheet method on my next project and see how that goes - one for standards, one for IE hacks. I think I have seen it done.

To be safe, I think using "x-small", etc. would be a fine way to beat IE. Works for my sites.

Cheers! :)

Josh

Hmm, that's the first time I've seen that. It only happens when you use view/text/ and increase the size; it works properly reducing size. Very strange. Three bronx cheers for IE! :D

Originally posted by NyteOwl
Hmm, that's the first time I've seen that. It only happens when you use view/text/ and increase the size; it works properly reducing size. Very strange. Three bronx cheers for IE! :D It's obscure, but indicative of IE's failure, once again. And I don't believe it works properly when sized down either. I believe it sizes down exponentially, which means it does not reduce everything like it should, but it reduces everything way too much! No, it's screwed up in every possible way. That's because...IE is stupid!

Say it enough, and maybe Google will show IE threads when you search for the word "stupid." Hmm... :D

Hmm..

I can't wait to see how Microsoft screws up with IE 7.0. I would laugh hysterically (and then maybe shoot myself) if it's just some minor update of IE 6.

:)

Cheers,
Josh

IE 3.x will incorrectly treat em units as pixels.

Percentage units or keywords (x-small, etc.) that use a Relative size are usually preferable.
IE 100% is a bit bigger than 1em
Opera 100% is a bit smaller than 1em
Mozilla no difference with Mozilla

For me, I guess it's due to long-time habit -- not using em for anything but print pages. To each their own but I found that I can mix 'n match using percentage, px, and keyword sizing with no problem.

I have also taken to using work-arounds (for IE) so that I can get the same font size regardless of which Browser is used. As IE shows a bigger font size than other Browsers, it bothered me that 12px in other Browser looked like 14px in IE. Maybe someday MS will get IE right. ;)

That's why we have standards :)