Modal label elements wrapping to newline in webkit browsers - css

Question

I'm currently having a problem with CSS styles in Webkit browswers (Chrome 4.0.249.89 & safari 4.0.4) in which I have a modal window that has a list of labels, radio buttons and some more text describing the what each radio button does. The modal displays correctly in FF 3.5.7
Here's the html for inside the modal,
<div id="rta_top">
<img src="pb_close_off.png" width="17" height="15" alt="Close this window" title="Close this window" id="rta_close" />
<h2 class="rta">Report</h2>
</div>
<div id="pb_bottom">
<div id="error_holder">
<div id="error"></div>
</div>
<br />
Please choose a reason for reporting this ad:
<form action="submit.php" method="post" id="report_form">
<fieldset>
<br />
<label for="incorrect_address">Wrong Address:</label>
<div class="report_ad_radio">
<input type="radio" id="incorrect_address" name="description" value="1" />
</div>
<div class="report_ad_text">
<label for="incorrect_address"> (Ad has wrong address).</label>
</div>
<br />
<label for="duplicate">Duplicate:</label>
<div class="report_ad_radio">
<input type="radio" id="duplicate" name="description" value="2" />
</div>
<div class="report_ad_text">
<label for="duplicate"> (Identical to another ad on-site).</label>
</div>
<br />
<label for="mis_classified">Mis-Classified:</label>
<div class="report_ad_radio">
<input type="radio" id="mis_classified" name="description" value="3" />
</div>
<div class="report_ad_text">
<label for="mis_classified"> (Ad is in the wrong section).</label>
</div>
<br />
<label for="inaccurate">Inaccurate:</label>
<div class="report_ad_radio">
<input type="radio" id="inaccurate" name="description" value="4" />
</div>
<div class="report_ad_text">
<label for="inaccurate"> (No longer available / price changed).</label>
</div>
<br />
<label for="photos">Photo Issue:</label>
<div class="report_ad_radio">
<input type="radio" id="photos" name="description" value="5" />
</div>
<div class="report_ad_text">
<label for="photos"> (Photos are inappropriate or do not belong to this ad).</label>
</div>
<br />
<label for="spam">Spam:</label>
<div class="report_ad_radio">
<input type="radio" id="spam" name="description" value="6" />
</div>
<div class="report_ad_text">
<label for="spam"> (Ad is spam/scam and is not exclusive).</label>
</div>
<br />
<label for="other">Other:</label>
<div class="report_ad_radio">
<input type="radio" id="other" name="description" value="7" />
</div>
<div class="report_ad_text">
<label for="other"> (Other reason, please specify).</label>
</div>
<br />
<br />
<label for="more_info">More Info:</label>
<textarea id="information" name="information"></textarea>
<br />
<br />
<div id="sending">
<div id="loader"></div>
<input type="hidden" name="submit_report_ad" value="1" />
<input type="image" src="/i/button_send_off.png" id="reply_button" name="submit_reply" value="Send »" />
</div>
</fieldset>
</div>
</div>
and the css for each element:
#rta_background {
padding: 10px;
background: url(/i/bg_modal_ra.png) no-repeat;
}
#ra_background_sent{
padding: 10px;
background: url(/i/bg_modal_ra_sent.png) no-repeat;
}
#rta_top {
padding: 0 8px 0 18px;
background: #355eae url(/i/bg_linkbar_off.png) repeat-x;
height: 30px;
line-height: 30px;
}
#rta_top h2 {
overflow: hidden;
width: 495px;
height: 30px;
font-size: 14px;
color: #fff;
}
#rta_close {
margin: 7px 0 0;
float: right;
}
#rta #pb_bottom fieldset {
background: #dff;
}
.report_ad_radio {
padding: 5px 0 0 5px;
float: left;
}
#rta #pb_bottom .rta_warning {
margin: 0 auto 6px;
border: 1px solid #f00;
padding: 2px 0;
width: 80%;
height: 15px;
line-height: 15px;
font-size: 12px;
font-weight: bold;
color: #000;
text-align: center;
background: #fdd;
}
#rta #pb_bottom .report_ad_text {
white-space: nowrap;
}
#rta #pb_bottom .report_ad_text label {
margin: 0;
padding: 10px 0 0 0;
width: auto;
font-size: 12px;
font-weight: normal;
cursor: pointer;
background: #00f000;
}
#information {
margin: 5px 0 0 5px;
padding: 2px 2px 2px 2px;
width: 370px;
height: 76px;
border: 1px solid #ccc;
color: #888;
line-height: 1.4;
resize: none;
}
#sending {
float:right;
margin-right: 24px;
}
#pb_bottom #error {
margin: 0 20px 0 50px;
height: 20px;
width: 420px;
}
#loader {
margin-right: 20px;
margin-top: 6px;
float:left;
}
In Safari it looks like this:
Safari http://neilcremins.com/img_dump/modal-saf.png
In Firefox it looks like this:
Firefox http://neilcremins.com/img_dump/modal-ff.png

Answer 1

Wow. Div-soup with everything defined in absolute measures. I don't know where to start. I know, I'll start here: you can only have one label per input, so... let's try this:
HTML:
<label><span class="intro">Wrong address</span><input type="radio" id="wrongaddress"/>(Ad has wrong address)</label>
CSS:
label{display: block}
.intro{width: 12em; float: left; font-weight: bold}
Demo.
Less is more.