Sep 5th, 2006, 10:16
|
|
New Member
|
|
Join Date: Jul 2006
Location: Cairns
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
|
Display Problem: Form-->Legend field in Firefox
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: Select all
<!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"> </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"> </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"> </div>
</body>
</html>
CSS:
- Code: Select all
/* 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;
}
|
Display Problem: Form-->Legend field in Firefox
Similar Threads
