O
OccasionalFlyer
I am trying to figure out why the following piece of HTML (and
several others like it) are being rendered incorrectly by Safari on
Windows. In IE or Firefox, the label and the value of the input field
are on the same line. In Safari, the label is on one line, and the
input field value is on thenext line, moved far to the left. I didn't
write this but it does not look all that complicated. I would expect
in normal HTML for both things to be on one line. Any suggestions as
to how to make Safari do the right thing? Thanks.
<label id="field-plan-display"><span class="label-
text">Program: </span>
<INPUT readonly class="guide-inline-display" TYPE="TEXT" NAME="GRAD
$95Plan1" SIZE="100" MAXLENGTH="254">
<br class="clear" />
</label>
The .css definition of clear is:
..clear {
clear: left;
}
label-text definition:
..label-text {
padding-right: 10px;
width: 120px;
display: block;
float: left;
position: relative;
top: 2px;
left: 0;
font-weight: bold;
text-align: right;
}
guide-inline-display definition:
#section-academicplans .guide-inline-display {
width: auto;
border: none;
font-size: 1.0em;
top: 0;
left: 0;
float: none;
text-align: left;
}
I don't see anything that would make this work correctly in Firefox
but not in Safari. ANy suggestions? Thanks.
several others like it) are being rendered incorrectly by Safari on
Windows. In IE or Firefox, the label and the value of the input field
are on the same line. In Safari, the label is on one line, and the
input field value is on thenext line, moved far to the left. I didn't
write this but it does not look all that complicated. I would expect
in normal HTML for both things to be on one line. Any suggestions as
to how to make Safari do the right thing? Thanks.
<label id="field-plan-display"><span class="label-
text">Program: </span>
<INPUT readonly class="guide-inline-display" TYPE="TEXT" NAME="GRAD
$95Plan1" SIZE="100" MAXLENGTH="254">
<br class="clear" />
</label>
The .css definition of clear is:
..clear {
clear: left;
}
label-text definition:
..label-text {
padding-right: 10px;
width: 120px;
display: block;
float: left;
position: relative;
top: 2px;
left: 0;
font-weight: bold;
text-align: right;
}
guide-inline-display definition:
#section-academicplans .guide-inline-display {
width: auto;
border: none;
font-size: 1.0em;
top: 0;
left: 0;
float: none;
text-align: left;
}
I don't see anything that would make this work correctly in Firefox
but not in Safari. ANy suggestions? Thanks.