inline-block on first-letter?

[Chell]

hello!
I'm a beginner when it comes to css (sort of; I've been fiddling with it for years, but only now I decided to actually try and learn it properly..) and I'm sorry about this silly question
I tried making decorative first letters in quotes... well, here is what I did:

blockquote:first-letter{
display: inline-block;
color: #000;
font-family: serif;
font-size: 40px;
width: 40px;
height: 40px;
margin: 0px auto;
font-weight: bold;
background-image: url("http://i50.tinypic.com/vggze0.gif");
}

only to realize that width and height properties don't work, even with inline-block, since it's a letter... is that right? But shouldn't it work, being an inline-block element? Is it a browser bug or do I just not get it? If that's the case, can someone point me in the right direction? I couldn't find much information on inline-block that led me to think otherwise.
thanks in advance!

[tempz]

Simple method:

blockquote:first-letter {
    text-transform: uppercase;
}

You should always target the elements you want to style i.e

h1.myclass a:first-letter {
    text-transform: uppercase;
}

that means: H1 of myclass find "a" tag change first letter to uppercase

When you show code on this forum please place your code with in [CODE][/CODE]

Thankyou

[coothead]

Hi there Chell,

and a warm welcome to these forums.

I think that it might be safer to use the "span element" for your project.

Check out the attachment to see it in operation.


coothead

[Chell]

Originally Posted by tempz

Simple method:

blockquote:first-letter {
    text-transform: uppercase;
}

You should always target the elements you want to style i.e

h1.myclass a:first-letter {
    text-transform: uppercase;
}

that means: H1 of myclass find "a" tag change first letter to uppercase

When you show code on this forum please place your code with in [CODE][/CODE]

Thankyou

ah, I see! I'm sorry, I actually checked a few other topics to see if there was a 'code' tag but I didn't see it being used, so I ended up not using it. That's better, thank you.
I understand that! I wanted to make decorated first letters especifically in blockquotes, so in that particular case there wouldn't be much use for first-letter, is that right?

Originally Posted by coothead

Hi there Chell,

and a warm welcome to these forums.

I think that it might be safer to use the "span element" for your project.

Check out the attachment to see it in operation.


coothead

Whoa, thanks a bunch! The span alternative sure works well (it looks great too) and I guess it's the most semantically correct way of doing it, yes? But that would require extra coding as well. So I'm guessing there isn't any way of doing it 'automatically' using only CSS?

Thanks so much for the help, both of you!

[Excavator]

Hello Chell,

So I'm guessing there isn't any way of doing it 'automatically' using only CSS?

I think first-letter can still do a lot for you. Span might be easier to do but with a little setup ahead of time, it would be easy to apply first-letter to new entries.

Something like this -

p:first-letter {
	margin: 5px 10px 0;
	padding: 18px;
	float: left;
	font-size: 4em;
	border-radius: 5px;
	box-shadow: 0 0 10px -2px #999999;
	background: #3399FF;
	color: #fff;
}

Your quote marks might work well as an actual background image.

[Chell]

Originally Posted by Excavator

Hello Chell,



I think first-letter can still do a lot for you. Span might be easier to do but with a little setup ahead of time, it would be easy to apply first-letter to new entries.

Something like this -

p:first-letter {
	margin: 5px 10px 0;
	padding: 18px;
	float: left;
	font-size: 4em;
	border-radius: 5px;
	box-shadow: 0 0 10px -2px #999999;
	background: #3399FF;
	color: #fff;
}

Your quote marks might work well as an actual background image.

Ah, yes, I see! That works too. Thanks a bunch! I guess I'll be going with something like that.