Display Problem: Form-->Legend field in Firefox

Discussion in 'CSS' started by Supergrover1981, Sep 5, 2006.

0
  1. #1
    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:
    
<!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>
    Code (markup):
    CSS:
    
/* 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;
        }
    Code (markup):
     
    Supergrover1981, Sep 5, 2006 IP
  2. Gordaen

    Gordaen Peon

    Messages:
    277
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Looking at the source on the actual page, you have a lot of problems such as divisions within anchor tags. That's going to cause each browser to guess what you intended, and it will end up really bad in Safari. For instance, the divs setup like that are not clickable in IE6, they are in FF, they are in Safari but all of the text is underlined.

    I'd suggest working on markup compliance before working on specific issues as they are probably related.

    And why are the links at the bottom setup with a styled div rather than an unordered list?
     
    Gordaen, Sep 6, 2006 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Speaking from inference only.

    The legend appears to be an optional integral part of the fieldset element, and is an inline element. Inline elements do not have the width or height properties.

    Use an appropriate header, and offset its position. An hx can have height and width. 
    
<!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=UTF8" />

  <title>fake legend</title>
  <style type="text/css">
  /*<![CDATA[*/
  <!--
  
  form {
      width: 25em;
      margin: 2em auto;
      padding: 2em;
      border: 1px solid black;
      }
      
  fieldset {
      padding: 0 10px 10px;
      }
      
  h3 {
      position: relative;
      top: -.75em;
      background-color: white;
      font-size: 1em;
      width: 90%;
      text-align: center;
      border: 1px solid black;
      margin: 1em auto 0;
      }

  -->
  /*]]>*/
  </style>
</head>

<body>

  <form method="get" action="#">
    <fieldset>
      <h3>replacement legend</h3> <!-- or appropriate heading level -->
      <label>data: <input type="text" /></label>
    </fieldset>
  </form>
</body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Sep 6, 2006 IP