JoomTPL: IE issues

From Kb_JMY(晉明夷)

Jump to: navigation, search

Tackling IE non-W3-compliant issues in template design

  • Two major methods to tackle IE issues (or browser issues)

Contents

Using Feature Sensing

  • Ref: p.302, Chapter 12 of the book "CSS, DHTML &Ajax 4th Edition"
  • Detect if a certain IE feature is available, otherwise use CSS values for Firefox!


Using Browser Sensing

  • Detect if user browser is IE, otherwise use CSS values for Firefox!


Using Conditional Commments

  • Ref: p.86, chapter2 of the book "CSS, DHTML &Ajax 4th Edition"
  • Conditional Comments can ONLY be interpreted by IE browsers (IE5.0 & later) and are ignored by other browsers (Firefox, Opera, Safari, Netscape...).
  • If your ie.css provide codes to handle all IE browsers, the syntax is:
  • <!--[if IE]>... <![endif]-->
  • If more specifically for a particular IE browser only, then:
  • <!--[if IE 7]>... <![endif]-->
  • <!--[if IE 6]>... <![endif]-->
  • <!--[if IE 5.5]>... <![endif]-->
  • <!--[if IE 5.0]>... <![endif]-->
  • <!--[if IE 4.0]>... <![endif]-->


  • Put the following codes inside the <head> tag and just below the <meta> and <title> tags 
<link href="templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" type="text/css" rel="style sheet" media="all" />

<!--[if IE 7]>
<link href="templates/<?php echo $mainframe->getTemplate(); ?>/css/ie7.css"  type="text/css" rel="stylesheet" media="all" />
<![endif]-->

Using Embedded CSS codes (IE6 only)

  • IE6: Embedding IE6's CSS codes like: 
#jxt-left {width: 186px !important;  width: 170px;}
  • In this case, Firefox will use width: 186px !important; and IE6 width: 170px;


Using Browser Detection (Good also for other browser types)

Using JavaScript

  • Ref:
  • p.308, Chapter 13 of the book "CSS, DHTML &Ajax 4th Edition"
-> mosct.com -- chap13 codes 
<script type="text/javascript">
<!--
var agent = navigator.userAgent.toLowerCase(); 

var isMoz = (agent.indexOf('mozilla') != -1);
var isIE = (agent.indexOf('msie') != -1);
var isSafari = (agent.indexOf('safari') != -1);
var isOpera = (agent.indexOf('opera') != -1);

document.write('<p><b>This browser\'s designation is:</b> ');
document.write(navigator.userAgent + '</p>');

if (isMoz || isIE || isSafari || isOpera) {
	if (isMoz) { document.write('<p>This Browser is compatible with Mozilla.</p>'); }
	if (isIE) { document.write('<p>This Browser is compatible with Internet Explorer.</p>'); }
	if (isSafari) { document.write('<p>This Browser is compatible with Safari.</p>'); }
	if (isOpera) { document.write('<p>This Browser is compatible with Opera.</p>'); }

}
else document.write('<p>Sorry, I don\'t recognize this browser.</p> ');
//-->
</script>

Using "HTTP_USER_AGENT"

  • Ref:
  • includes a "detectbrowser.php" in after the <head> tag and the default css file like this: 
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

// Load CSS File 
<?php echo $css_file;?>
</head>
  • The script of "detectbrowser.php" is something like this one: 
<?php
// no direct access
defined( "_VALID_MOS" ) or die( "Restricted Access." );


function browser_detection( $which_test ) {
  /******* Calling convention: "browser_detection('browser');" ****/
	// initialize the variables
	$browser = '';
	$dom_browser = '';

	// set to lower case to avoid errors, check to see if http_user_agent is set
	$navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';


	// run through the main browser possibilities, assign them to the main $browser variable
	/************************************* 
	 Testing Order is important!
    -> Opera must be the first -> ie4 & konqueror -> safari -> gecko 
	**************************************/
	if (stristr($navigator_user_agent, "opera"))      { $browser = 'opera';	$dom_browser = true;  }
	elseif (stristr($navigator_user_agent, "msie 7")) { $browser = 'msie7'; $dom_browser = false;	}
	elseif (stristr($navigator_user_agent, "msie"))   { $browser = 'msie'; 	$dom_browser = true;	}
	elseif ((stristr($navigator_user_agent, "konqueror")) || (stristr($navigator_user_agent, "safari"))) 
	                                                  {	$browser = 'safari'; $dom_browser = true;	}
	elseif (stristr($navigator_user_agent, "gecko"))  {	$browser = 'mozilla';$dom_browser = true;	}
	elseif (stristr($navigator_user_agent, "mozilla/4")) {$browser = 'ns4';  $dom_browser = false;}	
	else 	{	$browser = false; $dom_browser = false;	}


	// return the test result you want
	if ( $which_test == 'browser' )	{	return $browser; }
	elseif ( $which_test == 'dom' )	{	return $dom_browser; }
} //end function browser_detection( $which_test )



/*************** Switch CSS accordingly ***********************/
$user_browser = browser_detection( 'browser' );

if ( $user_browser == 'msie7' ) {
	$css_file = '<link href="' .$mosConfig_live_site. '/templates/' . $mainframe->getTemplate(). '/css/IE7_Only.css" type="text/css" rel="stylesheet" />'; 
	}
elseif ( $user_browser == 'msie' ) {
	$css_file = '<link href="' .$mosConfig_live_site. '/templates/' . $mainframe->getTemplate(). '/css/IE6_Only.css" type="text/css" rel="stylesheet" />'; 
	}
else {	
	$css_file = '<link href="' .$mosConfig_live_site. '/templates/' . $mainframe->getTemplate(). '/css/template_css.css" type="text/css" rel="stylesheet" />'; 
	}

?> //end the whole php
Retrieved from "http://kb.healthkb.org/view/JoomTPL:_IE_issues"



Personal tools