|
BeTheBall -> Unique Problem Caused by position:absolute (10/11/2007 13:41:23)
|
I found some CSS I liked for lining up checkbox labels. Unfortunately, today I found a pesky side effect that seems to be caused by my use of position:absolute. Here is a sample page for your viewing pleasure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
p.checkboxAndRadioAlignment {
clear: both;
float: none;
position: relative;
}
p.checkboxAndRadioAlignment input {
position:absolute;
}
p.checkboxAndRadioAlignment label {
display: block;
margin-left: 30px;
font-size:90%;
}
</style>
</head>
<body>
<form name="test">
<fieldset>
<legend class="unformattedLegend primaryProbe">Which of the following apply
to you?<br>
(Mark all that apply.)</legend>
<p class="level1 checkboxAndRadioAlignment">
<input type="checkbox" id="pr14_1_Check" name="pr14_Check" value="Dizziness" />
<label for="pr14_1_Check">Dizziness</label>
</p>
<p class="level1 checkboxAndRadioAlignment">
<input type="checkbox" id="pr14_2_Check" name="pr14_Check" value="Nausea" />
<label for="pr14_2_Check">Nausea</label>
</p>
<p class="level1 checkboxAndRadioAlignment">
<input type="checkbox" id="pr14_3_Check" name="pr14_Check" value="blah" />
<label for="pr14_3_Check">blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah blah blah blah
blah blah </label>
</p>
<p class="level1 checkboxAndRadioAlignment">
<input type="checkbox" id="pr14_4_Check" name="pr14_Check" value="Headache" />
<label for="pr14_4_Check">Headache</label>
</p>
<p class="level1 checkboxAndRadioAlignment">
<input type="checkbox" id="pr14_5_Check" name="pr14_Check" value="None" />
<label for="pr14_5_Check">None of the above</label>
</p>
</fieldset>
</form>
</body>
</html>
The problem is this:
Using IE6, make the browser window short enough so that you get a vertical scrollbar. Then scroll down so that the bottom checkbox is visible. Click the checkbox. Here is where the problem appears. The page jumps so that the fieldset label comes back into view. I have some forms with very long fieldsets and this jumping is problematic. I took position:absolute out of the style and the problem went away. However, I then lose the formatting I want.
Any and all ideas appreciated.
|
|
|
|
