Atlanta Web Design http://www.mywebtronics.com/atlanta-web-design Just another WordPress weblog Fri, 11 Jul 2008 16:17:07 +0000 http://wordpress.org/?v=2.5.1 en Give Browser Specific CSS Files With PHP http://www.mywebtronics.com/atlanta-web-design/give-browser-specific-css-files-with-php/ http://www.mywebtronics.com/atlanta-web-design/give-browser-specific-css-files-with-php/#comments Wed, 09 Jul 2008 21:11:41 +0000 admin http://www.mywebtronics.com/atlanta-web-design/?p=6 Make every website display perfectly in every browser! A PHP script that provides a simple way to accomplish this feat without spending countless hours on one style sheet. The best way to do this is to deliver the user a style sheet that perfectly matches their browser.

If you are like me, you hate having to make one CSS stylesheet work for every browser. Of course its much easier to adjust the stylesheet to work for Opera, Firefox and Safari than it is for Internet Explorer, especially Internet Explorer 6.


The reason this is so difficult is because different browsers render web pages differently. Microsoft, the makers of the notorious Internet Explorer series, do not believe they have to comply with with the W3C. The W3C sets the standards for the web so that their is uniformity among web designers and developers.

Alright, so if you want to deliver a different CSS file for different users, their are two options. You can use Javascript or Serverscripting. Javascript works ok, as long as the user does not have javascript disabled. Most user do not, however some users do disable javascript for various reasons. With javascript disabled, the correct CSS file would not be delivered. Server scripting on the other hand, works every time. The user is not able to turn it off.

The server detects what browser the user is using. It looks in the css.php file and sends the correct version of the CSS file to the user’s browser, changing the header of the file to ‘css.css’.

I use a series of includes inside of the file to include the proper CSS file. You can however, just keep all of the CSS in the file without the includes if you don’t like switching back and forth between files, its just a personal preference.

In order to use the php file simply link to it like you would a CSS file in the head section:

  1.  
  2. <link rel="stylesheet" href="css.php" type="text/css" />
  3.  

I did not write this script, I found it open source somewhere on the web, and I have not been able to locate it again. If you know where the original is, please let me know so I can link to it.

  1.  
  2. <?php
  3.  
  4.  
  5.         header(‘Content-type: text/css’);
  6.  
  7.  
  8.         $browser = array (
  9.  
  10.  
  11.                 "MSIE", // parent
  12.  
  13.  
  14.                 "OPERA",
  15.  
  16.  
  17.                 "MOZILLA", // parent
  18.  
  19.  
  20.                 "NETSCAPE",
  21.  
  22.  
  23.                 "FIREFOX",
  24.  
  25.  
  26.                 "SAFARI"
  27.  
  28.  
  29.         );
  30.  
  31.  
  32.         $info[browser] = "OTHER";
  33.  
  34.  
  35.         foreach ($browser as $parent) {
  36.  
  37.  
  38.                 $s = strpos(strtoupper($_SERVER[‘HTTP_USER_AGENT’]), $parent);
  39.  
  40.  
  41.                 $f = $s + strlen($parent);
  42.  
  43.  
  44.                 $version = substr($_SERVER[‘HTTP_USER_AGENT’], $f, 5);
  45.  
  46.  
  47.                 $version = preg_replace(‘/[^0-9,.]/’,”,$version);
  48.  
  49.  
  50.                
  51.  
  52.  
  53.                 if (strpos(strtoupper($_SERVER[‘HTTP_USER_AGENT’]), $parent)) {
  54.  
  55.  
  56.                         $info[browser] = $parent;
  57.  
  58.  
  59.                         $info[version] = $version;
  60.  
  61.  
  62.                 }
  63.  
  64.  
  65.         }
  66.  
  67.  
  68. ?>
  69.  
  70.  
  71.  
  72.         <?php
  73.  
  74.  
  75.                 if (($info[browser] == "MSIE") && ($info[version] == 7)) {
  76.  
  77.  
  78.                         echo include("ie7.css");
  79.  
  80.  
  81.                 } else if (($info[browser] == "MSIE") && ($info[version] < 7)) {
  82.  
  83.  
  84.                         echo include("ie6.css");
  85.  
  86.  
  87.                 } else if ($info[browser] == "FIREFOX") {
  88.  
  89.  
  90.                         echo include("style.css");
  91.  
  92.         } else if ($info[browser] == "SAFARI") {
  93.  
  94.  
  95.                         echo include("style.css");
  96.                        
  97.                 } // you can add the other browsers in the same manner if you like
  98. else {
  99.  
  100.  
  101.                         echo include("style.css");
  102.  
  103.  
  104.                 }
  105.  
  106.  
  107.         ?>
  108.  
  109.  
  110. }
  111.  

