Black and red text should be white!

HTML & CSS
1

Hi,

I am using this CSS:

.basket-details {
background: url(“…/buy.png”) no-repeat scroll -3960px 0 #3A3A3A;
clear: both;
color: #FFFFFF;
letter-spacing: -0.02em;
line-height: .6;
margin: 0 0 15px;
padding: 12px 12 12px 12px;
}

.basket-details th.description{
width: 237px;
}

.basket-details th.price{
width: 72px;
}

If I use this:

<th class=“description”>Description</th>
<th class=“description”>Code</th>
<th class=“price”>Quantity</th>
<th class=“price”>Price</th>

the “description” coded words (Description and Code) are black. And the “price” coded words (Quantity and Price) are red. I want them to all be white! What is wrong?

Matt.

2

To start with you have not told us were the class basket-details fits into the html.

It is not possible to advise further without a fuller picture of the css or the html. Can you post a URL?

Usually these problems result from a different styling selector being applied to the one that you are expecting. The trick then is to understand why and correct the css appropriately.

For example if you have styles

.basket_details th {
color: white;
}

Content th {
color: red;
}

you might find that the text in th cell is coloured red rather than white. You might think otherwise but the browser might assume the other is more specific and thus appropriate.

3

BTW, this is the kind of problem for which Firebug is a real time-saver. You can pull up your page, ask Firebug to examine “Description,” and it will show you what CSS is being applied to it. Much easier than hunting through the code to find the culprit!