ansaurus

Question

Answer 1

A:

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
html {
    font: 12px sans-serif;
}
form 
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 400px;
}
label {
    cursor: pointer;
}
input {
    float: left;
}
        </style>
    </head>
    <body>
        <form action="">
            <ul>
                <li>
                    <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label>
                </li>
                <li>
                    <label><input type="radio" name="authorise"> I/we authorise WITHDRAWALS ONLY from my account to this designated account</label>
                </li>
                <li>
                    <label><input type="radio" name="authorise"> I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label>
                </li>
            </ul>
        </form>
    </body>
</html>

reisio 2010-07-01 13:47:30

Answer 2

A:

This works for me in IE8, IE7 and FF; I don't have IE6 here to test with but the approach should be sound. I assume you have the freedom to edit the HTML.

Basically, add left padding to the label, and position:relative so that children inherit position from it, then use position:absolute on the radio button to position it in that padding.

HTML:

   <label><input type="radio" />I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account</label>
   <label><input type="radio" />I/we authorise WITHDRAWALS ONLY from my account to this designated account</label>
   <label><input type="radio" />I/we authorise DIRECT DEBITS ONLY from this designated account to my account</label>

CSS:

label { position:relative;top:0; padding-left:25px; text-align:left; width:420px; display:block;  }
label input { position:absolute; top:0;left:0; }

If people are going to downvote stuff, they could at least say why.

Ed Daniel 2010-07-01 14:01:41

ansaurus

tags:

views:

answers:

Long label radio button in IE7 issue

related questions