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">
<div id="video_browser">
<div id="rta_background">
<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 This Ad</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="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="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>
</div>
</div>
and the css.
#rta_background {
padding: 10px;
background: url(/i/bg_modal_ra.png) no-repeat;
}
#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;
}
#rta #pb_bottom #sending {
padding-right: 20px;
}
#pb_bottom #error {
margin: 0 20px 0 50px;
height: 20px;
width: 420px;
}
#loader {
margin-right: 20px;
margin-top: 6px;
float:left;
}
Here is how the site looks in Safari

and how it looks in Firefox

New updated screenshot showing pattern.

2 answers
points
There's other CSS or html markup involved - something inherited from the cascade.
If I take exactly what you have posted here then I get labels stacked, but on closer inspection I'm not sure why your html has two labels for each form element and wonder if that's why there's a problem.
wouldn't it be better to include your reason text in a span inside label and then use positioning to move it elsewhere?
or maybe disassociate the second label from the form element (remove the for="" attribute) so that the browsers treat it as just another block element?
- Thanks this worked out great.
points
It looks from the screenshot that the container for the labels isn't wide enough, which is why just the long label is being forced down onto the next line. Try setting a pixel width for the fieldset
- Thanks for the reply, I can see from hastily put together screenshots above how you might think it was the label length that forced it onto the next line. I omitted some fields from the full form in order to condense amount of code written above. i've added a new screen shot which shows that the problem seems to have a pattern in that every second label is forced down.
