Display Problem: Form-->Legend field in Firefox

SuperGrover1981 · September 5th, 2006, 07:16 AM

Gidday gang,

I'm trying to do up a CSS-ed form, and I'm having a few problems with the "legend" field in Firefox. The field displays fine in IE, but in Firefox it seems to ignore the css "width" & "height" parameters.

The problem is that the contents of my "legend" field are a background image, and I need that to display across specific widths & heights.

I tried inserting a <div> inside the <legend> field with a specified width & height - but in firefox this just made the fieldset disappear entirely.

Site can be viewed at http://www.johnbayne.com/hc5/order.html

Any help most appreciated.

Cheers gang,
- JB

HTML:

Code:

<!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" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!--[if IE]>
    <style type="text/css">
    *:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
    </style>
    <![endif]-->
    <link href="1css.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="mainbox">
<div class="px">&nbsp;</div>

<div class="header fc">
<img src="hiclonetitle.jpg" alt="HiClone Title" />
<ul>
<li><a href="order.html">Order Now</a></li>
<li><a href="calculator.html">Fuel Calculator</a></li>
<li><a href="product.html">Product Info</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>

<div class="blacktitle">
<p>HiClone is the best thing ever invented ever. No seriously, it is. I’m not kidding. It’s better than sex” - Albert Einstein, 1939</p>
</div>

<div class="promobanner"><img src="bannerpic.jpg" border="0" align="left" alt="HiClone Unit" /><img src="bannertext1.jpg" alt="Up to 20% Fuel Savings!" border="0" class="topspacer"/><BR /><img src="bannertext2.jpg" alt="Up to 15% more power!" border="0" class="topspacer" /></div>
<a href="product.html"><div class="menubutton1">HiClone is a simple, maintenance-free device that can improve your vehicle’s power and offer dramatic reductions in your fuel costs</div></A><a href="calculator.html"><div class="menubutton2">Want to see how much you could save? We provide a free calculator to help you estimate how much a HiClone system could save you.</div></A>
<a href="order.html"><div class="menubutton3">Click here to order using our secure online server</div></A>

<FORM class="orderform">
<fieldset id="order1">
<legend class="orderformlegend">&nbsp;</legend>

<input class="orderforminput" type="text" size="40" />
<input type="text" class="orderforminput" size="40" />
<input type="text" class="orderforminput" size="40" />
<input type="text" class="orderforminput" size="40" />
<input type="text" class="orderforminput" size="40" />
</fieldset>
</FORM>
    <div class="bottombanner">
        <div class="bottomlink">
            <a href="index.html">Home</a>
            <a href="products.html">HiClone Products</a>
            <a href="calculator">Fuel Calculator</a>
            <a href="order.html">Order Now</a>
        </div>
</div>

</div><div class="bottombreak">&nbsp;</div>
</body>
</html>

CSS:

Code:

/* CSS Document */
<style type="text/css">
    /* CSS Document */
    html,body{height:100%;}

    * {margin:0;padding:0;}

    body {font-family:Arial, Helvetica, sans-serif;font-size:10px;
    background: #00539a url(background.jpg) repeat-x;
    }
    
    head+/**/body .fc:after{ /* min-height browser but not IE 7 */
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
    }
    
    /*  \*/
    * html .fc{height:1%;} /* IE 5 5.5 6 */
    /*  */
        
