Due to my new job, I've been messing around with CSS a lot. CSS or Cascading Style Sheets
are actually quite fun to play around with. It does simplifies the job styling a website when put those stylings in 1 external file, making it easy to migrate from server to server.
However, one major problem I've encountered with CSS is that not all browsers with the CSS
styles that you use. Some styles might work, some won't.
So what do you do when you have that problem? One way is create a separate style sheet for this type of browser,
For myself I've created an Internet Explorer specific CSS and non-Internet Explorer (eg. Firefox, Chrome, Safari) CSS.
How you go about doing that?
simple, do something like this :
<!-- [if IE]>
< link rel="stylesheet" href="login-ie.css" type="text/css">< link rel="stylesheet" href="footer-ie.css" type="text/css">
< ![endif]-->
put it like so in between the <HEAD< and </HEAD> tags
<HEAD>
<!-- [if IE]>
< link rel="stylesheet" href="footer-ie.css" type="text/css">
< ![endif]-->
</HEAD>
for non IE browsers you could do this,
<!--[if !IE] ><!-->
<link rel="stylesheet" href="login.css" type="text/css" />
<link rel="stylesheet" href="footer.css" type="text/css">
<!--[endif]-->
same thing again put it between the <HEAD< and </HEAD> tags.
<HEAD>
<!--[if !IE] ><!-->
<link rel="stylesheet" href="login.css" type="text/css" />
<link rel="stylesheet" href="footer.css" type="text/css">
<!--[endif]-->
</HEAD>
Before you ask, there's no such thing as . <!--[ELSE]-->
yea.. I know it's sad. anyway I'd like thank the author of css-tricks.com sharing these tips as
well.
More info on it, please click the link below.
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
On another note, it took me great pains to make it work on Smarty Template turns out you need to use {literal} {/literal} to make it work and make sure you're changing the right .tpl file .
(Note: I've wasting a lot of time changing the .tpl and realising I've changed the wrong .tpl file and that's why I didn't see the changes I wanted)
if you're using conditional statements on Smarty Templates, you should be using it like this
{literal}
<!-- [if IE]>< link rel="stylesheet" href="{/literal}{$vir_lib}{literal}css/ie/login-ie.css" type="text/css">
< link rel="stylesheet" href="{/literal}{$vir_lib}{literal}css/ie/footer-ie.css" type="text/css">
< ![endif]-->
{literal}
Noticed that I've use {/literal} in front of {$vir_lib}. If I don't do that,
the css file will be loaded from $vir_lib/css/not-ie folder, which is actually
wrong and un-workable.
But applying {/literal} in front of {$vir_lib}, the css file will be properly
loaded from folder ($vir_lib is scripts folder), scripts/css/not-ie folder,
which is the correct location.
If you have any comments, please feel free to share them in the comments section.
