Can't identify what CSS to change for spacing

[laburke]

I'm trying to fix the radio buttons at the end of this form:
http://shopontonagon.com/bulletin-board/place-ad/

Using Firebug, I can change the width here to 5% and it works...

.format_text input, #commentform input, #commentform textarea {
border-width: 0.063em;
padding: 0.188em;
width: 45%;
}

...but then all the text input fields are super short. What would I add to style ONLY those radio button options? I'm using Thesis so I can put something in the custom file editor, but I don't know what to put and then how to modify the HTML within the classified plugin I'm using.

Part of the problem is that I don't fully understand Firebug. What does it mean when certain things are crossed out?

I have another question for this same site but I'll start a different thread.

[Stevie D]

...but then all the text input fields are super short. What would I add to style ONLY those radio button options?

A-ha, you need attribute selectors.

Instead of just input, if you use input[type="radio"] then the rule will only match radio inputs, and will be ignored by all other inputs.

[Victorinox]

If you want to support IE6, which does not recognise attribute selectors, you could add a class to each radio input and apply the width to that. e.g.

<input type="radio" class="radio" value="1" onclick="awpcp_toggle_visibility_reverse('showhidepaybutton');" name="adtermid">

input.radio {width:5%;}

[laburke]

Thanks, guys, for responding. The thing is, it appears to already say input type="radio". Also, I don't know where to add the radio class, since this is within a WordPress plugin. Any ideas?

[Victorinox]

You can add the CSS rule described by Stevie to the plugin's stylesheet:

/wp-content/plugins/another-wordpress-classifieds-plugin/css/awpcpstyle.css

If you want to target the radio inputs in that specific part of the page rather than globally, include the ID of the form in the selector:

#adpostform input[type=radio] {width:5%;}

As for adding a class, I've installed and looked through the plugin but can find no obvious way to edit the generated markup other than editing the code in the Wordpress Edit Plugin window or the awpcp.php file itself. It may be best to seek support from the plugin's forum for how best to go about this.

[laburke]

Thank you very much for your help. I will do that.