• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3330
  • Last Modified:

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?
0
johnnybaluba
Asked:
johnnybaluba
  • 3
  • 2
1 Solution
 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now