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?
johnnybalubaAsked:
Who is Participating?
 
The_Blasted_OneCommented:
I recommend not to use that kind of hacks. I will wonder if Opera and Firefox understand them.

http://www.quirksmode.org/js/detect.html has a good js snippet for browser detection, you can use it.
So, the following code you'll need to place into your <head>..</head> section. Of course style_ie.css, etc. are the files which have a few styles that render different in particular browser.






<script type="text/javascript">
<!--
var BrowserDetect = {
      init: function () {
            this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
            this.version = this.searchVersion(navigator.userAgent)
                  || this.searchVersion(navigator.appVersion)
                  || "an unknown version";
            this.OS = this.searchString(this.dataOS) || "an unknown OS";
      },
      searchString: function (data) {
            for (var i=0;i<data.length;i++)      {
                  var dataString = data[i].string;
                  var dataProp = data[i].prop;
                  this.versionSearchString = data[i].versionSearch || data[i].identity;
                  if (dataString) {
                        if (dataString.indexOf(data[i].subString) != -1)
                              return data[i].identity;
                  }
                  else if (dataProp)
                        return data[i].identity;
            }
      },
      searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index == -1) return;
            return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
      },
      dataBrowser: [
            {       string: navigator.userAgent,
                  subString: "OmniWeb",
                  versionSearch: "OmniWeb/",
                  identity: "OmniWeb"
            },
            {
                  string: navigator.vendor,
                  subString: "Apple",
                  identity: "Safari"
            },
            {
                  prop: window.opera,
                  identity: "Opera"
            },
            {
                  string: navigator.vendor,
                  subString: "iCab",
                  identity: "iCab"
            },
            {
                  string: navigator.vendor,
                  subString: "KDE",
                  identity: "Konqueror"
            },
            {
                  string: navigator.userAgent,
                  subString: "Firefox",
                  identity: "Firefox"
            },
            {
                  string: navigator.vendor,
                  subString: "Camino",
                  identity: "Camino"
            },
            {            // for newer Netscapes (6+)
                  string: navigator.userAgent,
                  subString: "Netscape",
                  identity: "Netscape"
            },
            {
                  string: navigator.userAgent,
                  subString: "MSIE",
                  identity: "Explorer",
                  versionSearch: "MSIE"
            },
            {
                  string: navigator.userAgent,
                  subString: "Gecko",
                  identity: "Mozilla",
                  versionSearch: "rv"
            },
            {             // for older Netscapes (4-)
                  string: navigator.userAgent,
                  subString: "Mozilla",
                  identity: "Netscape",
                  versionSearch: "Mozilla"
            }
      ],
      dataOS : [
            {
                  string: navigator.platform,
                  subString: "Win",
                  identity: "Windows"
            },
            {
                  string: navigator.platform,
                  subString: "Mac",
                  identity: "Mac"
            },
            {
                  string: navigator.platform,
                  subString: "Linux",
                  identity: "Linux"
            }
      ]

};
BrowserDetect.init();

                  
if ( BrowserDetect.browser == "Firefox" )
      document.write( "<link rel=stylesheet type=text/css href=style_ff.css>");
else if ( BrowserDetect.browser == "Opera" )
      document.write( "<link rel=stylesheet type=text/css href=style_op.css>");
else
      document.write( "<link rel=stylesheet type=text/css href=style_ie.css>");

// -->
</script>
0
 
The_Blasted_OneCommented:
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.
0
 
johnnybalubaAuthor Commented:

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?
0
 
johnnybalubaAuthor Commented:
sorry, only read your last comment and not the main one.
will look into it.
0
 
johnnybalubaAuthor Commented:
This was of course a much better way of handling this.

Thanks a lot!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.