Log in

View Full Version : 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 :p ) 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...

<!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..)
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 :p

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


thanks again