Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Is it possible to code for IE7 without hacks?

Yamcha

Yamcha

macrumors 68000
Original poster
Mar 6, 2008
1,879
343
Hi Guys,

Just about finished coding my portfolio, It's looking pretty pixel perfect on all browsers - Safari, Chrome, Firefox, Opera, Internet Explorer 8+.. The CSS and XHTML is W3C Valid with no errors..

But It's still broken on IE7, I've been Googling around and there are people saying that you can code for IE7 without the use of hacks..

Can anyone confirm if this is true? Should I even bother coding for IE7?

Appreciate your advice =D
 
It definitely depends on what code you're using. There are methods to do certain things without using 'hacks'. Hacks aren't so bad either, so don't be worried about using them.

Which areas of your code are not working proper in IE7?
 
A hack free way is to use conditional comments to add clases to your <html> that allow you to trigger any version of IE with CSS, for example putting your oppening <html> tag like this:

Code: 
<!--[if IE 7 ]><html class="ie7"> <![endif]-->
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
<!--[if IE 9 ]><html class="ie9"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->

Will render it with the appropriate class deepening on which browser is viewing the page, for instance if the user is using IE7, then the <html> tag he gets would be:

Code: 
<html class="ie7">

With this in place, you can now write CSS rules that target only IE7, for instance let's say you need to change the right margin of the navigation in IE7, you could write something like:

Code: 
.ie7 .nav { margin-right: 10px; }

And like so for any other element you need to adjust in IE7 or any other version of IE.
 
Last edited:
Evoken said:
A hack free way is to use conditional comments to add clases to your <html> that allow you to trigger any version of IE with CSS, for example putting your oppening <html> tag like this:

Code: 
<!--[if IE 7 ]><html class="ie7"> <![endif]-->
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
<!--[if IE 9 ]><html class="ie9"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->

Will render it with the appropriate class deepening on which browser is viewing the page, for instance if the user is using IE7, then the <html> tag he gets would be:

Code: 
<html class="ie7">

With this in place, you can now write CSS rules that target only IE7, for instance let's say you need to change the right margin of the navigation in IE7, you could write something like:

Code: 
.ie7 .nav { margin-right: 10px; }

And like so for any other element you need to adjust in IE7 or any other version of IE.
Click to expand...
Evoken speaks truth. Here is an article by paul irish on the subject matter. Read and enjoy.
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back