SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Radio Button Vertical alignment?

    I could do with some help tidying up some table free forms.
    Most of the form is in a nice sorted two collum layout, I have ajusted the lable text so it aligns up with the centre line of the text entry boxes, nice and neat. The problem I am having is with the Radio buttons, the text always shares the same baseline as the radio button, which looks untidy. I have tryed adding pading or margin to the input.radio class, with which I can move it side to side but adding it to the top or bottom doesn't move it up or down. I also added the class 'radio-lab' in an attempt to move the text up, but that didn't work ether. Any ideas?

    CSS
    Code:
    input.radio {
    	padding: 0 10px 0 0;
    }
    form p .formx  {
      float: left;
      margin: 0 0 0 10px;
      text-align: right;
    }
    form p .radio-lab {
      margin: 0 6px 10px 0;
    }
    form p .widetitle {
    	text-align: right;
    	float: left;
    	width: 340px;
    }
    HTML
    Code:
    <form>
    <p><span class="widetitle">Question for the button section?</span>
    		  <span class="formx"><span class="radio-lab">No</span><input type="radio" name="Title" value="No" class="radio" />
    		  <span class="radio-lab">Yes</span><input type="radio" name="Title" value="Yes" class="radio" /></span></p>
    </form>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    usually you should use vertical-align properties to line up inline elements. However I have noticed that mozilla and ie differ in how they align some of these form elements anyway.

    What you could do is use a bit of brute force and put the button where you want.

    e.g.
    Code:
    input.radio {
     padding:0 10px 0 0;position:relative;top:-2px;
    }
    I couldn't see in the snippet you gave which way you were trying to go as the snippets is all aligned on the same line anyway.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that works. I forget about the 'top' value for stuff.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •