2 minor problems need sorting

AdRock · #1 Mar 19th, 2007, 11:34

I have 2 small problems with my form that I can't seem to sort out and don't know if it can be done

The first problem is to do with a drop down list. At the moment the border is the standard blue colour and I would like to change it to mathc the rest of the form. How do I do this?

The second thing is this:

I have labels to the left of my input fields so if the user clicks on the label, the cursor moves into the text box. In the label I have some text which I have got to line up centrally so it looks nice.
Next to my drop down list I have a second label (with input box) which text does not line up correctly. The text is postioned at the bottom of the label. I would like it to match.
Also there is a similar problem with the labels next to the radio buttons (I have used the same class)

Here is the CSS

This css lines up all the label text centered vertically

Code: Select all

.label1 {
   width: 30%;
   float: left;
   margin-right:0.5em;
   padding-top:0.2em;
   text-align: right;
   display: block;
}

This css is for the other labels which doesn't center the text vertically

Code: Select all

 
.label2 {
   width: 10%;
   margin-right:0.5em;
   padding-top:0.2em;
   text-align: right;
}

Here is the HTML

Code: Select all

 
<label class="label1" for="title">Title:</label>
       <select name="title" tabindex="1" id="title">
            <option value=" "> </option>
            <option value="Mr">Mr</option>
            <option value="Mrs">Mrs</option>
            <option value="Miss">Miss</option>
            <option value="Ms">Ms</option>
            <option value="Dr">Dr</option>
            <option value="Rev">Rev</option>
            <option value="Cllr">Cllr</option>
       </select>
 
       <label class="label2">Other:</label><input type="text" name="other" id="other" size="8" tabindex="2" />
 
 
<label class="label1">&nbsp;</label>
       <input type="radio" name="contact" id="R1"><label for="R1" class="label2">Email</label>
       <input type="radio" name="contact" id="R2"><label for="R2" class="label2">Letter</label>
       <input type="radio" name="contact" id="R3"><label for="R3" class="label2">Telephone</label>
       <input type="radio" name="contact" id="R4"><label for="R4" class="label2">Not Required</label>

BGarner · #2 Mar 25th, 2007, 22:06

1. I haven't dealt with styling forms so much, but I would assume you do this with the border attribute.

Code: Select all

.label1 {
  border: solid 1px #(hex code);
}

...or maybe...

Code: Select all

select {
  border: solid 1px #(hex code);
}

2. Can you give us a link so we can see this display issue?

I hope that helps!

AdRock · #3 Mar 26th, 2007, 21:12

Thanks....I managed to sort it out yesterday.

I had to change the margins on the labels to about 1em and changed something on the other labels and now they all line up properly

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Need help sorting an array	djeyewater	PHP Forum	6	Apr 18th, 2008 15:16
Minor IE 6 Problem	mikey	Web Page Design	7	Jun 20th, 2007 07:45
Sorting a PHP array	fallen_angel	PHP Forum	3	Apr 20th, 2007 22:18
CSS (minor help)	john555	Web Page Design	4	Sep 6th, 2006 17:24
Minor design Flash needed	Anonymous User	Flash & Multimedia Forum	0	Dec 7th, 2004 19:43

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
2 minor problems need sorting