Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts

    Form controls not caring about float in Firefox 2

    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:
    Code:
    <!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.

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    ftp://ftp.mozilla.org/pub/firefox/releases/

    You can install it in a different directory and run one Version of Firefox at a time.
    Attached Thumbnails Attached Thumbnails Form controls not caring about float in Firefox 2-bild-1.png  

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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;
    Last edited by itsallkizza; 10-31-2008 at 07:46 PM.

  • #5
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    here's a funny one:
    Code:
    <!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.
    Last edited by itsallkizza; 10-31-2008 at 08:13 PM.

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Code:
    <!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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •