Can anyone help with first-letter pseudo class?

HTML & CSS
1

Hi,
I am having trouble trying to get the first-letter pseudo class to work. My aim at the moment is simply to make the first letter of the two words in my heading larger than the rest of the letter. To do this my html is:

<div class="paragraph_title">
<em>DANAMAR</em> <em>PRODUCTIONS</em>
</div>

And my css is:

.paragraph_title {
	float:left;
	margin-top:12px;
}
.paragraph_title em {
	font-size:1.4em;
	margin-top:12px;
	font-family:'BodoniSvtyTwoITCTT-BookIta','Bodoni SvtyTwo ITC TT','Times New Roman','serif';
}
.paragraph_title em:first-letter {
	font-size:1.8em;
}

However, at the moment the first-letter of the words are no bigger than the rest of the words. If I move the float:left property to the .paragraph_title em class then I do get larger first letters, but then there is a huge space between the two words which I can’t get rid of. Does anyone know how I can resolve this?

Thanks,
Russ

2

One way off the top of my head to do it.

 
<!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">
<head>
<title></title>
<style type="text/css">
 
.paragraph_title {
line-height: 2em;
font-size: 1em
}
 
.first_letter {
font-size: 2em
}

</style>

</head>
<body>
 
<div class="paragraph_title">

     <span class="first_letter">D</span>ANAMAR <span class="first_letter">P</span>RODUCTIONS

</div>
 
</body>
</html>
3

Slater please read the following link, it may help as to why you are having issues: http://reference.sitepoint.com/css/pseudoelement-firstletter

4

Hi,
Rather than using a div and em to simulate a title/heading I think I would just go ahead and use an h-tag for the job.

Then just follow that up with your p-tags and carry on. All that can be done in one wrapping div with a class so you can reuse it.

As far as styling the first-letter of the second word, just nest that first letter in a b-tag and group it together with your first-letter styles.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100&#37;/1.3 'Times New Roman','serif';
    background:#CCC;
}
h1 {
    margin:12px;
    font-size:1.8em;
}
.wrap {
    float:left;
    width:450px; /*for demo*/
    margin:12px 0 0;
    background:#FFF;
    text-align:justify;
}
.wrap h2 {
    font-size:1.4em;
    margin:0 12px;
    font-family:'BodoniSvtyTwoITCTT-BookIta','Bodoni SvtyTwo ITC TT','Times New Roman','serif';
    text-transform:uppercase;
}
.wrap h2:first-letter,
.wrap h2 b {
    font-size:1.8em;
    color:red;
}
.wrap p {
    margin:0 12px 12px;
}
</style>

</head>
<body>

<h1>Danmar Page Title</h1>

<div class="wrap">
    <h2>Danbar <b>P</b>roductions</h2>
    <p>
        Lorem ipsum dolor sit amet consectetuer euismod laoreet et amet id. Ante turpis feugiat nec 
        cursus Phasellus vitae dapibus sodales interdum faucibus. Pellentesque nunc amet condimentum.
    </p>
</div>

</body>
</html>
5

Awesome! That works a treat, thanks!