...

View Full Version : Form controls not caring about float in Firefox 2



VIPStephan
10-31-2008, 08:19 PM
Now hereís a weird issue I just came across (and never experienced before): Form controls that are set to display: block; are ignoring a floated element coming earlier in the source code. This is happening in Firefox 2 and Iím wondering if that has been documented anywhere or Iím just too tired to see that might be intended beahvior? It doesnít happen in Fx 3 and any other browser, though.

So, hereís the setup:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Composite Discovery</title>
<style type="text/css">
#one {
float: left;
width: 300px;
position: relative;
margin-right: 30px;
height: 300px;
background: yellow;
opacity: .5;
padding: 10px;
}
#two {
background: green;
}
select {
display: block;
margin: 0 0 20px;
}
input, textarea {display: block;}
#two div {
border: 1px solid aqua;
padding: 5px;
}
#two div span {
display: block;
border: 1px solid red;
color: white;
}
</style>
</head>
<body>
<form action="">
<div id="one"> content of yellow div which is floated left. the form controls are displayed as block elements</div>
<div id="two">
<select>
<option>select 1</option>
</select>
<select>
<option>select 2</option>
</select>
<select>
<option>select 3</option>
</select>
<input type="text" />
<input type="checkbox" />
<textarea rows="3" cols="10"></textarea>
<div><span>text inside span with <code>display: block;</code></span></div>
</div>
</form>
</body>
</html>


The div#one is floated left and if the form controls inside div#two arenít made display: block; they behave as expeced, i. e. they wrap around the floated element. If they are displayed as block elements they just go under the floated div as if the element wasnít there. This only happens to form controls from what I can right with a quick check right now (the text below is wrapping correctly).

Anyone got an idea? I've seriously never encountered this issue before.
I do have a workaround to my specific situation already but Iíd like to know if and where this has been documented and adressed.

itsallkizza
10-31-2008, 08:25 PM
You have me interested too... however I have FF3 on this comp, do you know any way to get FF2 as well? Or just a quick screenshot would be cool too.

VIPStephan
10-31-2008, 08:31 PM
ftp://ftp.mozilla.org/pub/firefox/releases/

You can install it in a different directory and run one Version of Firefox at a time.

itsallkizza
10-31-2008, 08:32 PM
Think it has anything to do with the position: relative? Looking through w3.org now to see if I spot anything weird.

EDIT: just installed ff2 :) and no, i guess it doesn't have anything to do with the position: relative;

itsallkizza
10-31-2008, 09:08 PM
here's a funny one:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Composite Discovery</title>
<style type="text/css">
#one {
float: left;
width: 300px;
position: relative;
margin-right: 30px;
height: 300px;
background: yellow;
opacity: .5;
padding: 10px;
}
#two {
background: green;
}
select {
display: block;
margin: 0 0 20px;
}
input, textarea {display: block;}
#two div {
border: 1px solid aqua;
padding: 5px;
}
#two div span {
display: block;
border: 1px solid red;
color: white;
}
form{
margin-left: 340px;
}
</style>
</head>
<body>
<div id="one"> content of yellow div which is floated left. the form controls are displayed as block elements</div>
<div id="two">
<form action="">
<select>
<option>select 1</option>
</select>
<select>
<option>select 2</option>
</select>
<select>
<option>select 3</option>
</select>
<input type="text" />
<input type="checkbox" />
<textarea rows="3" cols="10"></textarea>
<span style="display:block;">no div container</span>
<div><span>text inside span with <code>display: block;</code></span></div>
</form>
</div>
</body>
</html>

What's the exact rule with margins and floats? I bumped the form inside to test and see if there was some glitch where form controls positioned themselves relative to their parent <form>, that didn't change anything, but then I tried giving the <form> a margin-left. IE7 and FF3 ignore the margin (or perhaps follow whatever standards pertain), FF2 accepts it...

I still can't explain it, but might be a clue.

Oh, and I installed FF2 in a separate directory and it updated both :( I just installed FF3 to yet another directory, and it updated all 3.

oesxyl
11-01-2008, 04:13 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Composite Discovery</title>
<style type="text/css">
#one {
float: left;
width: 300px;
position: relative;
margin-right: 30px;
height: 300px;
background: yellow;
opacity: .5;
padding: 10px;
}
#two {
background: green;
}
select {
display: block;
margin: 0 0 20px;
}
input, textarea {display: block;}
#two div {
border: 1px solid aqua;
padding: 5px;
}
#two div span {
display: block;
border: 1px solid red;
color: white;
}
</style>
</head>
<body>
<form action="">
<div id="one"> content of yellow div which is floated left. the form controls are displayed as block elements</div>
<div id="two">
<select>
<option>select 1</option>
</select>
<select>
<option>select 2</option>
</select>
<select>
<option>select 3</option>
</select>
<input type="text" />
<input type="checkbox" />
<textarea rows="3" cols="10"></textarea>
<div><span>text inside span with <code>display: block;</code></span></div>
</div>
</form>
</body>
</html>

opacity is css 3, :)

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum