Side by Side Radio Buttons

CMS & WordPress
1

I am making a form and need the radio buttons to be side by side. This is the html for my radio buttons:


<form method="post">
<input id="li_1" input type="radio" name="carrier" value="ATT" /> AT&amp;T
<input id="li_2" input type="radio" name="carrier" value="Verizon" /> Verizon

And this is my CSS (note: since this is in the wordpress post editor I have a plugin installed to let me use custom CSS for pages/posts)


#li_1 label.choice {
	display:inline;
	position:relative;
	margin-left: 0.2em;
	_top:0.2em;
}

#li_2 label.choice {
	display:inline;
	position:relative;
	margin-left: 0.2em;
	_top:0.2em;
}

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

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

But the radio buttons still won’t display side by side. Any thoughts? Did I not define the input id correctly, what seems to be the problem here?

2

What do you mean by “side by side”? At the moment, everything appears in one line (at least on my browsers).

Your markup is incomplete, though. The text should be wrapped in labels:

<form method="post">
<input id="li_1" input type="radio" name="carrier" value="ATT" /> [COLOR="Blue"]<label for="li_1">AT&amp;T</label>[/COLOR]
<input id="li_2" input type="radio" name="carrier" value="Verizon" /> [COLOR="Blue"]<label for="li_2">Verizon</label>[/COLOR]
</form>
3

When I said “side by side” I mean like the radio buttons here:
Radio Button Sample

As for my radio button code being incomplete - I just didn’t include all of my code in my original post. This is all of it:


<form method="post">
<input id="li_1" input type="radio" name="carrier" value="ATT" /> 
<input id="li_2" input type="radio" name="carrier" value="Verizon" /> 

<input type="submit" value="Submit" />

</form>

<? include('form_process.php'); ?>
4

You have no labels there. How will anyone know what they are choosing? The CSS includes styles for the labels.

Anyway, as I said, these radio buttons ARE displaying side by side for me in every browser. So what browser are you viewing this in?

5

Whoops, I accidently deleted the labels. I just put them back, Anyways I am viewing in Safari.

6

Cool, so all fixed then? It all shows in one line for me in Safari. If not for you, then repost your full code.

7

For some reason its still is not showing on one line, maybe it is has to do with my wordpress theme? Here is the HTML Code (thats in the WP Page Editor)


<form method="post">
<input id="li_1" input type="radio" name="carrier" value="ATT" /> AT&T
<input id="li_2" input type="radio" name="carrier" value="Verizon" /> Verizon

<input type="submit" value="Submit" />

</form>

<? include('process.php'); ?>

And this is the CSS I have in the plugin (the plugin enables the CSS in WP Posts/Pages):


#li_1 label.choice {
    display:inline;
    position:relative;
    margin-left: 0.2em;
    _top:0.2em;
}
 
#li_2 label.choice {
    display:inline;
    position:relative;
    margin-left: 0.2em;
    _top:0.2em;
}
 
#li_1 input.radio {
    display: inline;
    margin-left: 0.5em;
}
 
#li_2 input.radio {
    display: inline;
    margin-left: 0.5em;
}
8

Argh! You are back to that non-label version. :mad:

I suspect something else in your CSS is messing things up, as that code makes everything appear on one line. It would be best now to post a live link.

9

Just having AT&T/Verizon after the line of code makes it show so I don’t see why I need the <label> code, it works either way.

Either way, its not showing on one line - take a look:

test2

(I know the form does not work when you click submit, I’m just trying to get this problem fixed before I go on and complete the form).

10

The <label> element has very important meaning in HTML, and is crucial for the form to be meaningful—if not visually, then to anyone useing a screen reader, for example. Associating the <label> with the input also makes the input easier to click etc etc. Bad HTML syntax is like bad grammar, punctuation or spelling; or like poor structural engineering. It’s really basic stuff in web design. Just sayin’. :slight_smile:

I’ll look at your link now.

11

OK, works in FF but not Safari. In Safari, there are empty <p> elements appearing between the <inputs>. First thing I’d try is marking up those labels properly. That might be throwing Safari. Otherwise it’s a CMS issue.

EDIT: indeed, the CMS is closing off each line as if it’s a <p>. I suspect that’s because it’s confused about the text with no markup.

<input id="li_1" input type="radio" name="carrier" value="ATT" /> AT&#038;T[COLOR="Red"]</p>[/COLOR]

By not using proper markup, you are leaving things to chance.

12

Oh I didn’t know it wasn’t the proper markup (on the W3Schools tutorials they don’t use the <label> code so that’s why I didn’t).

EDIT: indeed, the CMS is closing off each line as if it’s a <p>. I suspect that’s because it’s confused about the text with no markup.

So is there anything I can do? Will I not be able to use my current theme? There might be a WordPress Plugin to solve the problem…

13

Steer clear of w3schools. It’s a muchly discredited site now, out of date and full of misinformation.

So is there anything I can do? Will I not be able to use my current theme? There might be a WordPress Plugin to solve the problem…

I’m confused. Can’t you just update the code as we’ve discussed it? Your earlier comments suggest that you are able to alter the code, or that you’ve written it (based on what you’ve read etc.)

14

Thanks for the heads up.

I’m confused. Can’t you just update the code as we’ve discussed it? Your earlier comments suggest that you are able to alter the code, or that you’ve written it (based on what you’ve read etc.)

Yes I wrote the code so I have access to it. When you say ‘update’, are you talking about adding the closing paragraph tags?


<input id="li_1" input type="radio" name="carrier" value="ATT" /> <label for="li_1">AT&amp;T</label></p>
<input id="li_2" input type="radio" name="carrier" value="Verizon" /> <label for="li_2">Verizon</label></p>

I tried doing that and it didn’t change anything.

15

No, I’m saying replace your code with this (which I posted above):

<input id="li_1" input type="radio" name="carrier" value="ATT" /> <label for="li_1">AT&amp;T</label>
<input id="li_2" input type="radio" name="carrier" value="Verizon" /> <label for="li_2">Verizon</label>

That’s how it should be marked up. :slight_smile:

16

Just tried using the code you posted and still nothing, or were you just posting that code to show me how its supposed to be marked up?

17

Both. Those lines just replace the two you posted in the previous post. Do you have an online example so we can see it in action? It works for me locally, so perhaps, again, there are other styles in the way.

18

O, I see the test2 version is updated. OK, well there’s still a </p> at the end of each line. Is that something you’ve put in there, or is the CMS doing that? Those should not be there. Firefox ignores them, but Safari places a whole paragraph between each intput/label pair, creating havoc.

19

test2

My theme has an option for custom CSS styling, tried adding it in there and that didn’t work either.

20

We posted across each other. See my second post. There are still straggling </p> tags in there. Did you write them, or are they being entered by the CMS?