Forum Moderators: open
I'm brand new to webmaster world.
I've been told that the radio buttons on one of my sites do not work under Safari if I use CSS to format them.
In particular, the following WORKS (no CSS):
<p><input type=radio name="aa" value="1">Choice 1</p>
<p><input type=radio name="aa" value="2">Choice 2</p>
The following does NOT WORK:
<p class="ans"><input type=radio name="ab" value="1">Choice 1</p>
<p class="ans"><input type=radio name="ab" value="2">Choice 2</p>
Where my CSS file specifies:
p.ans {
font-size: 11px;
margin-top: 5px;
margin-bottom: 0px;
margin-left: 20px;
text-indent: -20px;
}
A third version seems to work on some versions of Safari:
<div class="ans"><input type=radio name="ac" value="1">Choice 1</div>
<div class="ans"><input type=radio name="ac" value="2">Choice 2</div>
Where my CSS file specifies:
div.ans {
font-size: 11px;
margin-top: 5px;
margin-bottom: 0px;
margin-left: 20px;
text-indent: -20px;
}
You can see the three versions in action at <Sorry, no URLs. See TOS [webmasterworld.com]>
I don't have a Mac myself, so it's difficult for me to test this out. Any help at all in figuring out how to get this to work will be greatly appreciated!
By the way, the reason I need the margin-left:20px and text-indent: -20px in my CSS is that some of the choices are lengthy... if a choice wraps around, I want all of the text to be left-justified.
Thanks in advance!
[edited by: tedster at 6:56 am (utc) on Feb. 12, 2004]
Try something like this:
<style type="text/css">
.ans {
padding-left: 20px;
width: 200px;
}
.ans input {
margin-left: -20px;
}
</style>
This will apply padding to the text, but move the input element clear to the left. Using margins on the .ans element can cause the radio button to disappear completely.
Thanks for the tip. It works on Windows (as do the other versions). Can anybody out there confirm that it works on Safari?
<Sorry, no URLs. See TOS [webmasterworld.com]>
[edited by: tedster at 6:57 am (utc) on Feb. 12, 2004]
