Joomla!
http://forum.joomla.org/

A trick to get your CSS to display the same no matter what the browser!
http://forum.joomla.org/viewtopic.php?f=142&t=88778		 Page 1 of 1
Author:  jonhurlock [ Thu Aug 24, 2006 7:49 pm ]
Post subject:  A trick to get your CSS to display the same no matter what the browser!
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
Author:  infograf768 [ Sat Nov 25, 2006 7:49 am ]
Post subject:  Re: A trick to get your CSS to display the same no matter what the browser!
Another solution is to use IE-specific conditional comments

Example:

Code:
<!--[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
Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/