IE Hack

As you know what looks good in Firefox may not look good in Internet Explorer. This is due to the way IE renders the box model in CSS. The W3c box model, which is used by all standards compliant browsers, calculates the width of an element different then IE….

Herein resides the problem. In Thesis there are going to be some pre-determined elements that aren’t going to line up correctly becuase their properties are going to be rendered differently according to the their respective box model values.

There is hope for all of you who still want to use IE. I’ve come accross a hack that seems to work, the only catch is that it is tedious and an overall pain in the a@#s!!

If your using IE 6 I’m not even going to waste my time or yours trying to make it compatible with todays browsers and CSS styles. IE 6 is 8 years old!! That’s a dinasour in today’s technology driven world. Do yourself a favor at the very least, upgrade to IE7.

IE 8 is brand new and about 3 years behind FF but from what I heard it has a developers tool sort of like what Firebug is to FF.

If you still want to use IE 7 well the hack will work but there isn’t anything to explore your site with, like Firebug, so all changes you want to make are going to be done with the naked eye as your ruler.  You’re going to have to inspect, guess, edit your file, upload your file, refresh. If the refresh doesn’t give you the desired effect, again you’re going to have to inspect, guess, edit your file, upload your file, refresh. If it got it closer this time but not close enough, you’re going to have to inspect, guess, edit………Get the picture?

Save yourself a heart attack and get Firefox with the Firebug extension now!

The IE Hack:

The first thing to do is open the custom_functions.php file and create a conditional statement that is going to reside in the head of your html document. Basically what this statement does is say that if the browser accessing the site is IE than apply the following CSS styles. All the other styles will still function normally it’s just adding new ones for the IE browser. Here’s the conditional statement:

<!–[if IE]>
<style type=”text/css”>
</style>
<![endif]–>

Next, place this conditional statement in a function. For this example I named the function “iestylesheet”…

function iestylesheet() {?>
<!–[if IE]>
<style type=”text/css”>
</style>
<![endif]–>
<?php
}

Next, add this function to the head of your html document with a hook…

add_action(’wp_head’, ‘iestylesheet’);

Now find out on your site what needs to be tweaked. If you’re just using IE, good luck. You’re going to have to view the source code, read through it, and see if you can find out what selector needs to be adjusted. I hear IE 8 has a developer’s tool that works kind of the same way as Firebug does. I’ve never seen it or used it so I can’t really say anything about it.

If you’re still wanting to use IE 7 I highly recommend you also install FireFox just for the simple reason that you can use Firebug in conjunction with IE to hunt down and pinpoint the selectors that need adjusting.  If you don’t want to waste hours trying to view the source code, what you’re going to have to do is use Firebug to find and pinpoint the selector that needs adjusting. Once you find the selector your going to place it in the newly created function in between the opening and closing <style> tags.

Say for example I wanted to move the search bar up a little bit because in IE it sits lower than it does in FF. It took me about 8 seconds to pinpoint the selector which was input, textarea. I now take this selector, add the .custom before it, and add it to the newly created function. I uploaded the custom_functions.php file to my server

function iestylesheet() {?>
<!--[if IE]>
<style type="text/css">
.custom input, textarea { your styles here ; }
</style>
<![endif]-->
<?php
}
add_action('wp_head', 'iestylesheet');

The same process can be used to fix any styling bugs you come accross. Just find the selector that needs adjusting and place it in the function between the opening and closing <style> tags.