1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

:first-letter issue in IE

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

0
  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