Long label radio button in IE7 issue

I have a radio button with long labels that wraps to the next line, it is displaying correctly in Firefox and IE8, but not in IE7 and IE6.

Basically, what I want is shown below (where o is the radio button):

  • I/we authorise WITHDRAWALS from my Investec account to and DIRECT DEBITS from this designated account
  • I/we authorise WITHDRAWALS ONLY from my account to this designated account
  • I/we authorise DIRECT DEBITS ONLY from this designated account to my account

My css:

label {
  float:none;
  padding-left: 15px;
  text-align:left;
  width:420px;
  display:block;
  margin-left; 10px;
}

In IE7 and IE6, the next line is under the radio button, not under the first letter of the first word of the label

Answers


Just increase the width of the label. Maybe you can go with an inline tag, e.g.

<label style="width:420"> 

Or you can add this as a property in the CSS for label.


<!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>

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.


Need Your Help

How to disable/enable network, switch to Wifi in Android emulator?

android unit-testing testing networking

I'm working on a Push Notifications library for Android (http://deaconproject.org/) that needs to take action if network connectivity is interrupted or changed - namely, it needs to re-initiate a s...

wxPython GridSizer not attached to panel?

python image wxpython panel sizer

I'm trying to build a level editor for a game I'm working on. It pulls data from a flat file and then based on a byte-by-byte search it'll assemble a grid from pre-set tiles. This part of the app I