CODEWITHSUNDEEP
cssradio-buttonlabelinternet-explorer-7
user474079
user474079

Reputation: 65

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):

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

Upvotes: 0

Views: 1004

Answers (3)

Ams
Ams

Reputation: 11

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.

Upvotes: 1

Ed Daniel
Ed Daniel

Reputation: 517

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.

Upvotes: -1

reisio
reisio

Reputation: 3242

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

Upvotes: -1

Related Questions