Topic: CSS Issue

I am having a problem getting my CSS document to work flawlessly with my HTML document. Here is the full short css document so far...

.background {
background-image: url(images/repeatgraphic.gif);
background-repeat: repeat-x
}

.formsideleft1 {
background-image: url(images/formsideleft1.gif);
background-repeat: repeat-y
}

.formsideright1 {
background-image: url(images/formsideright1a.gif);
background-repeat: repeat-y
}

.formsidebottom1 {
background-image: url(images/formbottomrepeat_02.jpg);
background-repeat: repeat-x
}

<!--These are strictly color identifiers for data cells-->
.grey {
background-color: E6E6E6
}

.blue {
background-color: "003399"
}

<!--These are text formatting attributes-->

.body4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: 333333;
text-align: left;
background-color: E6E6E6
}

.body1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: 333333;
text-align: left;
vertical-align: baseline;
background-color: E6E6E6
}

.body2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: 333333;
text-align: center;
vertical-align: baseline;
background-color: E6E6E6
}

.body3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: FFFFFF;
text-align: left;
vertical-align: baseline;
background-color: 003399
}

Now the problem I'm having is that the "body4" style doesn't really interact with anything on my website. The only reason I have it there is because every time I remove it, all my styles fail. I stole it from one of my other sites to start a new css document with this one. It has some magical property that makes or breaks my entire css document. It doesn't look different than the other styles, but somehow they are all contingent on it's existence. It's driving me nuts.

(Edited by Rondavu on 11-03-2004 22:20)

(Edited by Rondavu on 11-03-2004 22:21)

It's hard for me to say for sure. There are plenty of errors and any number of them could be causing you problems. Nevermind I can't see your markup and that, too, could provide me clues.

I'm just taking a guess, but I bet it has something to do with the quoted background color in the style immediately preceding the mysterious .body4

.blue {

background-color: "003399"

}

Try removing those quotes (and an octothorpe before all color definitions would be nice) and see if that doesn't remove the mysterious powers of .body4.

another error is that when you specify a color in HEX code you must preceed it by a #, like that:

.blue

{

    background-color:#003399;

}

I did what you said and nothing. The quotes were only there as a part of my experimenting, while trying to get it to work properly. I just replaced my css document with the css text I have posted in this thread, thinking it might be an invisible character issue, and it still doesn't work.

This leads me to believe if you created your own css document on your own computer from the text I've provided, you will have the same issue. Try using it in tandem with an html document. Watch as the styles refuse to take when you delete the "body4" style. Maybe it will help solve the mystery. I appreciate your response.

Rondavu: it'd greatly help if you provided a link to an HTML testing your CSS. We have no clue about how you nest every and each of your CSS rules.

quote:

---

Now the problem I'm having is that the "body4" style doesn't really interact with anything on my website.

---

If no class is set to body4, then you have a parse error. Which there is.

some things I changed
-removed HTML comments in a style sheet
-semicolons after properties
-quoted the url's
-prefix hex colors with #

It now validates

.background {

background-image: url("images/repeatgraphic.gif");

background-repeat: repeat-x;

}



.formsideleft1 {

background-image: url("images/formsideleft1.gif");

background-repeat: repeat-y;

}



.formsideright1 {

background-image: url("images/formsideright1a.gif");

background-repeat: repeat-y;

}



.formsidebottom1 {

background-image: url("images/formbottomrepeat_02.jpg");

background-repeat: repeat-x;

}



.grey {

background-color: #E6E6E6;

}



.blue {

background-color: #003399;

}



.body4 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: normal;

color: #333333;

text-align: left;

background-color: #E6E6E6;

}



.body1 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: normal;

color: #333333;

text-align: left;

vertical-align: baseline;

background-color: #E6E6E6;

}



.body2 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: normal;

color: #333333;

text-align: center;

vertical-align: baseline;

background-color: #E6E6E6;

}



.body3 {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: normal;

color: #FFFFFF;

text-align: left;

vertical-align: baseline;

background-color: #003399;

}

Thank you ninmokeys. I'm sure I don't have to remind you how valuable your time is. It is grealy appreciated. Maybe some day when I'm really good at this stuff, I can be in a position to solve problems instead of making them.

Fisrt thing to learn, is to check your code to see if it validates before pulling out your hair trying to figure out why something dpesn't work.

The validator catches plenty of errors that your tired eyes might not...

It would also make a bit more sense to post your CSS problems in the CSS forum in the future

(Edited by DL-44 on 11-04-2004 01:30)

CSS forum? What CSS forum?

4th from the top.....

"XML - XSL - XSLT - XHTML - CSS - DOM"

=)

Ooohhh. Looky. This here thread's gonna do a moving act...


Justice 4 Pat Richard