asked on

Slight alignment difference between firefox and IE/Opera

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?

ASKER CERTIFIED SOLUTION

The_Blasted_One

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

The_Blasted_One

If you will need to change something more significant than CSS styles, you can also use "if () document.write" logic block for outputting any browser-dependant tags in your BODY. Use it with <script> tags, of course.

johnnybaluba

ASKER

Hmm, that seems a bit drastic, but I can maybe do that to load a different css in the header instead?

Do you have any pointers to documentation on this?

johnnybaluba

ASKER

sorry, only read your last comment and not the main one.
will look into it.

johnnybaluba

ASKER

This was of course a much better way of handling this.

Thanks a lot!