When I first started tweaking blog layouts I would spend ages getting everything perfect only to receive an email telling me my site wasn’t working correctly in Internet Explorer. Of course I was too naive to realize that Explorer would display any different to Firefox, my browser of Choice. Not only did my sites look different in Explorer…. They looked different in different versions of Internet Explorer!
I ignored it for a while and occasional tried to tweak my css to make the sites work ok in all browsers rather than perfect in each one but eventually I hit a point where I needed things to work perfectly across the board.
This subject has been written about many times but I am going to show you how I deal with the IE (Internet Explorer) problem and hopefully help you to do the same on your blog or website.
Luckily for us there is a way to add a <div> tag to a website and enclose it in some code that will make it only visible to versions of IE. These are known as Conditional Comments.
Note: A little familiarity with html and css may help with this tutorial.
Here are the steps to add the conditional comments to a wordpress blog.
1. Open your Header.php file and find the <body> tag. Just below the <body> tag add these lines of code:
<!--[if IE 6]> <div id="IE6Style"> <![endif]--> <!--[if IE 7]> <div id="IE7Style"> <![endif]--> <!--[if IE 8]> <div id="IE8Style"> <![endif]-->
2. Open your Footer.php file and find the </body> tag. Just above the </body> tag add these lines of code:
<!--[if IE 6]> </div> <![endif]--> <!--[if IE 7]> </div> <![endif]--> <!--[if IE 8]> </div> <![endif]-->
Now you have added 3 styles (IE6Style, IE7Style and IE8Style) that can be called using CSS to override styles in IE browsers.
So now we have the code in place to allow separate styles for IE I’ll show you how they can be put to use.
Adding this simple code to the html in this post:
<div class="example_box"> </div>
And styling using CSS creates this box below:
To style the box I opened the style.css file and added this css code to the end.
.example_box {
height: 100px;
width: 100px;
background: green;
}
Note: You may notice that I specified a “class”. In CSS code you use a “.” to call the class. If I had specified an “ID” rather than a class I would have started the css with “#example_box”. An ID is generally used for an object that is used once on a page and a class is used for an object that will be used more than once.
Now we have a simple styled box and have our conditional comments in place we can start changing the css code to change specific styles for IE6, 7 and 8. This comes in use when IE is displaying certain parts if your blog differently to Firefox and Safari.
So now i’ll add a new box and if I add this to the bottom of my “css” code
.example_box1 {
height: 100px;
width: 100px;
background: green;
}
#IE6Style .example_box1 {
height: 150px;
width: 150px;
background: red;
}
#IE7Style .example_box1 {
height: 200px;
width: 200px;
background: yellow;
}
#IE8Style .example_box1 {
height: 250px;
width: 250px;
background: blue;
}
The box will display differently in each version of IE thus allowing us to fix any browser specific problems.
The image below shows how the box will now display in each browser.
This may seem complex at first but once you start to implement it into your sites you will be amazed how quickly you can fix issues.
Any questions or clarification needed just leave a comment.
Thanks,
Forest.
Related posts:
- Making A Fancy Mailing List Signup Box
- Add a Custom Favicon to Your Site…
- Moving Your Wordpress Blog To A New Domain Name, The Ins and Outs…
- SEO Tips for Bloggers: Brilliant Blog Linking Strategy Part 1
- Technorati For Your Blog
Thanks for this – I think it will come in very handy for me. I’m going to bookmark it for future reference.
(I actually mean that I’m not a “great post, bookmarked!” comment spammer
Ha ha!! Thanks Anna…. I never would have thought it was spam anyway
If you have any trouble just email me… It was a little harder to explain than I meant it to be!
Thanks for the tips. I don’t know if my site looks different in the versions of IE but I will use this script just in case.
No probs… let me know if you run into problems.
Hopefully mine will work fine in Internet explorer without problems, but we all know how IE is, especially new releases with all the bugs. Nice Post
Yeah it is a pain!! I much prefer Firefox, and Chrome.
this one is a very cool trick to avoid look and feel problem of our blog. indeed very helpful for me.
Thanks
Great article! It was helpful to read it!
Nice information and nice to see you friend. I will come to your blog more often. Blogging Center.
Visit My Blog too friends.
Your blog isn’t working!!
Yeah it is a pain!! I much prefer Firefox, and Chrome.
Thanks for this one dude. I usually have my coders do that for me but anyway its always good to know it myself rather than keep bothering my friends on coding that properly for me…
No problem…. Just contact me if you have any issues with it… if you ever try to do it.
I don’t know if my site looks different in the versions of IE but I will use this script just in case.
Thanks
Its priceless to read this post. Very nice and informative and useful. But i thinks that a large number of people using FF.
Thanks, yes a large amount are but you may have to cater for everyone.
it doesn’t work for me on IE8 it still the same only header of my page appear..and got ‘!’ message on the bottom
do i need to add this on my html?
Hey GameSMS,
Show me links and more info about your problem and I may be able to help you out.
doesnt valid XHTML markup solve all this?
Hey Shane,
As far as I am aware Microsoft have chosen to repeatedly ignore valid xhtml with all their versions of IE…. However IE8 is a hell of a lot better!
In the end after hours of tweaking my blog i give up. It’s impossible to make a site to look the same in IE and in Mozilla. I messing up with my code until the only option is to backup all site.
Hey, let me know if it’s any specific problems and I may be able to help or point you in the right direction… often they will never be 100% the same.
Thanks guys, I have experienced this problem
Let me know if you have any problems fixing it.
I wish it was so easy every time. I used cms navigation plugin – it was okay in FF, opera, safari, even IE 8.0 and IE 7.0 but it just didn’t work on ie6. It even run differently on various servers. I asked on 10+ forums and there was no answer. Only rewriting code to js helped…
Let me know if you have any problems.
Sorry I meant that comment for “Mobile Phone Price”…
So you managed to fix the plugin for IE6 too? What kind of fixes did the js require…. Personally I am pretty crappy at JS!!!
Hopefully we will be rid of ie6 soon, Microsoft is starting to stop support so hopefully no longer than a year before it’s gone forever
very helpful! but I better use firefox to avoid hassles right?
Hopefully soon less and less people will be using IE (especially IE6) so this hassle should lessen.
unfortunately forest I think the majority of people still use IE, be it 6, 7 or 8 which is a real shame for developers because they render sites so differently that it’s a real pain. Long live Firefox!!
Luckily IE 8 seems to be rendering much more similarly to Firefox and Chrome so most of the issues have gone…. Also Microsoft have made the update to IE8 part of the windows upgrade process so if people want to update windows they have to update IE.
Still I do wish Microsoft would just be HTML Complient!