Serendipity Forums

I'm using an HTML NUGGET plug-in to put Google Search on my homebuilt airplane blog. When I installed it, the formatting breaks for some reason, and it stretches my sidebar so that it's too large.

I want the radio buttons to be on the same line (and close to their text description) I've tried reformatting the bar a few times and nothing seems to help. Any ideas?

You can see what's happening by visiting my blog at http://www.quickheads.com/danyager

Thanks in advance.

It doesn't look like those two radio buttons will fit on the same line. Each button and its description may fit on a single line, for two lines under the search button.

The big problem is that your template's CSS includes this snippet: Since a radio button is a kind of input, and it's in a .serendipitySideBarContent, it's getting set to 150px wide. Naturally there's no space left for the text.

Luckily, this is an HTML nugget, so you can do anything with it you want. I think the easiest thing is to assign the radio buttons an inline style.

Don't let Carl or Dave know I told you about this! :lol: Inline styles are frowned upon in the CSS community. I don't like them, either, but the alternative is to assign your form, input, or a wrapping div a class, and then editing your style.css file to style that particular bit. I don't know if you have these skills, so I'm going with something you can modify in the nugget itself.

To return the radio button to its natural width and placement, change the line in your nugget to: And so on for any other inputs you want at their natural width. Alternatively, you could assign a particular width. (Google up CSS if you're not familiar with it.)

Good luck!

Judebert - You're the best! Thanks for seeing that. I decided not to do the inline CSS since I thought I might get in to trouble with Google, but I went and changed my style.css to show a width of "auto"

I tried wrapping a DIV ID around my HTML NUGGET but I couldn't get that to work. I may try again later. It woks good enough for me as is in the meantime.

Again I really appreciate the help.

Cheers,
McFly

Glad it worked out!

I'm surprised the wrapping DIV didn't work. You'd have to put it after the other lines in your style.css, of course, or it would be overridden. You might also want to make it as specific as possible (IDs are more specific than classes).

If you're still interested in pursuing this, I'd give my wrapping div an ID (say, "googlesearch"), and then use this CSS at the bottom of styles.css: Glad you got it working!

I think that's what I did. I'll give it another try later. You may be right about me putting it in the wrong place in the stylesheet.

Probably a common CSS newbie misunderstanding. Thanks again Judebert!

Cheers,
McFly