Advanced Search

Results 1 to 3 of 3

Thread: Firefox fieldset bug?

  1. #1
    Join Date
    Jan 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Firefox fieldset bug?

    Hi
    I'm using a css form layout which i've adapted from here:
    http://www.quirksmode.org/css/forms.html

    The layout worked well in both Firefox and IE6 until I started using fieldsets. When the layout is inside a fieldset, it works as expected in IE while Firefox spreads the elements out on one line. I am wondering whether this is a Firefox bug.

    Whether it is or not, does anyone know how i can get it to behave correctly in firefox?

    Here is a demo of the problem

    and here is the code i'm using:

    CSS:
    Code:
    li input, li textarea{
    	float: left;
    }
    li input.text, li textarea {
    	display:block;
    	width:150px;
    	margin:0 0 10px 0;
    	padding:1px 2px;
    	border:1px solid #9bc365;
    	background:#333;
    	color:#fff;
    }
    li textarea{width:250px;height:150px;}
    input.submit{
    	border:2px outset #9bc365;
    	background:#9bc365;
    	margin:0 0 0 120px;
    }
    li label{
    	display:block;
    	float:left;
    	text-align:right;
    	width: 100px;
    	margin:0 20px 0 0;
    }
    form li{
    	clear:both;
    	list-style:none;
    }
    and XHTML:
    HTML Code:
    <form>
    <fieldset>
    <legend>Login</legend>
    	<ul>
    	<li><label>Username</label><input class="text" type="text" /></li>
    	<li><label>Password</label><input class="text" type="password" /></li>
    	<li><input class="submit" type="submit" value="Go!" /></li>
    	<li></li>
    	</ul>	
    </fieldset>
    </form>
    by the way, i'm using Firefox 1.5.0.5

    thanks for your help

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    This most likely has nothing to do with the browser, but more to do with the size of the page or containing element.
    form li{
    clear:both;
    clear doesn't have an effect on non-floated elements; the <li>s themselves have never been floated (only the labels, inputs and textareas inside them). Neither float nor clear inherits.

    There are some issues with your markup, too.
    <ul>
    This doesn't look like a list to me. It looks like a form. Probably <p> would be better semantically.
    <label>Username</label><input class="text" type="text" />
    This is a misuse of <label>. Labels label form elements; thus, they should be attached to a form element. This can be done using the for attribute, or by putting the element directly inside the label.
    and XHTML:
    Why are you using XHTML? There are numerous disadvantages to XHTML at the moment and no effective advantages, since it's impossible to actually serve it as XHTML due to IE's problems. Serving XHTML as text/html is a bad idea. Unless you have a very specific reason to use XHTML (and don't mind dropping support for IE), stick with HTML 4.01 Strict.
    by the way, i'm using Firefox 1.5.0.5
    You're a version behind;Firefox 2.0 is now stable.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Agrajag
    Hi
    I'm using a css form layout which i've adapted from here:
    http://www.quirksmode.org/css/forms.html
    Table-less forms are overrated. It is a semantically-correct form of markup: each row contains related items, where the left-most cells are labels, and the right are inputs.

    The layout worked well in both Firefox and IE6 until I started using fieldsets. When the layout is inside a fieldset, it works as expected in IE while Firefox spreads the elements out on one line. I am wondering whether this is a Firefox bug.
    Possibly. I think that various browsers have issues that make fieldset elements more awkward to use.

    Whether it is or not, does anyone know how i can get it to behave correctly in firefox?
    Rewrite it. Personally, I'd use a table - it's structural, not layout.


    Quote Originally Posted by Twey
    This most likely has nothing to do with the browser, but more to do with the size of the page or containing element.
    Substituting with another block-level element renders as intended.

    This doesn't look like a list to me. It looks like a form. Probably <p> would be better semantically.
    But does the text constitute a paragraph? I don't think so. There doesn't need to be a container, anyway (except for the fieldset, or some other block-level element): line breaks will do.

    You're a version behind;Firefox 2.0 is now stable.
    True, though that wouldn't fix any problems in earlier versions.

    Mike

Bookmarks

Posting Permissions

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