SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Radio Button Styling

    Hey everyone,

    Styling a web form and of course, ran into a problem. I have this for the radio button code:

    Code:
    <td><input class="radio" type="radio" name="relatedToArticles" value="yes">yes 
    		<input class="radio" type="radio" name="relatedToArticles" value="no">no</td>
    Notice the class="radio". Now in CSS I have this for the input element selector and the special radio class

    Code:
    #contact input{
    border:1px solid #14314F;
    color:#000000;
    font-family:Verdana, "Times New Roman", Helvetica, sans-serif;
    }
    
    .radio{
    border:none !important;
    color:#000000 !important;
    font-family:Verdana, "Times New Roman", Helvetica, sans-serif !important;
    }
    Of course, IE 6 won't quite play ball, the circle loses half of its border. Opera and Mozilla play ball with this fine. Anybody know what IE 6 doesn't like?

    Thanks.
    Ryan Butler

    Midwest Web Design

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although I would love to someone to answer this question, in this scenerio since I have this for structure:

    Code:
    <form action="" method="post" name="simple" id="simple">
    <table width="600" border="0" cellpadding="2" cellspacing="0">
      <tr>
        <td>Name:</td>
        <td><input name="name" type="text" class="text" size="25"></td>
      </tr>
      <tr>
        <td>E-mail</td>
        <td><input name="email" type="text" class="text" size="25"></td>
      </tr>
      <tr>
        <td>Rate this site: </td>
        <td><select name="rateSite">
        <option value="null">---------------------</option>
    	<option value="Poor">Poor</option>
    	<option value="Good">Good</option>
    	<option value="Excellent">Excellent</option>
    	</select>
    	</td>
      </tr>
      <tr>
        <td class="top">Referred By: </td>
        <td><textarea name="referredBy" cols="25" rows="4"></textarea>&nbsp;</td>
      </tr>
      <tr>
        <td class="top">Favorite Search Engine:</td>
        <td>
          <input name="searchEngine" type="radio" value="google">
          Google<br />
    	  <input name="searchEngine" type="radio" value="msn">
    	  MSN<br />
    	  <input name="searchEngine" type="radio" value="altavista">
    	  Alta Vista
          </td>
      </tr>
      <tr>
        <td class="top">Which products do you use?</td>
        <td><input name="products" type="checkbox" class="checkbox" value="mx2004">
        Macromedia Studio MX 2004<br />
    	<input name="products" type="checkbox" class="checkbox" value="msOffice2004">
    	MS Office 2003<br />
    	<input name="products" type="checkbox" class="checkbox" value="vs2004">
    	Visual Studio .NET<br />
    	<input name="products" type="checkbox" class="checkbox" value="adware">
    	Ad-Aware</td>
      </tr>
      <tr>
        <td class="top">Comments:</td>
        <td><textarea name="comments" rows="4" cols="25"></textarea></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type="submit" value="submit" name="submit"><input type="reset" value="reset" name="reset"></td>
       </tr>
    </table>
    </form>
    I'm thinking it would be easier for cross browser support if I just assigned the two text boxes the special border class and then all browsers would be peacy on the radio and check boxes.
    Ryan Butler

    Midwest Web Design

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

    I'm not sure I see the problem.

    In IE6 the circle has a border its just darker at the top and lighter at the bottom for its 3d effect. Which is how I think its supposed to look.

    When you target elements you should be more specific as id's carry more weight which is why you have resorted to !important I assume.

    If you specify the path then this has more weight and will overide the normal declaration.
    Code:
    #contact input.radio{
    !important will make sure that nothing overrides the style even styles later in the stylesheet (in browsers that understand it of course.)

    Paul

  4. #4
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, didn't realize IE did that. I figured since Opera and Moz were playing nicely that IE was the brat, guess not.

    Either way, each situation would work. I'll try being a tad more specific using your code.
    Ryan Butler

    Midwest Web Design

  5. #5
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol, now I know what I was referring to with the radio button. If you take from my first code I posted I wanted the text boxes to have a border and the radio buttons needed to have their default border. This is why I decided on the second method. Is there a solution to the first code?
    Ryan Butler

    Midwest Web Design

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

    I think I understand what you mean now. When you style the border of the input then the radio buttons in IE lose their default circular border which isn't replaced even if you set border none for the radio explicitly. Setting the border just gives you the square border.

    I think this is one of those things that can't be styled in ie (Like the round corners in fieldsets that revert to square if you change any settings).

    You will need to target the other inputs with classes instead and leave the radio alone.

    Paul

  7. #7
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I figured. Ah, IE, its a brat! Thanks as always.
    Ryan Butler

    Midwest Web Design


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
  •