I’ve styled the legend tag giving it a black background and aligning it with a form. It displays correctly in chrome, IE9 & Opera but in Firefox the legend tag aligns to the left. I’ve tried adjusting margin and padding values.
http://mbmitservices.co.uk/ExpressTravel2/contact.html
legend{
font-family: 'PT Sans Narrow', sans-serif;
font-size: 26px;
padding:10px 0 10px 220px;
display: inline-block;
background-color:#000000;
color:#ffffff;
overflow: auto;
width:490px;
margin-left:140px;
}
label {
display: block;
float: left;
width: 120px;
text-align: right;
margin: 10px 15px 0px 0px;
font-size: 20px;
}
.Form {
font-size:30px;
margin-left:140px;
float:left;
border: solid 1px #d2d2d2;
padding: 10px 5px;
width:700px;
height:720px;
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background-color:#eeeeee;
color:#000000;
border:0px;
margin-bottom:40px;
}
.Form input:focus {
box-shadow: #33FF66 0 0px 8px;
}
.inset {
padding: 6px 6px 6px 8px;
width: 500px;
border: solid 1px #bcbbbb;
margin-bottom:15px;
outline: none;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
color:#000;
background-color:#fff;
font-size:22px;
}
.comment {
width: 515px;
height: 160px;
border: solid 1px #bcbbbb;
outline: none;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
color:#000;
background-color:#fff;
font-size:22px;
}
