CSS P:first-letter

Dev Shed Forums Sponsor:

January 25th, 2004, 11:44 AM

thall89553

Contributing User

Join Date: Jan 2004

Location: Budapest

Posts: 1,428

Time spent in forums: 4 Days 16 h 10 m 2 sec
Reputation Power: 6

CSS P:first-letter

Why can't I get this to work on the first letter -

#maincontent {
float: right;
top: 100px;
width:638px;
margin-left:132px;
height:500px;
clear:right;
position: absolute;
background-repeat: no-repeat;
border: 0px solid purple;
text-align:left;
padding-top:0px;
}

#maincontent H1{
display:block;
width:auto;
border: 0px solid purple;
text-align:center;
margin-top:20px;
margin-bottom:40px;
color:#000066;
font-size:16px;

}

#maincontent P{
width:80%;
margin-left:10%;
margin-right:10%;
display:block;
background-repeat: no-repeat;
border: 0px solid purple;
text-align:justify;
padding-top:0px;
color:#08207B;
}

#maincontent P img{

border: 2px solid #08207B;
float:left;
margin-right:5px;
margin-bottom:0px;

}

#maincontent P:First-Letter{
color:red;
font-size:24px;
}

Everything else works fine...

__________________
Today the world, tomorrow the universe...

January 25th, 2004, 03:29 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,688

Time spent in forums: 4 Weeks 7 h 1 m 40 sec
Reputation Power: 600

i think this is yet another msie bug,
it supposedly should support first-letter.
and by checking things a little back and forth,
i found out that msie only renders the first-letter correct when there is a no doctyoe defined or a doctype that triggers the quirksmode, as the doctype is more important than that first-line is working,
you should either ignore the msie bug or make a work around.

Last edited by Akh : January 25th, 2004 at 03:32 PM.

January 25th, 2004, 03:33 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,589

Time spent in forums: 1 Month 2 Days 17 h 41 m 26 sec
Reputation Power: 662

What do you mean by not work? It doesn't color it red? Make it 24px? Or, are you looking for a drop-cap effect?

Code:

p:first-letter {
    color: red;
    font-size: 24px;
    float: left;
    }

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

January 25th, 2004, 04:03 PM