First-letter, not behaving in Chrome or Safari!

HTML & CSS
1

Hi there

I’ve attached 3 examples

The first being what it should look like, and is Firefox 3.6.13.

The second is Safari (5.0.3), and the third is Chrome (9.0.597.102).

Isn’t it strange how Safari and Chrome interpret it differently? Is there anything I’ve missed that could rectify this? Obviously targeting webkit is no use here, and I’ve been reading on here about this being generally buggy in IE. I’m on a Mac so haven’t even tested it on IE yet! I’m wondering if it’s more trouble than it’s worth, could just styling a <span> could be a better option?

My css


p.introText:first-letter{
	font-size:100px;
	float:left;
	color:#aaa;
	padding:10px 15px;
	margin:0 7px 0 0;
	background:url(images/first-letter.png) no-repeat bottom right;
}

Any suggestions much appreciated, thanks :slight_smile:

Pat

2

I just did a little experiment and got the same result in all three browsers by adding

line-height: 70px;

Worth a try, anyhow.

3

Thanks Ralph!

I was actually coming back to post, as I’d just thought of it and it worked! Well almost - in Safari it seems to give a bigger bottom padding and margin.

I can live with it though as long as it’s not too much work to get it looking ok in IE!

P

4

Yeah, that’s the real crunch test. Surprisingly, the little test I did works the same in all three IEs. Well I never …