Horizontal radio buttons

[rboulder]

Hi,

this one is doing my head in! I'm playing around with wordpress and when I place a form in a widget the radio buttons are horizontally aligned, but when i place the same code in a page, they come out one on top of the other.

I have them in a table and as far as I can see there's nothing that dictates whether they should be horizontal or vertical. I want them horizontal in the main page.

Any ideas on this? I'm thinking I may try and go ahead and code the whole thing in css rather than in a table and see if that helps, but I'm no expert and that'll take a while to sort out.

thanks,

rboulder

 

[Paultbk]

If you haven't yet try this in your CSS

#yourDiv input.radio {
display: inline;
margin-left: 0.5em;
}

If that doesn't work, paste in your table code and I 'll see if I can spot the issue

 

[sysgenmedia]

A link to the page where you're having the issue also really helps others try to figure out the issue.

That said, what I would do isn't much different than what you could do:

If you haven't heard of it, I absolutely recommend getting a copy of the extension Firebug. They have an extension available to add into Firefox and Chrome, and also Firebug Lite which you can get working on other browsers.

It lets you inspect your page element by element and see what styles are applied to it and from what parts of the css.

http://getfirebug.com/ - It's hands-down the most useful tool I've found for debugging website issues.

 

[rboulder]

Thanks for the replies guys,

I'm just waiting to transfer the domain right now, but the site I'm testing on is this (don't laugh):

http://prematurebabyclothes.org.uk/test1/ if you press the search button, it takes you through to the page with the problem. There are two sets of radio buttons.

I got them working here with exactly the same code: http://best-life-cover.co.uk/

@sysgenmedia, I did try firebug but it's not helping me. The problem is for me is that there is no difference in the code, yet it displays inline in a wordpress widget, and vertically on a normal page.

@Paultbk, thanks for that, I did try it but couldn't get it to work. I did spend a while looking elsewhere trying {display:block;} etc but nothing seems to work.

Thanks very much for the help, I appreciate it

cheers,

rboulder

 

[sysgenmedia]

Hmm,

So, just viewed the source in IE, and found this:

<td class="left">
<input type="radio" name="x_C1Smoker" value="No" checked>No&nbsp;</p>
<input type="radio" name="x_C1Smoker" value="Yes">Yes&nbsp;</td>
</tr>

That's for the "Do You Smoke?" question. Note the </p> hanging out after the No option. This is only an issue in IE, it's fine in FF, so I'm guessing that FF is just parsing that out as silly while IE's actually rendering it.

There's the same issue for the lower widget. Also, before that one, you've got the following:

<tr>
<td>Is this a joint application?<em class="star">*</em></td>
<p>        <script>
        function fieldsApp2(_obj) {
        if (_obj.value == 'Yes') {
            document.getElementById('partner_info').style.display = '';
        }
        else {
            document.getElementById('partner_info').style.display = 'none';
        }
        }
        </script></p>
<td class="left">
<input type="radio" name="x_Joint" value="No" checked onClick="javascript:fieldsApp2(this);">No&nbsp;</p>
<input type="radio" name="x_Joint" value="Yes" onClick="javascript:fieldsApp2(this);">Yes&nbsp;</td>
</tr>

Having a <p><script>...</script></p> between your <td>s is going to freak IE out, and you've still got the </p> trailing the no option.

Not sure if it's directly in the code for that section or something Wordpress is echo-ing from some other bit of code in a weird spot, but I'm almost positive those are your problems.

Best of luck!
~Nathan

 

[rboulder]

Hi Nathan,

thanks very much for that! However, I am looking for a heavy wall to bang my head against I still can't get it to work - it seems to be inserting the </p> code by itself as it doesn't appear in the original.

I'm doing the basic layout in Safari and there are </p> tags in the source for that, but I can't remove them as they are not in the code. I removed all spaces, no line breaks etc and that actually inserted a <br /> tag in the source!

I wonder if this is a wordpress problem - the pages seem to handle php and html ok usually, although I'm wondering now if all sorts of other tags have been inserted, lol.



As a separate question, I just found out that Firefox seems to be treating the realtive postion of the search button on http://prematurebabyclothes.org.uk/test1/ differently to both safari and explorer.

I'm also steeling myself to et rid of the tables and have a go with labels, spans etc to see if that helps, but I was hoping there'd be a quick temporary fix to this.

Thanks again for your time, really appreciate the help,

cheers, rboulder

edit: as a final insult explorer won't even view my source code now