3

I have a ordered list that have some sentences and some radiobuttons.

I have the expected result, but I see a weird thing: the radio buttons are misaligned. I try to replicate the issue and make a simple html with only the relevant code.

That's a zoomed picture of the result I have (I put the turquoise lines in PS to see better the effect):

enter image description here

And that's the expected result: enter image description here

As you can see in the first zoomed picture, the radio buttons are misaligned. Why this behaviour? How can I fix this?

The code I have tried:

<div class="test">
<ol class="test_inner">
        <li>
            <div>chanante ipsum dolor sit amet, quis eveniet mangurrián</div>                                 
            <div>
                <input type="radio" name="myRadio2"/>
                <input type="radio" name="myRadio2"/>
                <input type="radio" name="myRadio2" checked="checked"/>
            </div>
        </li>
        <li>
            <div>zanguango magna ex labore bufonesco gambitero</div>           
            <div>
                <input type="radio" name="myRadio3"/>
                <input type="radio" name="myRadio3" checked="checked"/>
                <input type="radio" name="myRadio3"/>
            </div>
        </li>
        <li>
            <div>chotera nisi chavalada pepinoninoni ullamco nisi ullamco</div>                                   
            <div>
                <input type="radio" name="myRadio4" checked="checked"/>
                <input type="radio" name="myRadio4"/>
                <input type="radio" name="myRadio4"/>
            </div>
        </li>
        <li>
            <div>aliqua tontiploster sed eveniet sed ex viejuno</div>                                           
            <div>
                <input type="radio" name="myRadio5"/>
                <input type="radio" name="myRadio5" checked="checked"/>
                <input type="radio" name="myRadio5"/>
            </div>
        </li>
        <li>
            <div>cosica soooy crossoverr to sueltecico ad ex gaticos ullamco</div>                                
            <div>
                <input type="radio" name="myRadio6"/>
                <input type="radio" name="myRadio6"/>
                <input type="radio" name="myRadio6" checked="checked"/>
            </div>
        </li>
                <li>
            <div></div>                                 
            <div>
                <input type="radio" name="myRadio7"/>
                <input type="radio" name="myRadio7"/>
                <input type="radio" name="myRadio7" checked="checked"/>
            </div>
        </li>
        <li>
            <div>ea elit aliqua minim bizcoché pepinoninoni</div>           
            <div>
                <input type="radio" name="myRadio8"/>
                <input type="radio" name="myRadio8" checked="checked"/>
                <input type="radio" name="myRadio8"/>
            </div>
        </li>
        <li>
            <div>nisi minim ayy qué gustico enim ullamco saepe minim labore, nisi fresquete, super ñoño eveniet cartoniano magna</div>                                   
            <div>
                <input type="radio" name="myRadio9" checked="checked"/>
                <input type="radio" name="myRadio9"/>
                <input type="radio" name="myRadio9"/>
            </div>
        </li>
        <li>
            <div>adipisicing quis eres un pirámidee veniam</div>                                           
            <div>
                <input type="radio" name="myRadio0"/>
                <input type="radio" name="myRadio0" checked="checked"/>
                <input type="radio" name="myRadio0"/>
            </div>
        </li>
        <li>
            <div>síberet traeros tol jamón</div>                                
            <div>
                <input type="radio" name="myRadio1"/>
                <input type="radio" name="myRadio1"/>
                <input type="radio" name="myRadio1" checked="checked"/>
            </div>
        </li>
    </ol>
</div>

The css I have:

