PDA

View Full Version : CSS text-transform does not work



chartwise
Apr 14th, 2009, 09:23 PM
On my website I have colums of text.

Problem is that one of the text-transforms doesn't work

These are the styles i have used:

.title {
font-family: Tahoma, Verdana, Arial;
font-size: 11px; font-style: bold;
font-weight: bold; color: #000000;
text-align: left;
background-color: #eeeeee;
text-transform: uppercase;
}
.artist {
font-family: Tahoma, Verdana, Arial;
font-size: 11px; font-style: bold;
font-weight: normal; color: #000000;
text-align: left;
background-color: #eeeeee;
text-transform: capitalize;
}

On the TITLE class the text-transform is uppercase which works fine
On the ARTIST class the text-transform is capitalize but it doesn't work

On this capitalize text-transform it shows the text on the web page only as it has been entered in the HTML code.

Could anyone please help as on the ARTIST class I want the first letter of each word capitalized.

I am using an external stylesheet.

All help much appreciated

VIPStephan
Apr 14th, 2009, 09:29 PM
These two rules don’t tell us anything. You could have a million other rules in your stylesheet that override this setting; and we don’t even know what elements have the class “artist” since the class doesn’t tell us anything about the nature of the element the styles are addressed to.

Please always post your entire HTML and CSS or a link to the site/page in question.

Now, if I had to guess I’d say you could try adding !important to the value like text-transform: capitalize !important;

BoldUlysses
Apr 14th, 2009, 09:30 PM
Need more info. What kinds of elements are the styles being applied to? In other words, post a link to your page (preferable) or your entire code (HTML and CSS) in [CODE][/CODE] tags.

The style works here:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Untitled Page</title>

<style type="text/css">

.title {
font:bold 11px Tahoma, Verdana, Arial;
color: #000;
text-align: left;
background-color: #eee;
text-transform: uppercase;
}

.artist {
font:11px Tahoma, Verdana, Arial;
color: #000;
text-align: left;
background-color: #eee;
text-transform: capitalize;
}

</style>

</head>

<body>

<div id="wrap">

<span class="title">Title class text is here.</span>
<span class="artist">Artist class text is here.</span>

</div>

</body>
</html>

Note: Cleaned up your code a bit using CSS shorthand (http://www.dustindiaz.com/css-shorthand/).