A trick to get your CSS to display the same no matter what the browser!

Locked
User avatar
jonhurlock
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 175
Joined: Sun Sep 11, 2005 1:34 am
Contact:

A trick to get your CSS to display the same no matter what the browser!

Post by jonhurlock » Thu Aug 24, 2006 7:49 pm

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: Select all

<?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: Select all

<?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: Select all


<?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
Last edited by jonhurlock on Thu Aug 24, 2006 11:19 pm, edited 1 time in total.

User avatar
infograf768
Joomla! Master
Joomla! Master
Posts: 18629
Joined: Fri Aug 12, 2005 3:47 pm
Location: **Translation Matters**

Re: A trick to get your CSS to display the same no matter what the browser!

Post by infograf768 » Sat Nov 25, 2006 7:49 am

Another solution is to use IE-specific conditional comments

Example:

Code: Select all

<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
Good explanation here:
http://www.quirksmode.org/css/condcom.html
Jean-Marie Simonet / infograf · http://www.info-graf.fr
---------------------------------
ex-Joomla Translation Coordination Team • ex-Joomla! Production Working Group


Locked

Return to “Design and Accessibility - Archived”