homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Pseudo-elements and the <label> tag
griz_fan




msg:1195247
 7:55 pm on Apr 10, 2003 (gmt 0)

I'm trying to use the first-letter Pseudo-element on the <label> tag to make the first letter of a form element's label bold and underlined, in order to corespond with the access key for that form element. I know that pseudo-elements aren't supported by all browsers, but I've been able to use the first-letter Pseudo-element in IE6, Mozilla and Opera 7, but can't get it to work when associated with the <label> tag. Here's some sample code:

label:first-letter {
font-weight : bold;
text-decoration : underline;
}

<form>
<label for="name" accesskey="n">name</label> <input type="text" id="name" tabindex="1">
</form>

If I set up the same pseudo-element for, say, a paragraph tag (P:first-letter), it works...

Any ideas on what I'm missing?

Thanks!

 

DrDoc




msg:1195248
 9:52 pm on Apr 10, 2003 (gmt 0)

Works

*:first-letter {
color: #00f;
}

<form>
<label for="name" accesskey="n">name</label> <input type="text" id="name" tabindex="1">
</form>



Does not work

label:first-letter {
color: #00f;
}

<form>
<label for="name" accesskey="n">name</label> <input type="text" id="name" tabindex="1">
</form>



Works

.lbl:first-letter {
color: #00f;
}

<form>
<label class="lbl" for="name" accesskey="n">name</label> <input type="text" id="name" tabindex="1">
</form>

griz_fan




msg:1195249
 10:14 pm on Apr 10, 2003 (gmt 0)

Thanks for the tip, DrDoc.

I tried hanging a class on the label tag like you suggested, but with no luck. I think I've been looking at this so long, I might be overlooking an obvious mistake. Here's the code I've been working with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<style type="text/css">
.lbl:first-letter {
color: #00f;
}
</style>
</head>
<body>
<form>
<label class="lbl" for="name" accesskey="n">name</label> <input type="text" id="name" tabindex="1">
</form>
</body>
</html>

If you (or anyone else) sees a problem, I'd really apreciate the help.

Thanks again!

DrDoc




msg:1195250
 10:36 pm on Apr 10, 2003 (gmt 0)

Seems like I was wrong in my earlier post. I can't possibly recreate what I did...

However, I should only work for block-level elements:

[w3.org...]
The :first-line pseudo-element can only be attached to a block-level element.

DrDoc




msg:1195251
 10:36 pm on Apr 10, 2003 (gmt 0)

label {
display: block;
float: left;
}
label:first-letter {
color: #00f;
}

DrDoc




msg:1195252
 10:38 pm on Apr 10, 2003 (gmt 0)

*:first-letter {
color: #00f;
}

...works no matter if label is block-level or not. (At least in IE)

griz_fan




msg:1195253
 2:42 pm on Apr 11, 2003 (gmt 0)

DrDoc,

Thanks! Setting the display for label to block did the trick.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved