SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Applying min-height to FIELDSET

    Apparently, you can't apply min-height to a FIELDSET element:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Fieldset Min-Height Test</title>
    	<style type="text/css">
    		fieldset, li {
    			background: #fcf;
    			border: 5px solid #f9f;
    			min-height: 10em;
    		}
    	</style>
    </head>
    
    <body>
    		
    	<ul>
    		<li>A list item</li>
    		<li>Another list item</li>
    	</ul>
    		
    	<form id="myform" action="foo.html">
    		<fieldset>
    			<label for="q">
    				<input type="text" id="q" name="q" size="20">
    			</label>
    		</fieldset>
    	</form>
    
    </body>
    </html>
    The UL is there to check that the problem wasn't related to a parent block-level element not having a height set, but the min-height works fine on the LIs.

    Anyone got a solution to allow me to set min-height on my FIELDSETs?

  2. #2
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like you're right! Not heard of this before though

    Here is a workaround in any case:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Fieldset Min-Height Test</title>
    	<style type="text/css">
    		fieldset {
    			background: #fcf;
    			border: 5px solid #f9f;
    		}
    		fieldset div {
    			min-height: 10em;
    		}
    	</style>
    </head>
    
    <body>
    	<form id="myform" action="foo.html">
    		<fieldset>
    			<div>
    				<label for="q">
    					<input type="text" id="q" name="q" size="20">
    				</label>
    			</div>
    		</fieldset>
    	</form>
    </body>
    </html>

  3. #3
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Noticed it works fine in IE7.

    This link, although I don't understand it suggests it's a Mozilla based bug?

    http://css.artnau.com/bug-min-height-als-fieldset/

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works in Opera 9.20, too, so it looks like a Gecko bug.

    Your markup is invalid, though, since it lacks the required LEGEND element in the FIELDSET.
    Birnam wood is come to Dunsinane

  5. #5
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Your markup is invalid, though, since it lacks the required LEGEND element in the FIELDSET.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    It's documented in bugzilla here (from the link that bob gave):

    https://bugzilla.mozilla.org/show_bug.cgi?id=210094

    Looks like there is no fix as yet.

    I'm not sure what the problem is with fieldsets but you can't seem to use :before and :after pseudo classes on them in Firefox either.

  7. #7
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First time I've ever seen something work properly in IE and not in Firefox

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bob Carologees View Post
    First time I've ever seen something work properly in IE and not in Firefox
    You've never used the &#38;shy; character entity (soft hyphen) then?
    Birnam wood is come to Dunsinane

  9. #9
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't say I have

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best way get around this (and other CSS related bugs between the Trident and Gecko engines) is to wrap the fieldset inside a DIV (with a class of fieldset) and style the DIV instead. This does mean you'll have to stick a span inside your legend as well (this time it's Gecko's fault), but you will achieve far more consistent styling cross-browser.

    Tyssen wrote an excellent tutorial on how to do this. You can read it here:
    http://www.tyssendesign.com.au/artic...gends-of-style


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
  •