Alot of people wonder why in some browsers, their site looks differnet. This is because each browser is made differently and each take their own approach to how CSS should be displayed in their browser. Alot of people on the Joomla! forums post how can i fix my CSS, so Ive created this post to answer their questions
This can normally be fixed using the @import function, but if this can not be used, try tying out this.
Code:
<?php
$nav = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
if (stristr($nav, "msie"))
{
echo "ie-css.css";
}
else
{
echo "templatecss.css";
}
?>
The above code will check if the browser being used is Internet Explorer, if it is it will use the file 'ie-css.css', however if the users browser isn't Internet Explorer, it will use the file 'templatecss.css'.
This function can be expanded to use different browsers, as shown below.
Code:
<?php
$nav = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
// checks if browser is Internet Explorer
if (stristr($nav, "msie"))
{
echo "ie-css.css";
}
// checks if browser is Mozilla
elseif (stristr($nav, "moz"))
{
echo "mozilla-cssfile.css";
}
// checks if browser is Netscape
elseif (stristr($nav, "ns"))
{
echo "netscape-css.css";
}
// If browser is a different one
else
{
echo "templatecss.css";
}
?>
I hope this came in help. An example of this script in a real site would be
Code:
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<!-- Smart Template Chooser -->
<!-- Created By Jon Hurlock -->
<link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site;?>/templates/
<?php
$nav = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
// checks if browser is Internet Explorer
if (stristr($nav, "msie"))
{
echo "ie-css.css";
}
// checks if browser is Mozilla
elseif (stristr($nav, "moz"))
{
echo "mozilla-cssfile.css";
}
// checks if browser is Netscape
elseif (stristr($nav, "ns"))
{
echo "netscape-css.css";
}
// If browser is a different one
else
{
echo "templatecss.css";
}
?>
/>
</head>
<body>
<h1>The Body Text For Your Site</h1>
</body>
</html>
The only problem with this script is that i can take alot of coding if you want to write, an individual CSS File for each browser, however you could just load a CSS file first then get this script to over-write the default CSS to just change certain values.
Anyway i hope this helped.
Jon
