Member Avatar for samsons17

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

  • 5 Contributors
  • 16 Replies
  • 1K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by samsons17
Member Avatar for shaya4207

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'?

Member Avatar for Jiwe

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 by Jiwe because: n/a
Member Avatar for samsons17

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

Member Avatar for Macko888

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>
Member Avatar for samsons17

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

Member Avatar for Macko888

No problem :)

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

Member Avatar for shaya4207

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

Member Avatar for samsons17

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

Member Avatar for Macko888

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

Member Avatar for samsons17

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

Member Avatar for Macko888

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>

Member Avatar for Macko888

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>

Member Avatar for samsons17

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

Member Avatar for samsons17

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??

Member Avatar for ko ko

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.

Member Avatar for samsons17

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

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.