cssGalactic
01-24-2008, 06:12 PM
Hello, I have a small question to ask. I need to know how to avoid text to wrap under my radio buttons. here is a code sample replicating the problem. The text in question is "Understanding the visitors to your site"
Here is the code:
<html>
<head>
<title>Title</title>
<style type="text/css">
@charset "UTF-8";
/* CSS Document */
body {
font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
font-size:12px;
padding:0;
color:#333333;
}
#wrapper {
position:relative;
width:200px;
margin:0 0 0 5px;
}
input {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
width:150px;
height:19px;
margin:0 3px 0 3px;
padding:2px 0 0 3px;
}
.email, .phone, .company, .number-field {
border:1px solid #647181;
background-color:#E2F0FB!important;
}
select {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
width:150px;
height:19px;
margin:0 3px 0 3px;
padding:2px 0 0 0;
}
.drop-down {
border:1px solid #647181;
background-color:#E2F0FB!important;
}
/*Styles I need help with*/
.radio-text {
font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
font-size:11px;
padding:0 0 0 0!important;
margin:0 0 0 5px!important;
width:100px;
}
.radio-horizontal, .checkbox, .radio {
width:auto;
height:auto;
padding:5px!important;
margin:0 0 -2px 0;
}
</style>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" onload = "init();">
<form name="survey" target="" action="/q" method="POST" onSubmit="return FormSubmit(this);" enctype="multipart/form-data">
<div id="wrapper">
<div class="QuestionText">What is your primary marketing challenge?</div>
<div class="dialogClearLeft"></div>
<div class="QuestionBox">
<div class="va_wrap"></div>
<input type="radio" class="radio" name="i_37132" value="108330" onClick="showHideOtherField(this, 'other_37132');">
<span class="radio-text">High cost per lead/acquisition</span><br>
<input type="radio" class="radio" name="i_37132" value="108331" onClick="showHideOtherField(this, 'other_37132');">
<span class="radio-text">Low conversion rate</span><br>
<input type="radio" class="radio" name="i_37132" value="108332" onClick="showHideOtherField(this, 'other_37132');">
<span class="radio-text">Generating better quality leads</span><br>
<input type="radio" class="radio" name="i_37132" value="108333" onClick="showHideOtherField(this, 'other_37132');">
<span class="radio-text">Understanding the visitors to your site</span><br>
<input class="radio" type="radio" id="other" name="i_37132" value="" onClick="showHideOtherField( this, 'other_37132' );" >
<span class="radio-text">Other</span>
<input class='dynamic-other' type='text' id='other_37132' name='f_37132' style="display:none;" disabled>
<br>
</div>
</div>
</div>
<!--wrapper ends-->
</form>
</body>
</html>
Thank you in advance,
CSSGalactic.:rolleyes:
Here is the code:
<html>
<head>
<title>Title</title>
<style type="text/css">
@charset "UTF-8";
/* CSS Document */
body {
font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
font-size:12px;
padding:0;
color:#333333;
}
#wrapper {
position:relative;
width:200px;
margin:0 0 0 5px;
}
input {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
width:150px;
height:19px;
margin:0 3px 0 3px;
padding:2px 0 0 3px;
}
.email, .phone, .company, .number-field {
border:1px solid #647181;
background-color:#E2F0FB!important;
}
select {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
width:150px;
height:19px;
margin:0 3px 0 3px;
padding:2px 0 0 0;
}
.drop-down {
border:1px solid #647181;
background-color:#E2F0FB!important;
}
/*Styles I need help with*/
.radio-text {
font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
font-size:11px;
padding:0 0 0 0!important;
margin:0 0 0 5px!important;
width:100px;
}
.radio-horizontal, .checkbox, .radio {
width:auto;
height:auto;
padding:5px!important;
margin:0 0 -2px 0;
}
</style>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" onload = "init();">
<form name="survey" target="" action="/q" method="POST" onSubmit="return FormSubmit(this);" enctype="multipart/form-data">
<div id="wrapper">
<div class="QuestionText">What is your primary marketing challenge?</div>
<div class="dialogClearLeft"></div>
<div class="QuestionBox">
<div class="va_wrap"></div>
<input type="radio" class="radio" name="i_37132" value="108330" onClick="showHideOtherField(this, 'other_37132');">
<span class="radio-text">High cost per lead/acquisition</span><br>
<input type="radio" class="radio" name="i_37132" value="108331" onClick="showHideOtherField(this, 'other_37132');">
<span class="radio-text">Low conversion rate</span><br>
<input type="radio" class="radio" name="i_37132" value="108332" onClick="showHideOtherField(this, 'other_37132');">
<span class="radio-text">Generating better quality leads</span><br>
<input type="radio" class="radio" name="i_37132" value="108333" onClick="showHideOtherField(this, 'other_37132');">
<span class="radio-text">Understanding the visitors to your site</span><br>
<input class="radio" type="radio" id="other" name="i_37132" value="" onClick="showHideOtherField( this, 'other_37132' );" >
<span class="radio-text">Other</span>
<input class='dynamic-other' type='text' id='other_37132' name='f_37132' style="display:none;" disabled>
<br>
</div>
</div>
</div>
<!--wrapper ends-->
</form>
</body>
</html>
Thank you in advance,
CSSGalactic.:rolleyes: