...

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



StadriWebmaster
08-24-2011, 06: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, 06: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, 06: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, 09: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum