[Viper2KX]

I am running Firefox 10.0 and Opera 11.61 for this to show. This is a LABEL bug that I have wrapped in SPAN just so the form looks nice without TABLE.

Its hard to explain, so here is a picture:


Then without the LABEL bug:


Error-less code...
HTML:

<span>
  <label for="pst">Provence/State/Territory</label>
</span>
<br />
<input name="" type="text" id="pst" />

CSS: (Just in case if someone was curious)

.formRow span label {
    position: absolute;
    left: 10em;
}

Javascript: none, I am using the Dojo Toolkit.

I honestly have no idea where to begin. I am seeking assistance to get the LABEL to not <br /> like it automatically does with FF and Opera.

Thank you.

[Dormilich]

my guess would be that the text exceeds the label’s width and therefore it uses 2 lines (you can easily verify that in Firebug) and since it is absolute it ovelaps the next element.

actually, I don’t see why you need to wrap the label in a span and make it absolute as well …

[Viper2KX]

Fixed it, just had to go to w3schools to and look up the positioning.

New CSS code:

.formRow span label {
    position: relative;
    left: -0.1em;
}

If I had removed 'left:' completely, the label(s) would be indented.

Quote

I don’t see why you need to wrap the label in a span

I had to because I had another completely set of different labels. So without the span surrounding this set, they all would have overlapped.

I just visually saw this as a sub-menu type of deal.