|
| |
|
|
BeTheBall
Posts: 6336
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
 |
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.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
|
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Unique Problem Caused by position:absolute - 10/11/2007 14:38:12
Hi Duane
Could you not use another method to get around the problem instead of AP? How about using floats and spans to space out the pesky things?
If not, have a look at http://www.positioniseverything.net/ at the IE bugs - jumping around is usually to do with reflow and or haslayout issues.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
BeTheBall
Posts: 6336
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
RE: Unique Problem Caused by position:absolute - 10/11/2007 14:46:24
Thanks Helena. With lots of trial and error, this seems to handle it:
p.checkboxAndRadioAlignment input {
display:block;
float:left
}
p.checkboxAndRadioAlignment label {
display:block;
margin-left: 2em
}
Less code and works as I had hoped.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
