Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder StadriWebmaster's Avatar
    Join Date
    Aug 2011
    Location
    NY
    Posts
    42
    Thanks
    4
    Thanked 2 Times in 2 Posts

    What causes radio buttons to look like this?

    I am trying to make some radio buttons and this is what they end up looking like by default- all elongated. They don't even have a style applied to them. I figure it must be something in my stylesheet, but I don't know what. Can someone who is good with css take a look? Thanks!



    Link to style sheet:
    http://qualitywovenlabels.com/style.css

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Can you supply the html markup for these, as you may be assigning the buttons to a class without knowing it, but we can't tell unless we see what code you are using.

  • #3
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Probably this piece of code:

    Code:
    input{
       	border-right:1px solid #cecbb8;
       	border-top:1px solid #595a4e;
       	border-left:1px solid #595a4e;
       	border-bottom:1px solid #cecbb8; 
    	background:#f2f2e6;
    	width:175px;
    	font-size:1em;
    	padding-left:5px;
    }
    Specifically:

    Code:
    width:175px;
    As the radio button code is:

    Code:
    <input type="radio">
    Check whether the radio buttons have a class attribute attached, like this:

    Code:
    <input type="radio" class="input">
    If they do, it'll be due to this in your CSS code:

    Code:
    .input{
    	width:118px;
    	font-size:1em;
    	padding-left:5px;
    	margin-left:25px;
    	vertical-align:middle;
    	background:#FFFFFF
    }
    And likewise if it is the .input1 class in your CSS code.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    You can as well write input[type=text] {…} if you only want to style inputs with a “type” attribute that has a value of “text” (i. e. only text inputs) or alternatively you can reset the width for radio buttons with input[type=radio] {width: auto;}. In IE 6 these style declarations don’t work so you may have to resort to classes as stated earlier, if you need to supply for IE 6, too.


  •  

    Posting Permissions

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