1 reply [Last post]
msobczak
msobczak's picture
Offline
newbie
Last seen: 7 years 27 weeks ago
Timezone: GMT-5
Joined: 2013-12-02
Posts: 1
Points: 2

With the following HTML and CSS, the check box labels appear fine in IE8 and Firefox 25 when I use the Doctype to transitional (or loose dtd). When I change the Doctype to html5, the check box labels appear fine in IE8, but in Firefox, each check box label is broken between "Checkbox" and the number. What would I change so that the check box labels render correctly for both IE8 and Firefox?

<!-- Check box labels render fine in IE8 and Firefox -->
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
 
<!-- Check box lables render fine in IE8 but not Firefox -->
<!DOCTYPE html>
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
 
<style type="text/css">
body
{
    font-family: Arial;
    font-size: 10pt;
    font-style: normal;
    font-weight: normal;
}
 
label.fieldLabel
{
    font-weight: bold;
    padding-right:10px;
    width: 150px;
    float: left;
    clear: both;
}
 
.reqField
{
    color: Red;
    padding: 0px 5px; 
    font-size: 12px;
    width: 5px;
    float: left;
}
 
.notReqField
{
    padding: 0px 5px; 
    width: 5px;
    float: left;
}
 
</style>
 
</head>
<body>
 
<form id="checkboxForm" action="/webdesign/getCheckboxForm.do" method="POST">
 
                    <label class="fieldLabel">Checkbox (grouped):</label>
                    <span class="reqField">*</span>
 
                    <div id="checkboxGroup" style="vertical-align: bottom; overflow: auto; float: left;">
                        <span>
                            <input id="checkboxList1" name="checkboxList" tabindex="3" required="required" type="checkbox" value="Checkbox 1"/>
                            <label for="checkboxList1">Checkbox 1</label>
                        </span>
                        <span><br>
                            <input id="checkboxList2" name="checkboxList" tabindex="3" required="required" type="checkbox" value="Checkbox 2"/>
                            <label for="checkboxList2">Checkbox 2</label>
                        </span>
                        <span><br>
                            <input id="checkboxList3" name="checkboxList" tabindex="3" required="required" type="checkbox" value="Checkbox 3"/>
                            <label for="checkboxList3">Checkbox 3</label>
                        </span>
                        <span><br>
                            <input id="checkboxList4" name="checkboxList" tabindex="3" required="required" type="checkbox" value="Checkbox 4"/>
                            <label for="checkboxList4">Checkbox 4</label>
                        </span>
                        <input type="hidden" name="_checkboxList" value="on"/>
                    </div>
 
                    </form> 
 
</body>
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi msobczak, First up don't

Hi msobczak,
First up don't put comments or anything before the doctype, it can throw the page into quirks mode.

If you set the label to display:inline-block; it should display on one line.