css first-letter uppercase not working if the rest is lowercase

**noobster** · 09-14-2007, 03:19 PM

Hi everyone,

I encountered a slight problem but quite boring...

i have a text that i want all lowercase whatever the user puts in.. so i use at display
.contenuNews {
font-weight: bold;
font-size: 48px;
color: #D53B00;
text-align: left;
width: 500px;
text-transform: lowercase;

}

And i want the first letter to be uppercase so i thought i could use

.contenuNews:first-letter {
text-transform: uppercase;
}

But nothing appears going uppercase unless i remove the lower case of the Contenunews tag.

Could someone tell me how to bypass this problem or tell me if i made a error?

Thanks a lot.

**coothead** · 09-15-2007, 10:34 AM

Hi there noobster,

the code works OK for me using Firefox 2, Opera 9 and IE 7.

coothead

**noobster** · 09-16-2007, 02:33 PM

well that's bizarre...maybe i don't declare them well...i'll try again then.

thanks for your feedback

**boogyman** · 09-17-2007, 12:35 PM

chances are he is testing it in IE6, which doesnt support the css3.0
I believe that IE6 supports CSS1 almost completely, while it has very limited support for CSS2, and even less if any of CSS3.

I believe you are going to need some javascript to implement this, to have it standard on all browsers, unless you do not mind everything being in lowercase.

**noobster** · 09-18-2007, 07:30 AM

Well i wanted to have the first character of the first line at least, uppercase to have little control over visual aspect.

I have to do some further testing but in fact i was using IE7.

If the solution doens't seem obvious to any of you (nor to me

) i guess i just have to start over and do a step by step to see what's wrong in my code.

thanks

**coothead** · 09-18-2007, 09:38 AM

Hi there noobster,

this is the code that I tested successfully...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>text-transform:uppercase test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.contenuNews {
    font-weight:bold;
    font-size:48px;
    color:#D53B00;
    text-align:left;
    width:500px;
    text-transform:lowercase;
 }
.contenuNews:first-letter {
    text-transform:uppercase;
 }
</style>

</head>
<body>

<div class="contenuNews">tHIS IS A TEST</div>

</body>
</html>

See if it works for you.

coothead

**boogyman** · 09-18-2007, 12:18 PM

that won't work in anything below IE7 as only the achor (:link, :visited, :hover, :active) pseudo selectors are supported.

this is CSS3, and I believe that CSS2 isn't even fully supported by most browsers, so the affect of this will never be universal, however the text will still be transformed to lowercase, as that selector is CSS1, which is widely supported

**noobster** · 09-19-2007, 07:27 AM

@Boogeyman

Well in fact this is to be used on one single machine using IE7 so compatibility isn't really a problem right now...but thanks for the info (i ll keep it in mind , i know how clear css is difficult to obtain

@ coothead : thanks for the tip i try that today and check back later, i use a external css file but i guess if one selector works, why won't another... I 'll send feedback as soon as i can..thanks again

**blwow** · 09-19-2007, 10:23 AM

This works for me in all browsers I have tested (IE6, IE7, FF, Opera, Netscape..)

Code:

p.blogtitle:first-letter {
	font-size: x-large;
	font-weight: bold;
	float: left;
	}

p.blogtitle { 
	font-size: 10pt;
	font-style: italic;
	word-spacing: 1em;
	letter-spacing: 0.1cm;
	min-height:1%;
	}

I did have problems getting the first letter to work in IE7 but someone pointed out to me that I need min-height:1%; which fixed it for me! Hope this helps! I was also recommended to read this article: http://www.satzansatz.de/cssd/onhavinglayout.html

**noobster** · 09-23-2007, 04:08 PM

Thanks a lot for your help and time.

right now i can't test your solutions cause ...i'm on hollyday

next week i'll keep in touch and send you my results..

thanks again

Thread: css first-letter uppercase not working if the rest is lowercase

Thread Tools

Search Thread

css first-letter uppercase not working if the rest is lowercase

Bookmarks

Bookmarks

Posting Permissions