.test ol.test_inner {list-style:none; counter-reset:list; font-size:90%;}
.test ol.test_inner li {padding:.3em 0 .3em .5em; background:gray;}
.test ol.test_inner:before {content:"1 2 3"; text-align:right; display:block; font-size:110%; font-weight:bold; letter-spacing:0.6em;}
.test ol.test_inner li:nth-of-type(odd) {background:pink;}
.test ol.test_inner li:before {counter-increment:list; content:counter(list, lower-alpha) ") "; color:#cbaa0e; padding-right:.5em; font-weight:bold;}
.test ol.test_inner li div {position:relative; display:inline-block; width:15%; text-align:right; vertical-align:middle}
.test ol.test_inner li div:first-child {width:80%; text-align:left;}
.test ol.test_inner li div input[type="radio"] {opacity:1; height:1.6em; width:1.6em; cursor:pointer; margin:0;}

For more details, I see the bad aligment in all browsers.

EDIT: As Goombah and codingstill alerts me, the horizontal misaligment is caused by the letters in the alpha list (different widths). But I still have the doubt why some radios are vertically misaligned too. Finally, I think this need another question. I'll leave the whole question here only for inquiry purposes if any user finds the same problem.

5
  • What happens if you try position: absolute? Jan 3, 2014 at 12:45
  • 1
    @BFDatabaseAdmin Mmmmhhh... i prefer to avoid it. I want the website to be responsive and flexible, and that solution makes me do a lot of mediaqueries to avoid the overlap between the sentence and the radios (in small widths). Thank you anyway ;)
    – Arkana
    Jan 3, 2014 at 13:17
  • I just saw your edit. The vertical misalignment is consistent in all browsers? Have you tried to use a reset css cssreset.com or normalize.css necolas.github.io/normalize.css to see if this fixes the issue?
    – Tasos K.
    Jan 3, 2014 at 17:24
  • Yes, I use normalize. But I'm not sure about this last issue because in my work (win7 - 1280x1024) I see the misalignment but in my home (win8 - 1400x900) I don't (both with same browser version of FF and CH). Also, in win7 I see the radio buttons BIG and sharp, however in win8 I see them in normal size but with an invisible padding, also antialiased (?). I'm start considering to ask for all in another question...
    – Arkana
    Jan 3, 2014 at 23:15
  • It seems it could be a rendering issue (browser issue) and not a css/html issue, so a new question might be a good idea.
    – Tasos K.
    Jan 5, 2014 at 11:07

4 Answers 4

7

The issue occurs because of the css rule below and because the font used is not monospaced and thus i) takes less space than h).

.test ol.test_inner li:before {
    content: counter(list, lower-alpha) ") ";
}

To fix this you can set the <li> as inline-block and apply a specific width.

.test ol.test_inner li:before {
    color: #CBAA0E;
    content: counter(list, lower-alpha) ") ";
    counter-increment: list;
    display: inline-block;
    font-weight: bold;
    padding-right: 0.5em;
    width: 20px;
}

Here is a jsfiddle with the fix.

2
  • 1
    ....or I can use a monospaced font, I see. Thank you very much, I totally forgot the list items, as they does not are there. But I still have the vertical align problem. Some radio buttons are 1px down than its "brothers" (in the same line).
    – Arkana
    Jan 3, 2014 at 13:12
  • Yes, you could use a monospaced font. I didn't suggest it though, because you it would limit you to a small set of fonts to choose from!
    – Tasos K.
    Jan 3, 2014 at 13:13
5

The problem is that the letters in your first row are of variable width (the ones in your :before).

Try this:

CSS

.test ol.test_inner li:before {
    counter-increment:list; 
    content:counter(list, lower-alpha) ") "; 
    color:#cbaa0e; 
    padding-right:.5em; 
    font-weight:bold; display: 
    inline-block; 
    width: 15px;
}

The Fiddle

0

Try adding the following CSS:

input[type="radio"]{
    padding: 0px;
    margin: 0px;
}

Take a look at your JSFiddle. Is this better?

2
  • It looks just fine in my Fiddle. Maybe there is something going on in his code elsewhere that affects the alignment.
    – Benjamin
    Jan 3, 2014 at 12:55
  • I know I've experienced similar issues across various IE browsers. can't remember if I fixed it or sat in missery. I feel ur pain.
    – Phlume
    Jan 3, 2014 at 12:57
0

Yes, you adding lower-alpha by:before, why not just style the li's instead of using before?

1
  • Because the different color or the letters in the list ;)
    – Arkana
    Jan 3, 2014 at 13:19

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.