Example:
HTML:
<!DOCTYPE html PUBLIC "XHTML 1.0 Transitional">
<html xmlns="
http://www.w3.org/1999/xhtml"
>
<head profile="
http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Align</title>
<link href="align.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body class="lab" id="tbleveranse">
<div id="wrapper">
<h1 class="center">Align problem</h1>
<form name="customer" METHOD="get" ACTION="editcustomer.php">
<fieldset>
<legend>Legend</legend>
<input type="hidden" name="maincustomerId" value="34" />
<input type="hidden" name="subdepartmentId" value="" />
<div>
<span class="large heading">Heading 1</span>
<span class="medium heading">Heading 2</span>
<span class="large heading">Heading 3</span>
<span class="verysmall heading">H</span>
<span class="large heading">Heading 5</span>
</div>
<div>
<input type="text" name="companyname" id="companyname" class="large" value="" tabindex="1" />
<input type="text" name="orgnum" id="orgnum" class="medium" value="" tabindex="2" />
<input type="text" name="address" id="address" class="large" value="" tabindex="3" />
<input type="text" class="verysmall" name="postcode" tabindex="4" value="" />
<span class="large" id="kommune">Some place</span>
</div>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
#wrapper
{
width: 56em;
margin: 0px auto;
}
input {
font: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: left;
border: 1px solid darkgrey;
}
input.verysmall {
width: 3.6em;
}
input.medium {
width: 7.8em;
}
input.large {
width: 12.2em;
}
span {
color: black;
text-align: left;
display: -moz-inline-stack;
display: inline-block;
border: 1px solid red;
}
span.heading {
font-weight: bold;
margin-bottom: 0.1em;
}
span.verysmall {
width: 3.6em;
}
span.medium {
width: 7.8em;
}
span.large {
width: 12.2em;
}
fieldset {
border: 1px solid darkgrey;
background: #EFEFEF;
position: relative;
}
I have worked around this for IE using the <!--[if IE]> type of hacks but for Opera (or firefox) I am unsure. It seems like it is firefox that behaves differently on this one. Is there a proper way of dealing with this or are there more hacks I can use?
Start Free Trial
