Radio button text not aligning properly

HTML & CSS
1

What’s causing the problem with the text in this first radio button?

http://shrink-art.com/test/delete2.html

It looks like the kind of error you get when there’s a missing end tag or quote or something, but it’s validating just fine.

2

You didn’t describe what the problem is, so this is just a guess…


ul#delCatflagul span.radioText {
    display: inline-block;
    margin-left: 3px;
    margin-top: -1.2em;    /* delete me */
}

matches the text beneath the second button.

3

It’s the top line - it doesn’t line up properly with the radio button. Removing the margin-top makes it different but still not right. I’ve attached a screenshot this time - the circled part is below the radio button instead of beside it like it should be. That’s what I’m trying to fix. The other two radio buttons are fine. That’s what made me think it was just a missing tag or something.

4

OK, I think something like this will probably do the trick. Since the name of this style sheet is “default” and it has thousands of lines, you may want to override these styles on a local style sheet.

default.css (line 1560)


ul#delCatflagul span.radioText {
    display: inline-block;  /* delete me, or override by changing me to {display:inline} */
    margin-left: 3px;
    margin-top: -1.2em;    /* delete me */
    vertical-align: 0.25em;  /* add me */
}

And FYI, only the bottom button has the test aligned beside it, the text starts below the top two buttons. FF, Chrome, Opera.

5

Hmmm . . . yes, but all other radio buttons in the app have the text aligned to the right of the radio buttons (i.e., the inline-block). This would be the only one that wraps back under the radio button. There’s got to be a reason it’s not working. The others in the app DO work - with code that’s basically the same. I’m not seeing what’s making this one different but there’s got to be something I’m missing.

6

Are you saying that all of the text is supposed to stretch to the right of the radio button? Nothing is supposed to wrap beneath it?

7

This tag is styled inline.


<div id="confirmContent" style="width: 300px;">

If you delete that width, the text stretches to the right beside the radio button.

8

But then again, maybe that’s not what you are saying, either.

Maybe it’s more like this:

If so, then:


#delCatflagul {
    padding:0;    /* changed from:  padding:0 0 0 10px; *//* recommended, not required */
}

li {
    line-height: 1.2em;
    margin: 10px 0;     /* changed from:  margin:10px; *//* recommended, not required */
    padding: 0;     /* changed from:  padding:0 0 0 2px; *//* recommended, not required */
}

ul#delCatflagul span.radioText {
    display:block;    /* changed from  inline-block *//* required */
    margin-left: 25px;    /* changed from 3px *//* required */
    margin-top: -1.3125em;    /* changed from -1.2em *//* recommended tweak */
}
9

Hi,

When an element is inline-block the width of the element is shrunk wrap to the content. If the element is stretched by content then it will try to be 100% wide which results in the element looking for 100% space which it won’t find alongside another element so it will drop down to a new line (just as widthless floats would do).

If you want a wrapping behaviour with inline-block then you need to specifiy a width that matches the remaining line length.

Also the benefit of using inline-block is that you can automatically vertically centre the element so you don’t need negative margins as the element will itself adjust automatically.

You can achieve that with just a couple of simple changes as follows:


ul#delCatflagul span.radioText {
    display: inline-block;
    margin-left: 3px;
[B] /*   margin-top: -1.2em;*/
    vertical-align: middle;
    width: 90%;[/B]
}
10

Both of those achieve the result I was looking for. Thanks to each of you.

And I need to remember that if I want to use inline-block, I have to also give it a width. I think I’ve got it. Thanks.

11

You only need a width if you want the element to stay on the same line with other content.

If for example you have a menu with 20 links then there would be no need for widths because you’d want each one to shrink-wrap the content and adding widths to each one would defeat the purpose.

When an inline block element wraps it will wrap to a new line just like a word of text would. However if that word is the whole page wide then it won’t stay on the same line as the first word and will wrap underneath. It’s much the same behaviour for inline-block.

You need only apply widths to inline-block when it is likely that content will stretch it to the whole line width (as it would with a line of text or other fluid content) .

12

Thanks, Paul. This is helpful.