Browsing Posts tagged ie7

OK; this was another one of those WTF-CSS moments after spending a couple of hours scratching heads trying anything and everything.

A website currently in production; we're doing some X-browser testing and a very odd scenario kept occurring in IE7 only. The website looked beautiful in everything except IE7 (usually it's IE6 we're cursing at). For some reason DOM elements kept 'vanishing' even though they were there!, there in the HTML. We thought we were going mad!

A cursory glance at the 'vanishing' elements in the IE Developer Toolbar > DOM Inspector highlighted their "hasLayout" property, and it's "-1" value (not set) which led me to a solution, but I'm still scratching my head as to why!?

Firstly the solution in-case anyone has Google'd looking for the same answer:
For IE7 ONLY, to make your vanishing elements magically re-appear, applying ONE (or more) of the following properties to the 'vanishing' elements will force those DOM elements to have a "hasLayout" value of "1" (true), in affect forcing them to render. HOWEVER in typical Microsoft fashion some of these CSS attributes have UNIQUE values that really do not stick to any x-browser standard. (Typical M$! *evil*).

  • display:inline-block
  • height:{any value}
  • float:left (or) right
  • position: absolute
  • width: {any value}
  • -ms-writing-mode: tb-rl
  • zoom: {any value}

Secondly, the theory for anyone interested:
From what I can make out; and I'll probably add to this as I found out more, but from what I can make out, under a given set of circumstances absolutely positioned elements near floated elements will 'cause them to 'disappear'. This article (http://www.brunildo.org/test/IE_raf3.html) exploring this scenario led me to another article (http://msdn.microsoft.com/en-us/library/ms533776%28VS.85%29.aspx) at the Microsoft Developer Network (MSDN) and ultimately a solution. By forcing hasLayout to 1 you're telling IE that this element hasLayout, has form, shape and substance. In other words don't hide the damn thing! I'd definitely welcome any comments as to WHY this happens because it's one of those incidents where the solution works but you don't quite understand the underlying principals behind it.

Just a few notes here for personal reference. For people un-familiar with PHP, get_browser(); is a nifty little function that allows server-side scripting to detect browser capabilities. However it does rely on the browscap.ini directive in PHP.INI being enabled and using a valid path to a browscap.ini file somewhere.

Trouble is browsers seem to be changing every five minutes, and new ones added, so keeping an up-to-date list is somewhat of a nightmare.

One Gary Keith whose made it his life's mission to keep an up-to-date browscap.ini file for the developers of the world. As an addendum. Thank You ! : )

http://browsers.garykeith.com/downloads.asp

Some other info. for personal reference, as this is what started this whole tangent in the first place, is IE7 Compatibility View. A feature that Microsoft have enabled in IE8 to force IE7 standards mode to provide some backwards-compatibility in their new browser.

There is a nifty little tag you can include in your HTML to force this, and by default it also disables the IE7 Compatilbilty View button in IE8. Nice !

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Here's the official Microsoft splurge about it : http://msdn.microsoft.com/en-us/library/cc817574.aspx

Something worthy of note :

"The X-UA-compatible header is not case sensitive; however, it must appear in the Web page's header (the HEAD section) before all other elements, except for the TITLE element and other META elements."

Some quick PHP IE detection script. Returns major version. i.e. 6,7,8 etc...

<?php
$sUA = $_SERVER['HTTP_USER_AGENT'];
function getInternetExplorerVersion($sUA){
	// RegEX courtesty of Microsoft MSDN : http://msdn.microsoft.com/en-us/library/ms537509(VS.85).aspx.
	preg_match('/MSIE ([0-9]{1,}[\.0-9]{0,})/',trim($sUA), $arrMatches);
	if(ini_get('browscap')){
		if(function_exists('get_browser')){
			$arrBrowserComponents = get_browser(null, true);
			if(!empty($arrBrowserComponents['version'])){
				return floor($arrBrowserComponents['version']);
			}else{
				// Use fall back method
				if(isset($arrMatches[1]) && !empty($arrMatches[1])){
					return floor ($arrMatches[1]);
				} else {
					return null;
				}
			}
		}
	} else {
		// Use fall back method
		if(isset($arrMatches[1]) && !empty($arrMatches[1])){
			return floor ($arrMatches[1]);
		} else {
			return null;
		}
	}
}

echo getInternetExplorerVersion($sUA);
?>