:first-letter issue in IE

Discussion in 'CSS' started by S2X, Jan 12, 2011.

  1. #1
    
    #hnav p, #hnav a, #hnav a:hover, #hnav a:visited, #hnav a:active {
    	padding-top: 17px;
    	color: #f1f1f1;
    	font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    #hnav p:first-letter {font-weight: bold;}
    
    Code (markup):
    
    <div id="hnav"><h1>
    	$contenttitle 
    </h1>
     
    <p><a href="http://www.sitename.com">Sitename</a>  - A sub-header here</p>
     
    </div>
    
    Code (markup):

    Once Sitename is put inside of a link, the S doesn't get bolded in IE, however it does in FF. I can't seem to be able to find a way to use :first-letter for a link... Any help would be greatly appreciated :confused:
     
    S2X, Jan 12, 2011 IP
  2. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #2
    I am assuming you haven't mentioned a DOCTYPE? or Did you?

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    Code (markup):
     
    radiant_luv, Jan 12, 2011 IP
  3. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yeah, it failed for me in IE7 but worked in IE8. Just goes to show, the first-letter pseudo class is not fully supported in older browsers:
    http://reference.sitepoint.com/css/pseudoelement-firstletter

    You could surround the S with strong tags, or use span tags if you want greater control over the styling.
    <p><a href="http://www.sitename.com"><strong>S</strong>itename</a>  - A sub-header here</p>
    Code (markup):
    <p><a href="http://www.sitename.com"><span class="first-letter">S</span>itename</a>  - A sub-header here</p>
    Code (markup):
     
    Cash Nebula, Jan 13, 2011 IP
  4. S2X

    S2X Active Member

    Messages:
    508
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    58
    #4
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Code (markup):
    The IE version I was checking this in was IE8 :confused:
     
    S2X, Jan 13, 2011 IP
  5. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Your code works in IE8 when I test it. Can you give us a link to your site?

    Try this out. It's just your code put together as a page. I have not changed anything.

    index.html
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    #hnav p, #hnav a, #hnav a:hover, #hnav a:visited, #hnav a:active {
    	padding-top: 17px;
    	color: #f1f1f1;
    	font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    }
    #hnav p:first-letter {font-weight: bold;}
    </style>
    </head>
    <body>
    <div id="hnav">
    <h1>$contenttitle</h1>
    <p><a href="http://www.sitename.com">Sitename</a>  - A sub-header here</p>
    </div>
    </body>
    </html>
    
    Code (markup):
     
    Cash Nebula, Jan 13, 2011 IP
  6. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #6
    Well, with the Doctype defined it should work. Cash Nebula has posted the code, if you still have issues, I will post the code I tried at my work place,
     
    radiant_luv, Jan 13, 2011 IP