WebDesign & Such » Conditional Statements http://webdesignandsuch.com a Beantown Design Production Wed, 08 Sep 2010 02:29:53 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Internet Explorer Conditional Statements & Hacks http://webdesignandsuch.com/2009/07/internet-explorer-hacks-and-conditional-statements/ http://webdesignandsuch.com/2009/07/internet-explorer-hacks-and-conditional-statements/#comments Sat, 25 Jul 2009 21:02:28 +0000 ilz http://webdesignandsuch.com/?p=279 ie

As a website designer, one of the challenges we have is making websites that look and function the same in a variety of browsers. In a perfect world everybody would use the latest version of the same browser. Then we would only need to design websites for this one browser. Unfortunately this is not the case.

Perhaps people are scared of updating their browser, or don’t even know why they should. Newer browsers have better security, and support the latest technologies we use as website designers / developers.

One of the largest challenges is dealing with the Internet Explorer browser. This browser is one of the most commonly used browsers, but always seems to make problems. I’m not going to go into the different issues IE creates, I’ll assume you know. The point of this article is to show the different ways of targeting Internet Explorer browsers with your XHTML / CSS. There are many different techniques, I’m going to show the ones I use most commonly.

Conditional Statements

Import a CSS style sheet if the users browser is IE

<!--[if IE]>
<link rel=”stylesheet” href=”styles/ie.css” type=”text/css” />
<![endif]-->

Import a CSS style sheet if the users browser is IE6

<!--[if IE 6]>
<link rel=”stylesheet” href=”styles/ie6.css” type=”text/css” />
<![endif]-->

Import a CSS style sheet if the users browser is IE7

<!--[if IE 7]>
<link rel=”stylesheet” href=”styles/ie7.css” type=”text/css” />
<![endif]-->

Import a CSS style sheet if the users browser is a version of IE before 7

<!--[if lt IE 7]>
<link rel=”stylesheet” href=”styles/ie.css” type=”text/css” />
<![endif]-->

CSS Hacks

Target IE with your CSS ( use star * )

#column {margin-left:20px; *margin-left:10px}

Target IE6 with your CSS ( use underscore _ )

#column {margin-left:20px; _margin-left:10px}
]]> http://webdesignandsuch.com/2009/07/internet-explorer-hacks-and-conditional-statements/feed/ 0 Internet Explorer Conditional Statements & Hacks http://webdesignandsuch.com/2009/07/internet-explorer-hacks-and-conditional-statements-2/ http://webdesignandsuch.com/2009/07/internet-explorer-hacks-and-conditional-statements-2/#comments Sat, 25 Jul 2009 21:02:28 +0000 ilz http://webdesignandsuch.com/?p=279 ie

As a website designer, one of the challenges we have is making websites that look and function the same in a variety of browsers. In a perfect world everybody would use the latest version of the same browser. Then we would only need to design websites for this one browser. Unfortunately this is not the case.

Perhaps people are scared of updating their browser, or don’t even know why they should. Newer browsers have better security, and support the latest technologies we use as website designers / developers.

One of the largest challenges is dealing with the Internet Explorer browser. This browser is one of the most commonly used browsers, but always seems to make problems. I’m not going to go into the different issues IE creates, I’ll assume you know. The point of this article is to show the different ways of targeting Internet Explorer browsers with your XHTML / CSS. There are many different techniques, I’m going to show the ones I use most commonly.

Conditional Statements

Import a CSS style sheet if the users browser is IE

<!--[if IE]>
<link rel=”stylesheet” href=”styles/ie.css” type=”text/css” />
<![endif]-->

Import a CSS style sheet if the users browser is IE6

<!--[if IE 6]>
<link rel=”stylesheet” href=”styles/ie6.css” type=”text/css” />
<![endif]-->

Import a CSS style sheet if the users browser is IE7

<!--[if IE 7]>
<link rel=”stylesheet” href=”styles/ie7.css” type=”text/css” />
<![endif]-->

Import a CSS style sheet if the users browser is a version of IE before 7

<!--[if lt IE 7]>
<link rel=”stylesheet” href=”styles/ie.css” type=”text/css” />
<![endif]-->

CSS Hacks

Target IE with your CSS ( use star * )

#column {margin-left:20px; *margin-left:10px}

Target IE6 with your CSS ( use underscore _ )

#column {margin-left:20px; _margin-left:10px}
]]> http://webdesignandsuch.com/2009/07/internet-explorer-hacks-and-conditional-statements-2/feed/ 0