first-child issue in Safari

I'm using jQuery to wrap the first letter of the first child paragraph in a span so I can absolutely position it. This works fine in Opera, Firefox and IE7. I know it won't in IE6. Safari applies the height, background and color. It even makes the span wide enough for the letter. What it doesn't do is apply the font size or weight.

I thought it was the script so I hard coded the effect and still the same effect (or lack thereof). I read around and couldn't find anything specifically showing this behavior.

Is this a known issue? Is there something I'm missing? Is there a solution to this?


div.text {
font: 12px/22px arial, sans-serif;
color: #333;
width: 550px;
margin: 0 auto;
position: relative;
}

div.text p:first-child:first-line {
color: #ed669c;
font: 14px arial, sans-serif;
}

div.text p:first-child span:first-child {
font: bold 100px/100px arial, sans-serif;
color: #ed669c;
position: absolute;
right: 554px;
top: -6px;
background: #eee;
display: block;
height: 100px;
}


and the resulting HTML looks like:


<div class="text">
<p><span>M</span>orbi convallis.


Test page:
http://tugbucket.net/tests/firstletterjq.html

Issue fixed with comments ;)


div.text {
font: 12px/22px arial, sans-serif;
color: #333;
width: 550px;
margin: 0 auto;
position: relative;
}

div.text p:first-child:first-line {
color: #ed669c;
font: 14px arial, sans-serif;
}

/* Safari doesn't like this part but the other 3 do */
div.text p:first-child span:first-child {
font: bold 100px/100px arial, sans-serif;
}

/* This hits Safari but it also hits Opera and since Opera likes it the way FF does... */
@media screen and (-webkit-min-device-pixel-ratio:0) {
div.text p:first-child:first-letter {
font: bold 100px/100px arial, sans-serif;
color: #ed669c;
}
}

/* ...erase that rule for just Opera setting it back to the first rule */
@media all and (min-width: 0px){
div.text p:first-child:first-letter {
}
}

/* Now we style the span for all browsers */
div.text p:first-child span {
position: absolute;
right: 554px;
top: -6px;
background: #eee;
display: block;
height: 100px;
color: #ed669c;
}

/* Neat huh? :D */


http://tugbucket.net/tests/firstletterjq_2.html

Always pushing the envelope ;)

Just to let you know, removing ":first-line" in

div.text p:first-child:first-line {
color: #ed669c;
font: 14px arial, sans-serif;
}

…also gives you same results but I'm not sure why that works. It doesn't seem like a specificity thing.

Nah just playing, er... loading some more bullets in the arsenal ;)

Not exactly the same results. You'll notice that destroys the first p's first line being pink. This does make another issue to wonder about. Weird eh?

Being anal like I am I'll probably spend a few hours this weekend trying to figure it out and beating my head against a rock until I can get IE to play along. Time to write my own script I guess.


@rich
Beautiful weather in your neck of the woods last weekend. I was only the for Saturday night and Sunday but spent 99% of that time with the guy who's reception it was. I guess I still owe you a cold one ;)

Not fixed.

IE7 great
IE6 Fixed with some jQuery
FF 2 nice
FF3 can someone look at it please?
Safari 3 PC Fixed
Opera 9.22 PC Ugh
Opera 9.50 PC Ugh

O9.22 Is not obeying first-line and wont text-transform the forst-letter. The latter is a JS issue.

O9.50 repeats the spans letter in the P. probably a js issue as well.

If y'all want to take a crack at feel free ;)

http://tugbucket.net/tests/firstletterjq_3.html

Screenshot for FF3 Mac OS X
1024x768 Resolution

http://i296.photobucket.com/albums/mm196/DrewsDesigns/FF3ScreenShot_harbingerOTV.png

Best of luck,

Drew

Safari 3 shows is exactly the same as the FF picture...

Awesome, thanks for the look. So now just to work with Opera.