A Small Problem Involving a Label

[mattyd]

Hello.

I am having a small problem involving a text label not displaying correctly over a field.

It was fine until about a week ago; I believe I must have changed something and now I do not remember what I did that is causing this error.

The State text label should display over the dropdown but no matter what I try I cannot get it to render in this manner.

Here is code related to this area in question:

`

<!--City Field-->
<label type="grey" for="email">City:</label>
<input type="field" type="text" name="city" id="city" size="23" />

<!--State Field-->   
<label>State:</label>
<select name="state" id="state">

`

Please see attached screenshot.

Thank you in advance!
Matthew !

dd1.jpg

[DaveAmour]

Should it have a for attribute?

Do you not have source control - if so you can check what has changed!

[mattyd]

DaveAmour:

Thank you for your reply.

I do not think it requires a for attribute - It never had one. It is just a simple text label set to display over a dropdown list.

Source control: I have no automated form of source control - I rely on manual back-ups of working code; When all is working I back that file up and start a new development file to work with. In this case, unfortunately, I do not believe I have such a back-up file.

[JorgeM]

Can you provide the relative CSS code as well?

[DaveAmour]

You can hit F12 in most browsers and see what CSS is in action to help diagnose.

Source control is so easy to implement, can't recomend it enough.

[mattyd]

JorgeM:

I believe this may be relative, but I am not exactly sure (Note: Last year I hired a programmer to develop one feature of my site and I fear she made many changes that I am just becoming aware of now - No detailed documentation was provided by her as to the changes. That was my fault for not thinking to request it. Lesson learned!)

`

#panel .content label {
    float: left;
    padding-top: 8px;
    clear: both;
    width: 280px;
    display: block;
}

`

Also, This CSS has never been edited by me yet at this point.

Thanks,
Matthew

[Heanre]

you might want to use div or just as JorgeM suggested, post the css code..

http://www.dummies.com/how-to/content/using-the-div-tag-to-create-tables.html

[JorgeM]

hmm... no that snippet of css wasnt really helpful. if you have the site online, we can take a look and use the browser tools (f12 as DaveAmour suggests) to view the markup and css in detail. Or, if you dont have it online and you are comfortable with html and css markup, the next best thing would be to publish that signup form on jsfiddle.net.

sorry, i wish i could be or more help with what you have posted thus far.

[JorgeM]

Maybe this would be of some help. put this together very quickly and i know that using tables for this purpose is not optimal but i find that it works well.

.box {
   display: block; 
   margin: 0 2em 1em 0; 
   min-width:5em; 
}


<label for="name">Name:</label>
<input type="text" name="name" id="name" class="box" />

<label for="email">Email:</label>
<input type="text" name="email" id="email" class="box" />

<table>
 <tr>
   <td>
     <label for="city">City:</label>
     <input type="text" name="city" id="city" class="box" />
   </td>
   <td> 
     <label for="state">State:</label>
     <select name="state" id="state" class="box">
       <option>A</option>
       <option>B</option>
     </select>
   </td>
  </tr>
</table>

produces this...

[mattyd]

The link to the site is as follows:

Click Here

Please note, it is in a dev state and far from finished.

Thank you to anyone that takes a look and can give me a pointer in the right direction.

Matthew

[DaveAmour]

Dirty hack but you can try <label style="position: relative; top: -44px; left: 200px">State:</label>

[gentlemedia]

Like JorgeM pointed out you will need wrappers around the City and State elements (label + input) together in order to line them up next to each other. But not a table > tr > td... just a div > div tag.

Demo: http://cssdeck.com/labs/full/4cznbjai

HTML:

<form>

  <div>

    <div>
      <label for="city">City:</label>
      <input type="text" name="city" id="city" />
    </div>

    <div>
      <label for="state">State:</label>
      <input type="text" name="state" id="state" />
    </div>

  </div>

</form>

CSS:

div { float: left }
div > div:first-child { margin-right: 20px }
label, input { display: block }

[mattyd]

DaveAmour:

Actually your hack worked wonderfully. Thank you so much for taking the time with this for me. I appreciate it!

Matthew

[DaveAmour]

I know it works perfectly but I feel so dirty now!

[mattyd]

Dave,

I generally do not like to use what might be considered work-arounds (For various reasons) but in this case it seems just fine. Thanks again!

Matthew

[Troy III]

mattyd
you've changed the width of your form container - or you'vechanged the font or size; anything of that kind - or simply added borders, -just ad some more space to elements in the container and it will come back to normal.

p.s.: next time avoid using floats for the given purpose, as you can see they will let you down with a big question mark above your head.