radio buttons disappear in ie and chrome

Question

The below is in style sheet

 select,input ,td a {border:1px solid green; width:25%;height:25px;font-size:20px;margin-  left:.1em;}
input.myradio {border:none;width:0%;height:0%;font-size:0%;}

The below is in html

<td><input class="myradio"  type="radio" name="poolstatus" value="Add">Add</input><td>

It's perfect in firefox but chrome and IE are not showing radio buttons? Why so?

Crenation

I can't tell if maybe you didn't copy/paste the code properly, but your td isn't closted properly and you have a space in margin-left – Serena

its a copy paste typo - sorry – Crenation

Answer 1

It's because you have told the radio button to be 0% tall - which is 0px - which is not there.

You can override this by telling the height and width to be 'auto' which will reset them (unless there's a rule which is more specific somewhere else in the stylesheet)

input.myradio {
  border:none;
  width:auto;
  height:auto;
}

Edraedrea

yes thts works, i wanted to override the rule of generic select as it was all inclusive and input['text'] was not working well, thx so much – Crenation

input['text'] isn't a valid CSS selector, I think that you meant to use the 'attribute selector', which would be input[type=text] - but that doesn't work in IE6, so it's up to you to make the decision as to whether you want to support IE6 or not :) – Edraedrea

Answer 2

My guess is the "width:0%;height:0%" in your input.myradio class. you need a width and height.

Try this:

input.myradio {border:none;width:1em;height:1em;}

Electrostatics

it overriding over the generic select rule which is not suitable for radio and giving a manual width either in % or em or px does not work, I dont know why but auto works – Crenation

Answer 3

Why do you have a height and width specified of 0% for them? I'm guessing that is why IE and Chrome are not showing the radio button,s because they have a size of 0 pixels.

Kellum

Answer 4

You need to put your radio button within <form> tag and they will appear in Chrome and IE:

<form><input type="radio" /></form>

Dukie