CSS help

[kaz]

I applied CSS markup for three links for my website, namely, navigation, income, and Search(Look out for these three in the stylesheet code). However, when previewed my site on my IE browser, none of them were showing. I know I saved both the the style sheet file and the index page. How is that possible. the link(and this is temporary is http://www.geocities.com/kkisie2000/index.htm. Here is the stylesheet code.

body {
background-color: #FFFFCC;
}
#h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: oblique;
font-weight: bold;
font-variant: normal;
text-transform: capitalize;
color: #000033;
background-color: #FFFFFF;
}
.tab {
background-color: #0033FF;
width: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.contents {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
color: #FFFFFF;
background-attachment: fixed;
background-color: #0066FF;
text-align: center;
width: 100px;
}
.webauthoring {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
background-color: #993300;
text-align: justify;

width: 100px;
}
.featuresbg {
background-color: #33FFFF;
width: 400px;
}
.forms {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-transform: none;
text-align: justify;
width: 409px;
}
.webau {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-variant: normal;
text-transform: capitalize;
color: #003366;
width: 157px;
}
.feats {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
letter-spacing: normal;
text-align: justify;
word-spacing: normal;
white-space: normal;
width: 400px;
}

.webdesign {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 600;
font-variant: normal;
text-transform: capitalize;
color: #0066FF;
text-align: justify;
white-space: normal;
width: 100px;
}
.internetmark {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 600;
font-variant: normal;
text-transform: capitalize;
color: #0066FF;
text-decoration: none;
background-attachment: fixed;
background-color: #FFCC00;
background-repeat: no-repeat;
letter-spacing: normal;
text-align: justify;
word-spacing: normal;
white-space: normal;
display: none;
clear: none;
float: none;
width: 100px;
}

.html {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-transform: uppercase;
color: #FFFFFF;
background-color: #000066;
text-align: justify;
white-space: normal;
width: 98px;
}
.HTML1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #000066;
}
.affiliate {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: 600;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
text-decoration: none;
background-attachment: fixed;
background-color: #000066;
background-repeat: no-repeat;
letter-spacing: normal;
text-align: justify;
word-spacing: normal;
white-space: normal;
clear: none;
float: none;
width: 98px;
}
.income {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: 500;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
background-color: #000066;
letter-spacing: normal;
text-align: justify;
word-spacing: normal;
white-space: normal;
display: none;
width: 98px;
}
.search {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 600;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
text-decoration: none;
background-attachment: fixed;
background-color: #000066;
background-repeat: no-repeat;
letter-spacing: normal;
text-align: justify;
word-spacing: 2px;
white-space: normal;
display: none;
width: 98px;
}
.webpromo {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 600;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
text-decoration: none;
background-attachment: fixed;
background-color: #000066;
background-repeat: no-repeat;
text-align: justify;
width: 98px;
}


.layout {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 600;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
text-decoration: none;
background-color: #000066;
letter-spacing: normal;
text-align: justify;
word-spacing: normal;
white-space: normal;
width: 98px;
}
lyout {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
background-color: #000066;
text-align: justify;
width: 100px;
}
.lyout {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-transform: capitalize;
color: #ffffff;
background-color: #000066;
width: 100px;
}

.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 600;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
text-decoration: none;
background-attachment: fixed;
background-color: #000066;
background-repeat: no-repeat;
letter-spacing: normal;
text-align: justify;
word-spacing: normal;
white-space: normal;
display: none;
clear: none;
float: none;
width: 100px;
}
#features{font-family:Arial, Helvetica, sans-serif;font-size:12;font-weight:600;fopnt-color:color: #000033;
.webtips {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 500;
color: #0066FF;
text-align: justify;
}
.webtips {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 800;
text-transform: capitalize;
color: #000000;
text-align: justify;
}
.wbdesign {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: 500;
font-variant: normal;
text-transform: capitalize;
color: #000066;
background-color: #FFFFFF;
text-align: justify;
}
.htmlcont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color: #FFFFFF;
text-align: justify;
color: #000000;
}
.htmlheading {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 500;
font-variant: normal;
text-transform: uppercase;
color: #000066;
background-color: #FFFFFF;
text-align: justify;
width: 200px;
}
.layoutheading {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-variant: normal;
text-transform: capitalize;
color: #000066;
text-align: justify;
width: 200px;
}
#htmlcontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-transform: none;
background-color: #FFFFFF;
text-align: justify;
}
.htmlcontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: none;
background-color: #FFFFFF;
text-align: justify;
color: #000000;
width: 200px;
}
.webtipsmain {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
color: #000066;
text-align: justify;
width: 500px;
}
.htmlheader {
font-family: Arial, Helvetica, sans-serif;
color: #000066;
width: 384px;
text-align: justify;
}
.layout {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000066;
text-align: justify;
width: 200px;
background-color: #FFFFFF;
}
.featueres {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #000000;
width: 200px;
background-color: #FFFFFF;
}
.htm {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
text-transform: none;
background-color: #FFFFFF;
width: 200px;
}

thanx

kaz

[ukgeoff]

Before you do anything else you could start by cleaning up your code and producing valid markup.

Whilst there may well be a snowball effect going on, the W3C validation routine says there are 45 errors.

[tmeyer45458]

CSS is funny and often it seems like there is no reason for your problem...that said, I have found that (in my case) it's usually a careless error. To make your job easier try consolidating your code. For example take this code:

.tab {
background-color: #0033FF;
width: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}

And turn change it to this:

.tab {
background-color: #0033FF;
width: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: capitalize;
border: thin solid #000;
}

This will do exactly what the original code did with 1/3 of the code, bandwidth, and headaches

I know that didn't exactly answer your question but sometimes you just have to make your code a simple as possible...to avoid errors and to more easily debug those errros that occur

[Ryan Fait]

Expanding on tmeyer, the font shorthand will reduce this:

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;

to this:

font: normal bold 12px arial,helvetica,sans-serif;