SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Radio button text not aligning properly

    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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    You didn't describe what the problem is, so this is just a guess....
    Code:
    ul#delCatflagul span.radioText {
        display: inline-block;
        margin-left: 3px;
        margin-top: -1.2em;    /* delete me */
    }
    matches the text beneath the second button.

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    You didn't describe what the problem is, so this is just a guess....
    Code:
    ul#delCatflagul span.radioText {
        display: inline-block;
        margin-left: 3px;
        margin-top: -1.2em;    /* delete me */
    }
    matches the text beneath the second button.
    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.
    Attached Images Attached Images

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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)
    Code:
    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. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by tryin_to_learn View Post
    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.
    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. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    This tag is styled inline.
    Code:
    <div id="confirmContent" style="width: 300px;">
    If you delete that width, the text stretches to the right beside the radio button.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    But then again, maybe that's not what you are saying, either.

    Maybe it's more like this:

    tryin-to-learn.gif

    If so, then:
    Code:
    #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. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:

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

  10. #10
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tryin_to_learn View Post

    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.
    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. #12
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. This is helpful.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •