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"> &nbsp; (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"> &nbsp; (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">&nbsp; (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">&nbsp; (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">&nbsp; (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">&nbsp; (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">&nbsp; (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 &raquo;" />
            </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.