styling <label> tag is not working :(

Question

samsons17 -4 Posting Whiz in Training

13 Years Ago

Hi all.. i am trying to style one of the label tag from my code.But it is not working, and i do not know whats really the problem.Or there is the other way to style the <label> tag perhaps?

anyway, here is the code :

<FORM NAME="message_wall" ACTION="" METHOD="">
    	<label for="message_wall">What's Your Problem?</label> 
                <textarea rows="3" name="S1" cols="104" id="message_wall" name="message_wall" value="message_wall"></textarea>
                <ul id="media">
                	<li><img src="images/link.png"> Link</li>
                	<li><img src="images/pictures.png"> Photo</li>
                	<li><img src="images/video.png"> Video</li>
                	<li><img src="images/audio.png"> Audio</li>
                </ul>
                <button type="submit" id="post-to-desk">Post to Desk</button>
                </FORM>
            </form>

THE css is here :

label {
	font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
	font-size:14px;
        color:blue;
}

i think i've done it correctly.help me please..thank you..

web-design

5 Contributors
16 Replies
1K Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by samsons17

All 16 Replies

shaya4207 8 Junior Poster

13 Years Ago

Your code is all messed up...

1. Your 'form' and your 'textarea' have the same 'name' (message_wall)
2. You have an extra 'form' closing tag
3. To the best of my knowledge (and that's pretty good ;)) there's no 'button' tag
4. Why would you preset the 'value' of the 'textarea'?

Jiwe 0 Junior Poster in Training

13 Years Ago

Try the code below made some small changes to make the code look better and actually work.

<html>
	<head>
		<style type="text/css">
			label{
				font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
				font-size:14px;
				color:blue;
			}
		</style>
	</head>
	
	<body>
		<FORM ACTION="" METHOD="">
			<label for="message_wall">What's Your Problem?</label>
			
			<br />
			
			<textarea rows="3" name="S1" cols="104" id="message_wall" name="message_wall" value="message_wall"></textarea>
			
			<ul id="media">
				<li><img src="images/link.png">Link</li>
				<li><img src="images/pictures.png">Photo</li>
				<li><img src="images/video.png">Video</li>
				<li><img src="images/audio.png">Audio</li>
			</ul>
			
			<button type="submit" id="post-to-desk">Post to Desk</button>
		</FORM>
	</body>
</html>

To answer the above post, yes there is a tag 'button' and yes he also has a extra 'form' closing tag and his 'form' and 'textarea' name are the same but not that it matters anyways in this case, but for concistency it would be better to be only in the 'textarea' tag.

TIP: Learn to ident your code it would be better if you did, not only for others but for yourself.

P.S: I did not try your code I just made the changes and it worked, so I guessed you possibly made a bad link to your css file so I made you embbed css.

Edited 13 Years Ago by Jiwe because: n/a

Macko888 0 Light Poster

13 Years Ago

give the labels id`s

so in css::

#tag1
{ 
some css here;
}
#tag2
{
some more css here;
}

then on your form you can say

<label for="message2" id="tag1">Testing2</label>

Macko888 0 Light Poster

13 Years Ago

No problem :)

if you question has been solved, please mark this thread as solved.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

samsons17 -4 Posting Whiz in Training · Answer 1 · 2011-02-01T05:09:42+00:00

Oh thank you..I'll try to organize my codes well next time before posting :)

and if you dont mind i got one more question,how if we want to refer to the specific label tag?
For example if i got

<label for="message1">Testing</label>

and

<label for="message2">Testing2</label>

How do i differentiate them in css so that each of them will have different style??

Thank You..

samsons17 -4 Posting Whiz in Training · Answer 2 · 2011-02-01T19:03:04+00:00

samsons17 -4 Posting Whiz in Training

13 Years Ago

ouh, okay...thank you for helping guys :D

shaya4207 8 Junior Poster · Answer 3 · 2011-02-01T21:00:54+00:00

To answer the above post, yes there is a tag 'button' and yes he also has a extra 'form' closing tag and his 'form' and 'textarea' name are the same but not that it matters anyways in this case, but for concistency it would be better to be only in the 'textarea' tag.

Thanx for teaching me something new today, I only knew about <input type="button" /> which if I'm not mistaken is essentially the same thing

samsons17 -4 Posting Whiz in Training · Answer 4 · 2011-02-03T14:53:51+00:00

i am so sorry,but this thread is not solved yet...
because my css for label tag is still not working actually...
when i put it on my real css file for my real project,it is not working..the css link is all correct,but the problem here is that, my label tag css is inherit all the css properties from the textarea..

my textarea name id is message_wall,and here is the css part :

label{
	color:grey !important;
}

#message_wall{
	font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
	font-size:12px;
	border:1px solid #bdc7d8;
}

while this is the html code :

<FORM id="submit_wall">
    		<div id="problem-level">
        <input type="radio" value="on/off" name="problem_level" class="problem-level">Regular
    	<input type="radio" value="on/off" name="problem_level" class="problem-level">Medium
    	<input type="radio" value="on/off" name="problem_level" class="problem-level">Critical	
            </div>
    	<label for="message_wall" >Whats on your mind??</label> 
                <textarea rows="3" name="S1" cols="104" id="message_wall" name="message_wall"></textarea>
                <ul id="media">
                	<li><img src="images/link.png"> Link</li>
                	<li><img src="images/pictures.png"> Photo</li>
                	<li><img src="images/video.png"> Video</li>
                	<li><img src="images/audio.png"> Audio</li>
                </ul>
                <button type="submit" id="post-to-desk">Post to Desk</button>
            </FORM>

help please.....thanks..

Macko888 0 Light Poster · Answer 5 · 2011-02-03T15:53:39+00:00

Hey Samsons,

give your label the ID or Class,

CSS:

#label_wall
{
	color:grey !important;
}

<label for="message_wall" id="label_wall" >Whats on your mind??</label> 
                <textarea rows="3" name="S1" cols="104" id="message_wall" name="message_wall"></textarea>
                <ul id="media">
                	<li><img src="images/link.png"> Link</li>
                	<li><img src="images/pictures.png"> Photo</li>
                	<li><img src="images/video.png"> Video</li>
                	<li><img src="images/audio.png"> Audio</li>
                </ul>
                <button type="submit" id="post-to-desk">Post to Desk</button>

Not too sure if that answers your question, let me know how it goes

samsons17 -4 Posting Whiz in Training · Answer 6 · 2011-02-03T17:15:19+00:00

Hey Samsons,

give your label the ID or Class,

CSS:

#label_wall
{
	color:grey !important;
}

<label for="message_wall" id="label_wall" >Whats on your mind??</label> 
                <textarea rows="3" name="S1" cols="104" id="message_wall" name="message_wall"></textarea>
                <ul id="media">
                	<li><img src="images/link.png"> Link</li>
                	<li><img src="images/pictures.png"> Photo</li>
                	<li><img src="images/video.png"> Video</li>
                	<li><img src="images/audio.png"> Audio</li>
                </ul>
                <button type="submit" id="post-to-desk">Post to Desk</button>

Not too sure if that answers your question, let me know how it goes

Oh ya...i forgot to mention it before,i already put the id for the label tag,but it is still not working :(

Macko888 0 Light Poster · Answer 7 · 2011-02-04T15:16:12+00:00

ok i think i found your problem. there seems to be a name conflict in your textarea,
you have 2 name attributes,

try this:

<label for="S1" id="label_wall" >Whats on your mind??</label>
<textarea rows="3" name="S1" cols="104" id="message_wall"></textarea>
<ul id="media">
<li><img src="images/link.png"> Link</li>
<li><img src="images/pictures.png"> Photo</li>
<li><img src="images/video.png"> Video</li>
<li><img src="images/audio.png"> Audio</li>
</ul>
<button type="submit" id="post-to-desk">Post to Desk</button>

Macko888 0 Light Poster · Answer 8 · 2011-02-04T15:16:27+00:00

ok i think i found your problem. there seems to be a name conflict in your textarea,
you have 2 name attributes,

try this:

<label for="S1" id="label_wall" >Whats on your mind??</label>
<textarea rows="3" name="S1" cols="104" id="message_wall"></textarea>
<ul id="media">
<li><img src="images/link.png"> Link</li>
<li><img src="images/pictures.png"> Photo</li>
<li><img src="images/video.png"> Video</li>
<li><img src="images/audio.png"> Audio</li>
</ul>
<button type="submit" id="post-to-desk">Post to Desk</button>

samsons17 -4 Posting Whiz in Training · Answer 9 · 2011-02-05T13:12:55+00:00

ok i think i found your problem. there seems to be a name conflict in your textarea,
you have 2 name attributes,
try this:
<label for="S1" id="label_wall" >Whats on your mind??</label>
<textarea rows="3" name="S1" cols="104" id="message_wall"></textarea>
<ul id="media">
<li><img src="images/link.png"> Link</li>
<li><img src="images/pictures.png"> Photo</li>
<li><img src="images/video.png"> Video</li>
<li><img src="images/audio.png"> Audio</li>
</ul>
<button type="submit" id="post-to-desk">Post to Desk</button>

Nope...thanks for trying,,but unfortunately it is not the problem :(

samsons17 -4 Posting Whiz in Training · Answer 10 · 2011-02-05T13:15:09+00:00

oh wait..i forgot to mention,that i am also using a javascript for the label_wall,here is the code :

<script type="text/javascript">
$(document).ready(function() {
	  var searchLabel = $('#tab1 form label').remove().text();
	  $('#message_wall').addClass('placeholder').val(searchLabel).focus(function() {
	    if (this.value == searchLabel) {
	      $(this).removeClass('placeholder').val('');
	    };
	  }).blur(function() {
	    if (this.value == '') {
	      $(this).addClass('placeholder').val(searchLabel);
	    };
	  });
	  $('#tab1 form').submit(function() {
	    if ($('#message_wall').val() == searchLabel) {
	      $('#message_wall').val('');
	    }
	  });
	});
</script>

is there any conclict??

ko ko 97 Practically a Master Poster · Answer 11 · 2011-02-05T13:58:27+00:00

Where are you using CSS ? Is it in your document by embedding or external ? Post your complete HTML and it is close to find the problem.

samsons17 -4 Posting Whiz in Training · Answer 12 · 2011-02-05T17:51:30+00:00

Where are you using CSS ? Is it in your document by embedding or external ? Post your complete HTML and it is close to find the problem.

there is no problem about linking my css file,it works just fine for all..my html is too large, and it might be confusing you then..and above are all the related code for this problem..

styling <label> tag is not working :(

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers