« Esperanto layout in GTK applications
Amazing dogbot video »

CSS problems with Internet Explorer

Every webdesigner have to face the truth: there is no code that works the same on all browsers. This site for instance deals with some serious issues concerning to the different ways Firefox and Internet Explorer reads CSS code, although Firefox meets the W3C standards and Internet Explorer doesn't. How to avoid problems with CSS and Internet Explorer then?

Javascript (eew!)
There are too many cons about use of Javascript because it's rendered client-side. It means the script runs when the client's already requested and is loading the website. It means the website might load differently for each browser. There are people also who disable Java Script on their browsers for security matters.

PHP (wee!)

This is a simple code for browser detection:

PLAIN TEXT
PHP:
  1. <?php
  2. if (!(strpos($HTTP_USER_AGENT,'Mozilla/5') === false)) {
  3. echo("<!-- Netscape 6 specific code -->");
  4. } else {
  5. echo("<!-- Code for other browsers -->");
  6. }
  7. ?>

In this example, should you be using Netscape 6 then the server returns a particular code - otherwise, the code is different. If you want to go deeper, there's a bit more complex trick. This is an example - save a file named "browserdetect.php" on your directory with the following content:

PLAIN TEXT
PHP:
  1. <?php
  2. /**
  3. *  $browser will contain one of the following values:
  4. *      'iewin' : IE 4+ for Windows
  5. *      'iemac' : IE 4 for Macintosh
  6. *     'ie5mac' : IE 5 Macintosh
  7. *      'nswin' : Netscape 4.x Windows
  8. *     'nsunix' : Netscape 4.x Unix
  9. *      'nsmac' : Netscape 4.x Mac
  10. *        'ns6' : Netscape 6 / Mozilla
  11. */
  12.  
  13. function inAgent($agent) {
  14. global $HTTP_USER_AGENT;
  15. $notAgent = strpos($HTTP_USER_AGENT,$agent) === false;
  16. return !$notAgent;
  17. }
  18.  
  19. ( inAgent('MSIE 4') or inAgent('MSIE 5') ) {
  20. ( inAgent('Mac') )
  21. $browser = inAgent('MSIE 5') ? 'ie5mac' : 'ie4mac';
  22. elseif ( inAgent('Win') ) $browser = 'iewin';
  23. } elseif ( !inAgent('MSIE') ) {
  24. if ( inAgent('Mozilla/5') or inAgent('Mozilla/6') ) {
  25. $browser = 'ns6';
  26. } elseif ( inAgent('Mozilla/4') ) {
  27. if ( inAgent('Mac') ) $browser = 'nsmac';
  28. elseif ( inAgent('Win') ) $browser = 'nswin';
  29. else $browser = 'nsunix';
  30. }
  31. } else $browser = "unknown";
  32.  
  33. ?>

With this script on hand, server-side browser detection becomes quite simple. Put this into your page:

PLAIN TEXT
PHP:
  1. <?php
  2. include(browserdetect.php); ?>
  3. <?php if ($browser == 'ns6'): ?>
  4. <!-- Netscape 6 specific code -->
  5. <?php else: ?>
  6. <!-- Code for other browsers -->
  7. <?php endif; ?>

Within these lines now you may call the CSS external files written for the specific browser and job's done. Because in my humble opinion IE is the root of all evil, I'm using a slight modification of the code above.

PLAIN TEXT
PHP:
  1. <?php
  2. function inAgent($agent) {
  3. global $HTTP_USER_AGENT;
  4. $notAgent = strpos($HTTP_USER_AGENT,$agent) === false;
  5. return !$notAgent; }
  6. if ( inAgent('MSIE') ) { $browser = 'ie'; } ?>
  7. <?php if ($browser == 'ie'): ?>
  8. <!-- Code for Internet Explorer -->
  9. <?php else: ?>
  10. <!-- Code for other browsers -->
  11. <?php endif; ?>

Read also
Privacy Policy
About
Brazilians on Orkut


This entry was posted on Monday, July 14th, 2008 at 11:36 pm and is filed under Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “CSS problems with Internet Explorer”

  1. [...] - bookmarked by 6 members originally found by mtayla on 2008-10-30 CSS problems with Internet Explorer http://tech.nebulosabar.com/wordpress/css-problems-with-internet-explorer/ - bookmarked by 5 [...]

Leave a Reply