.orderform{
        float: left;
        margin-left: 10px;
        margin-top: 20px;
        width: 720px;
        background: url(bannerbackground.jpg) repeat-y;
        border-style: outset;
        border-width: 3px;
        border-color: #666;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: 400;
        color: #FFFFFF;
        text-decoration: none;
    }
    
    .orderforminput {
    background: url(textimagebg.gif) repeat-x;
    border-color: #FFF;
    border-style: solid;
    float: left;
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
    }
    .orderformlegendspacer {
    width: 320px;
    height: 45px;
    }
    .orderformlegend {
    background: url(orderformlegend1.gif) no-repeat;
    float: left;
    width: 320px;
    height: 45px;
    }
    
    
    #mainbox {
    background:#FFF;
    width:765px;
    margin:-2px auto 0 auto;
    border:2px solid #666;
    border-top:none;
    overflow: hidden;
    float: center;
    }
    * html #mainbox {height:100%;}
    head+body #mainbox {min-height:100%;}

    .header{
    background:url(topbg.jpg) repeat-x;
    width:759px;
    height:80px;
    margin:3px 3px 0 3px;
    }
    
    .header ul{float:right;list-style:none;width:404px;}
    
    .header li{float:right;width:101px;}

    .header a{
    display:block;
    height:25px;
    text-align:center;
    font-weight:bold;
    line-height:14px;
    color: #FFFFFF;
    padding-top:55px;
    background:url(topmenubackgroundtp.gif) top left no-repeat;
    }

    .header a:link,.header a:visited {
    background-color: #059;
    text-decoration: none;
    }

    .header a:active {background-color:#AAA;}

    .header a:hover {background-color:#27b;text-decoration:underline;}

    .header img {
    border:none;
    width:305px;
    height:47px;
    float:left;
    }

    .blacktitle {
    background:#000;
    margin: 3px;
    color:#CEF;
    font-weight:900;
    text-transform: uppercase;
    text-align:center;
    border-top:2px solid #FFF;
    padding: 5px 0 5px 0;
    }
    
    .promobanner {
    margin:3px 3px 0 3px;
    background: url(bannerbackground.jpg) repeat-y;
    height:156px;
    border-top: 2px solid #CCC;
    }
    
    .px{
    position:relative;
    height:10px;
    margin:0 -2px;
    background:url(background.jpg) repeat-x;
    border-bottom:2px solid #666;
    overflow:hidden;
    }
    
    .topspacer {
        margin-top: 30px;
        }
    
    .menubutton1 {
        float: left;
        left: 0px;
        width: 120px;
        height: 130px;
        background: #036 url('whatishiclone.jpg') no-repeat 0px 20px;
        margin: 2px;
        padding-left: 115px;
        padding-top: 50px;
        padding-right: 5px;
        border-style: outset;
        border-width: 3px;
        border-color: #666;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: 400;
        color: #FFFFFF;
        text-decoration: none;
        }
            
    .menubutton1:hover {
        border-color: #FFF;
        }
        
        
        .menubutton2 {
        float: left;
        width: 127px;
        height: 130px;
        background: #666 url('menufuelcalculator.jpg') no-repeat 0px 20px;
        margin: 2px;
        padding-left: 115px;
        padding-top: 50px;
        padding-right: 5px;
        border-style: outset;
        border-width: 3px;
        border-color: #666;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: 400;
        color: #FFFFFF;
        text-decoration: none;
        }
            
        .menubutton2:hover {
        border-color: #FFF;
        }
            
        .menubutton3 {
        float: left;
        width: 124px;
        height: 130px;
        background: #9DB8D2 url('menuorderonline.jpg') no-repeat 0px 20px;
        margin: 2px;
        padding-left: 115px;
        padding-top: 50px;
        padding-right: 5px;
        border-style: outset;
        border-width: 3px;
        border-color: #666;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: 400;
        color: #FFFFFF;
        text-decoration: none;
        }
        
        .menubutton3:hover {
        border-color: #FFF;
        }
        
        .titlebg {
        float: left;
        height: 46px;
        background: #333;
        width: 100%;
        margin-top: 40px;
        margin-bottom: 10px;
        }
        
        .titlewords {
        color: #09F;
        font-family:Geneva, Arial, Helvetica, sans-serif;
        font-size: 18px;
        margin-left: 10px;
        padding-top: 20px;
        font-weight: 600;
        }
        
        .maintext {
        color: #666;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        width: 400px;
        margin-left: 40px;
        margin-top: 20px;
        }
        
        .contentlist {
        padding-left: 80px;
        padding-top: 20px;
        color: #0099FF;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 800;
        }
        
        .alignright {
        float: right;
        }
        
        .mainquote {
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin-left: 80px;
        margin-right: 80px;
        margin-top: 20px;
        color: #0099FF;
        font-style: italic;
        }
        
        .bottombreak {
        line-height: 50px;
        }
        
        .bottombanner {
        float: left;
        padding-left: 120px;
        padding-top: 20px;
        height: 35px;
        background: #666;
        width: 100%;
        margin-top: 40px;
        margin-bottom: 10px;
        }
        
        .bottomlink a {
        color: #EEE;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-weight: 800;
        font-size: 14px;
        margin-left: 40px;
        margin-top: 35px;
        }
        
        .bottomlink a:hover {
        color: #7AA1C5;
        }

ukgeoff · September 5th, 2006, 12:36 PM

Haven't been able to figure this one yet but, what I would say is the fieldset legend was never intended to be used this way.

It is meant to indicate the relationship of the fields contained within the fieldset, such as, address, personal details, etc.

This is particularly important when the site is being viewed by someone using assistive technology or who has lower cognitive capabilities.

Ryan Fait · September 5th, 2006, 03:05 PM

Try this:

Code:

.orderformlegend {
    background: url("orderformlegend1.gif") 0 0 no-repeat;
    float: left;
    width: 320px;
    height: 45px;
    display: block;
}

Always use quotes in the url part of the background property, and it's one less thing for browsers to handle when you put the positioning as "0 0".