Update: fix for center and right aligned labels in netscape 6.x

Thanks to Geoff, ecd, Leandro on CSS-Discuss, and Julian on w3c-wai-ig for reporting back on some of the other browsers I hadn't checked.

It appears to work fine in the following browser list.  If it's not in this list, it's not been tested, so feel free to check it on any browsers not mentioned, and let me know the results.  I have added a short summary of the problem/workaround below this list of browsers, just in case anyone else has trouble and the original webpage (www.makesomenoise.co.uk/labeltest.htm and www.makesomenoise.co.uk/screenshots.htm) is down.

Tested and verified in:

Mac/IE 5.1, Mac/IE 5.0, Mac/NS 6.2, Mac/NS 6.0, Mac/Op 5.0, Mac/Moz 1.0 

Win/IE 6.0, Win/IE 5.5, Win/NN 6.2, Win/NN 6.1, Win/NN 6.0, Win/Op 6.01, Win/Op 5.1, Win/Moz 1.0, Win/Lynx

Fails in:

Mac/NS 4.7
Win/NS 4.7


THE PROBLEM:
If you have a <label> tag inside a block that is center-aligned or right-aligned, the text inside the <label></label> doesn't render properly in NN6.0 and NN6.1.

I had thought that the label element would appear centered in this example, but it didn't work:

<div style="margin: 0px auto; width: 500px; line-height: 1; text-align: center; font-family: Verdana; font-weight: bold; font-size: 90%; color: #090;">
	<label for="element1" accesskey="1">Label 1</label>
	<input type="checkbox" id="element1" name="element1" value="1">
</div>


THE WORKAROUND:
I added text-align: left; and it fixed it.  This works for all the browsers in the list above. 


<div style="margin: 0px auto; width: 500px; line-height: 1; text-align: center; font-family: Verdana; font-weight: bold; font-size: 90%; color: #090;">
	<span style="text-align: left;">
		<label for="element1" accesskey="1">Label 1</label>
	</span>
	<input type="checkbox" id="element1" name="element1" value="1">
</div>


NOTE:
It may even be possible to put the text-align: left on the actual label itself to save a few bytes, e.g. <label style="text-align: left;"> but I haven't tried it so I don't know if this works.

Received on Tuesday, 2 July 2002 12:41:14 UTC