Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts

    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?

    Code:
    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:

    Code:
    <div class="text">
    <p><span>M</span>orbi convallis.
    Test page:
    http://tugbucket.net/tests/firstletterjq.html
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Issue fixed with comments

    Code:
    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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Always pushing the envelope

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

    Code:
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Screenshot for FF3 Mac OS X
    1024x768 Resolution



    Best of luck,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #7
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Safari 3 shows is exactly the same as the FF picture...

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Awesome, thanks for the look. So now just to work with Opera.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •