Web Analytics Made Easy -
StatCounter What causes radio buttons to look like this? - CodingForum

Announcement

Collapse
No announcement yet.

What causes radio buttons to look like this?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

    Comment


    • #3
      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.

      Comment


      • #4
        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.
        Stop solving problems you don’t yet have!

        Comment

        Working...
        X