PDA

View Full Version : What causes radio buttons to look like this?



StadriWebmaster
08-24-2011, 05:10 PM
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!

http://www.stadriemblems.com/email/radio.jpg

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

resdog
08-24-2011, 05:32 PM
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.

bastones
08-24-2011, 05:59 PM
Probably this piece of 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:


width:175px;

As the radio button code is:


<input type="radio">

Check whether the radio buttons have a class attribute attached, like this:


<input type="radio" class="input">

If they do, it'll be due to this in your CSS 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.

VIPStephan
08-24-2011, 08:35 PM
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.