Give it a try, if you have any problems or questions, let me know and I will do my best to answer them ;)

]]> http://www.mywebtronics.com/atlanta-web-design/give-browser-specific-css-files-with-php/feed/ Color Wheel Pro http://www.mywebtronics.com/atlanta-web-design/color-wheel-pro/ http://www.mywebtronics.com/atlanta-web-design/color-wheel-pro/#comments Wed, 09 Jul 2008 21:09:48 +0000 admin http://www.mywebtronics.com/atlanta-web-design/?p=5 Color Wheel Pro - a unique software program that allows you to see color theory in action. With Color Wheel Pro, you can create harmonious color schemes and preview them on real-world examples.

I have really used this software extensively because I do not naturally see the best color combination. A must for any web designer. Enjoy!

]]> http://www.mywebtronics.com/atlanta-web-design/color-wheel-pro/feed/ Web Design Trick: Javascript Column Heights http://www.mywebtronics.com/atlanta-web-design/web-design-trick-javascript-column-heights/ http://www.mywebtronics.com/atlanta-web-design/web-design-trick-javascript-column-heights/#comments Wed, 09 Jul 2008 21:07:29 +0000 admin http://www.mywebtronics.com/atlanta-web-design/?p=4 This is a simple web design trick I use in order to keep the left and center columns the same height when needed. There are a few CSS hacks you can try to accomplish the same thing, however because of browser compatibility I find it is much better to use javascript.

So to be clear, here is the problem, you design a website to have a left column and a center column. The left column content almost stays the same from page to page so it is usually the same height. The center column, which houses the main content, changes from page to page so sometimes it may be longer or shorter than the left column. By the way, you can use this script with as many columns as you like, it is not restricted to just two.

Script Overview

The javascript is placed in the header section of the page. Classes are placed inside of the divs that you want to be the same height. When the page loads, the javascript determines which of the divs is the tallest and makes the other div the same height. Pretty simple huh?

First copy this into the head section of your web page, (or you can use an external javascript). The comments should explain the script. It will work right out of the box.

  1. <script type="text/javascript"><!–mce:0–></script>

  1.  
  2. fixHeight=function(){
  3.  
  4.                 // Declare and initialize variables
  5.  
  6.                 var divs,contDivs,maxHeight,divHeight,d;
  7.  
  8.                 maxHeight=0;
  9.  
  10.                 contDivs=[];
  11.  
  12.        
  13.  
  14.                 divs=document.getElementsByTagName(‘div’);              // get all <div> elements in the document
  15.  
  16.                 for(var i=0;i<divs.length;i++){                         // for all divs…
  17.  
  18.                         if(/\bfixheight\b/.test(divs[i].className)){    // find those with the class attribute ‘fixheight’…
  19.  
  20.                                  d=divs[i];
  21.  
  22.                                  contDivs[contDivs.length]=d;
  23.  
  24.  
  25.  
  26.                                  // determine their height, defined as either offsetHeight or pixelHeight
  27.  
  28.                                  if(d.offsetHeight){ divHeight=d.offsetHeight; }
  29.  
  30.                                  else if(d.style.pixelHeight){ divHeight=d.style.pixelHeight; }
  31.  
  32.  
  33.  
  34.                                  // Keep track of the largest div height
  35.  
  36.                                  maxHeight=Math.max(maxHeight,divHeight);
  37.  
  38.                         }
  39.  
  40.                 }
  41.  
  42.  
  43.  
  44.                 // assign all divs the height of the tallest div
  45.  
  46.                 for(var i=0;i<contDivs.length;i++){
  47.  
  48.                         contDivs[i].style.height=maxHeight + "px";
  49.  
  50.                 }
  51.  
  52.         }
  53.  
  54.  
  55.  
  56.         // Run fixheight on page load
  57.  
  58.         window.onload=function(){
  59.  
  60.                 if(document.getElementsByTagName){ fixHeight(); }
  61.  
  62.         }
  63.  
  64.         // ]]>

The divs you want to have same height should look like this:

  1.  
  2. <div class="fixheight">
  3. </div>

Now you’re done. I have tested this in Firefox, IE, Safari and Opera and I have found one bug which I put in this page so you could see it.

I hope this script is helpful to you. Have fun web designing
;)

At Atlanta Web Design, we offer comprehensive web development solutions to our clients including e-commerce, conent management systems, customer management and general design services.

]]> http://www.mywebtronics.com/atlanta-web-design/web-design-trick-javascript-column-heights/feed/