Login

07-27-2011, 06:11 AM

[eluser]zxcv[/eluser]
Hello,

I've been working on a application for a while. I style the site with CSS, and I've mainly used Google Chrome when testing the site and so forth. When I enter the site in IE the whole layout gets weird and ugly. Firefox is better but IE is seriously bad. I should have dealt with IE simultaneously really, I did in the beginning and the browsers worked equally well...

THE QUESTION
However I'm gonna work on an different stylesheet for the IE browser, and I'll use the codeigniter User Agent class to help me load the right stylesheet.
What I basically want is this piece of code to be written once:

Code:
$this->load->library('user_agent');

switch($this->agent->browser()) {

   case 'Internet Explorer':

        $data['link_stylesheet'] = 'localhost/.../.../IE_stylesheet.css';

        break;

   case 'Chrome':

        $data['link_stylesheet'] = 'localhost/.../.../Chrome_stylesheet.css';

        break;

   //....

   }

Then I would load the link_stylesheet variable to each view, and using that variable as the link for the stylesheet.

But I just want to do this once...not having to use the switch in every controller. The CI guide says the constructor can't return values...so the variable can't be set in the contructor?
How do I solve this?

07-27-2011, 06:32 AM

[eluser]zxcv[/eluser]
Never mind, a sessionvariable solved it. I tried it before, but it wouldn't work...now it did.
Administrator can erase the thread!

Unless you still think there's something important for me to know :p

07-27-2011, 06:44 AM

[eluser]John_Betong_002[/eluser]
If your page layout is "weird and ugly" in different browsers then try validating the page HTML and CSS using the following:

http://validator.w3.org/

and

http://jigsaw.w3.org/css-validator/

once the majority of errors are eliminated then you should find that the page looks the same in most browsers.

As far as browser testing is concerned then I link the following code in the header:

Code:
// &lt;head&gt;

 &lt;?php /* Corner & Gradients & Smartphones */ include 'style_user_agent.php';?&gt;

 

// style_user_agent.php

Code:
// set colour gradient start and end

$cx8 = 'fc9'; 

$cxa = 'fff';

/* FIVE CASES */ 

$explorer = 'NOT USED - use opera instead';

$opera    = "#$cx8 url(" .base_url() .'subdomain/css/bg-fc4.jpg)';

$firefox  = "-moz-linear-gradient(top, #$cx[8], #$cx[a])";

// Chrome and Safari

$webkit   = "-webkit-gradient(linear, left top, right bottom, from(#$cxa), to(#$cx8))";  

$bdr = 'border-radius: 0.88em'; // default

// Find browser

switch($this->agent->browser())

{

  case 'Internet Explorer': 

  case 'Opera':             $grad_XXX = "body{background:#$cx8 url(" .base_url() ."subdomain/css/bg-fc4.jpg)}";  

  break;

  case 'Firefox':           $grad_XXX = "body{background:-moz-linear-gradient(left top, #$cxa, #$cx8)}";  

                            $bdr = '-moz-border-radius:0.88em';

  break;

  // Safari, Chrome

  default:                  

  case 'Mozilla':           $grad_XXX = "body{background-image: -webkit-gradient(linear, left top, right bottom, from(#$cxa), to(#$cx8))}";  

  break;

}//switch 

// set defaults

$new_body   = $grad_XXX;

$new_both   = '';

$new_left   = '';

$new_right  = '';

$hidden     = '';

$searchfont = '';

$shadow     = '';

// Smartphone detection

$x = (isset($_SERVER['HTTP_USER_AGENT']) 

      && 

     strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') 

     || 

     $this->agent->mobile()); 

if($x){

  $new_body   = 'body {margin:0 1em;font-size:x-large;color:#030}';

  $new_both   = 'body,#top_blog,#new_both,#new_left{width:100%}';

  $new_left   = '#new_left,.new_right{color:#030}';

  $new_right  = '.new_right{margin:1em 4.2em;width:88%}';

  $hidden     = '#footer,.hidden{visibility:hidden}';

  $searchfont = '#search input{font-size:x-large}';

  $shadow     = '#new_both{box-shadow:none}';

}// 

echo  

"&lt;style type='text/css'&gt;" 

  . $new_body

  . 'div,p,fieldset,img,li {' .$bdr .'}'  

  . $new_both

  . $new_left

  . $new_right

  . $hidden

  . $searchfont

  . $shadow

.'&lt;/style&gt;';

//

07-27-2011, 07:15 AM

[eluser]InsiteFX[/eluser]
You dont need code to check for IE see this link:

IE Conditional Statements

InsiteFX

07-27-2011, 07:47 AM

[eluser]John_Betong_002[/eluser]
[quote author="InsiteFX" date="1311790521"]You dont need code to check for IE see this link:

IE Conditional Statements

InsiteFX[/quote]

http://msdn.microsoft.com/en-us/library/...spx?ppud=4

We're sorry, but the page you requested could not be found. Please check your typing and try again, or use the search option on this page.
 
 
 
I have used the IE conditional statements and tested for different versions.

In a very short time the CSS file becomes very lengthy and bloated.

By including a PHP file and finding the user's browser, specific CSS script can be generated server side and sent to the browser.

This method makes it easier to add additional browser tests such as smart phones, ipads, etc. and keeps the CSS script at a minimum.
 
 