NS6 - div width: __px

[[o_O]]

Am i stuck with it displaying in NS6 like this or is there something i can do to fix it.


IE6 (the way it should display)
http://www.orchid.f2o.org/css2.gif


NS6
http://www.orchid.f2o.org/css.gif


Code:

div.row{
padding-top: 10px;
}
span.label{
font: 0.7em Verdana, Arial, Helvetica, sans-serif;
vertical-align: top;
padding-right: 10px;
width: 100px;
text-align: right;
}
span.input{
width: 100px;
text-align: left;
}
...

<form>

<div style="margin-left: 40px; width: 350px; border: 1px solid #333; padding: 5px; ">
<div class="row">
<span class="label">Name:</span><span class="input"><input type="text" name="name" size="25" class="npt" /></span>
</div>
<div class="row">

......and so on...
</div>
</form>


NS seems to be ignoring the 'width: 100px;'

[BrainJar]

That's because SPAN is an inline element, not a block element. According the the W3C specification, width doesn't apply to inline elements (see http://www.w3.org/TR/CSS21/visudet.html#propdef-width). So Netscape just ignores it.

To get around this, you could use DIV tags for the labels instead. Style them with "float:left;" and a width:

div.label{
font: 0.7em Verdana, Arial, Helvetica, sans-serif;
vertical-align: top;
padding-right: 10px;
float: left;
width: 100px;
text-align: right;
}

[COBOLdinosaur]

I think float is the answer but you might have better control if you specify the input first an float it right:


div.row{
padding-top: 10px;
}
span.label{
font: 0.7em Verdana, Arial, Helvetica, sans-serif;
vertical-align: top;
padding-right: 10px;
width: 100px;
text-align: right;
}
span.input{
float:right;
width: 100px;
text-align: left;
}
...

<form>

<div style="margin-left: 40px; width: 350px; border: 1px solid #333; padding: 5px; ">
<div class="row"><span class="input"><input type="text" name="name" size="25" class="npt" /></span>
<span class="label">Name:</span>
</div>
<div class="row">

[[o_O]]

:thumbsup: Thanks both.

[pardicity3]

I don't know if this is correct or not, but couldn't you just put display: block; in the css for the span?

[BrainJar]

I don't know if this is correct or not, but couldn't you just put display: block; in the css for the span?

Good question. You could do that but the effect would be the same as if you replaced the SPAN tags with DIVs.

Block elements like DIV and P always start on a new line. Anything following a block element also starts on a new line.

Although, there is a "run-in" option for the display style. (See http://www.w3.org/TR/CSS21/visuren.html#run-in). I'm not sure how different browsers would deal with that, but it might be worth trying out.

If I read it right, this should place the INPUT on the same line as the DIV:

<div style="width:10em;display:run-in;">Name</div><input ...>

But my Mozilla browser doesn't seem to like it.