It is currently Fri Sep 05, 2008 4:27 pm

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

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

Postby jonhurlock on 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.
:: Dont Insult, unless you can take insult! ::
Usefull links http://forge.joomla.org/sf/projects/accessible_joomla :: a8e Joomla
http://forum.joomla.org/index.php/board,151.0.html :: Welsh Forum
User avatar
jonhurlock
Joomla! Enthusiast
Joomla! Enthusiast
 
Posts: 174
Joined: Sun Sep 11, 2005 1:34 am

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

Postby infograf768 on 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 · GMT +1
Qui vult dare parva non debet magna rogare.
User avatar
infograf768
Joomla! Master
Joomla! Master
 
Posts: 11480
Joined: Fri Aug 12, 2005 3:47 pm
Location: •Translation Matters•


Return to Design and Accessibility - Archived

Who is online

Users browsing this forum: No registered users and 2 guests