Peter Taylour asked:
I am guessing an article on this subject has been posted prior to this one, I should hope a few have! However I hope this will provide a refreshing angle on the subject and branch to some other interesting bits of stuff.
I am sure that anyone who has taken even only a few steps into web development has come across the gigantic force that is Microsoft’s Internet Explorer. Even for the most experienced coders, the most popular browser of this age has always been a prominent foot across the path of our websites technological progression and the possibilities of which the internet is yet to yield. Maybe not crushing ideas, but certainly making it a lot harder to bring these ideas from paper to browser.
However, although IE, wielding its scathing weapon the Microsoft corp. and therefore for-fronting the battle as the windows default has dominated the market; we have weapons which allow us the fight back! I think I’ll cut the metaphors here and get back to business… Well, how can we fight back? And more importantly, what can be done to keep our designs looking slick in the interim… Yeah before the proper browsers take over!
I’ll start with the fighting back. Personally my favourite method would be to utilize a conditional comment and tell people what they should be doing! Something like this…
Sorry in advanced that all the code used in the article has had to be altered so that articlesbase wouldn’t filter it out
If you pretend that there is an open triangle bracket infront of each bit then you’re okay! eg h1> /h1>
!–[if IE]>
h1>strong>Internet Explorer is Sh**e! Get a proper browser like a>Firefox/a> before I come round and make you!!!/strong>/h1>
![endif]–>
Realistically I wouldn’t try this method though, probably not the most tactful way when it gets down to it. You could however place a banner showing your support of these less buggy browsers such as firefox. This websites great for this promoting firefox business, very nice banners right here: http://www.spreadfirefox.com/?q=affiliates/homepage
Conditionals are pretty clever little buggers though, for general use they can become quite useful. And you’re not just limited to !–[if IE]>. The comments understand other operators as well; you’ve got the NOT operator which is an ‘!’. So “if not IE” would be !—-[if !IE]>. In addition to this there are “greater than” = ‘gt’, “greater than or equal to” = ‘gte’, “less then” = ‘lt’ and “less than or equal to” = ‘lte’. These can be used when referring to browser versions, so !—-[if lte IE 5.0]> could be used to warn users about a feature unavailable to them when browsing your site with IE version 5.0 and below.
But we are not here to help out the Internet explorer users; we’re here to convert them! Doing your bit locally can make all the difference. If you are round at a friends and he/she happens to log on to the internet using IE (boooooo), make it your concern that the very first thing that is done is the downloading of firefox (sorry Opera etc I’m a bit biased to the mighty fox.) Of course if the loging on to the internet part does not occur in the general flow of things it must also be your concern to make sure it does!… “Umm, you mind if I check the train times?” Okay I’m getting a bit carried away here, although very important to the advancement of the human race, you need not devote your life to spreading firefox.
The great progression in the internet and its uses over the last few years has meant that the look and the feel of a site has come under a lot more scrutiny, especially with ever rising amounts of traffic as more and more people connect to the internet. Complicated uses of graphics and CSS mean that when it come to interpretation by different browsers, everything can go wrong. The Browser that is renowned for taking perfect code and screwing with the end results is of course Internet explorer. It is so tempting just to say ***** it and ignore the IE users and their browser, but with over 58% still using a version of IE this really isn’t plausible solution.
So okay we’ve got to fix the problem. Where to start?
Well firstly it is a must to make sure your code is valid. Just from an incorrectly written Doctype or wrongly phrased line of css can through internet explorer into all sorts of funny modes where anything can happen. Make sure you get a green light here http://validator.w3.org/ and here http://htmlhelp.com/tools/csscheck/ .
Good stuff, that’s one step in the right direction if anything. Now if the problem still exists, what now?
Most of IE’s rendering blips are caused by bugs, which can be worked around with quick alterations or what are called hacks. Chances are your problem has been experienced by people before you and a fix has been fabricated already.
So what’s going wrong? I will list a few of the most common bugs, some which I myself have experienced and a link to some relevant articles explaining in depth the fixes.
• My borders have gone crazy! – fix… http://www.positioniseverything.net/explorer/border-chaos.html
• Margins doubled, pushing my content down and generally mucking stuff up – fix… http://www.positioniseverything.net/explorer/doubled-margin.html
• Contents there one minute gone the next, the peekaboo bug – fix… http://www.positioniseverything.net/explorer/peekaboo.html
You may have noticed that all those fixes above are at one website. Basically “Big John” and co of Position is Everything .net have done a fantastic job among some other geniuses out there, so why don’t I just give you guys a link to his site, the chances are you’ll be able to find a fix there… http://www.positioniseverything.net/explorer.html
You’ve now with a bit of time and effort (it ***** doesn’t it, and it really is unnecessary effort!) probably been able to fixed up your site. But what if something still purists, what can you do!? Well here is what I do…
Firstly if you know something which could be causing the inconsistencies in your site when rendered by different browsers, try just experimenting with this particular element of the code. Say the content part of your page is being pushed below your side navigation and you recon that IE is playing with your margin values but it’s not the double margin bug. Just adjusting the values of margins can bring results. This is a good time to introduce an excellent piece of free software called CssVista. If you know css well it can also be an excellent tool when in depth analysing your code when looking for problems. Check it out here http://litmusapp.com/cssvista/
If you can still find no joy using this experimentation method I’m afraid the best hope is now to do what I really find annoying especially since if browser bugs didn’t exist it probably wouldn’t be necessary. We’re going to have to start again. Now don’t panic we’re not going to redesign your site from scratch, we’re going to make a mock up page of your current design, testing for rendering problems all the way.
Okay, well your average website nowadays is divs inside divs inside divs. So first step is to create you’re outermost div and in your css give it all the position you want and a background-color so that you can see it. Now add the divs that are contained with-in this one and do the same thing, giving them all nice bright colours so you know exactly where they are. Now test it like crazy, anything going wrong so far? Basically keep going like this, until something starts to look weird, then think why it doing this? What have I just done to make it go weird? Google and other free recourses can be come very useful now. Yahoo answers is fantastic for everything so it is always worth a try at http://answers.yahoo.com.
That’s about it really; Give that a try and well, good luck!
So, we’ve had a quick look at how to rid the world of Internet Explorer and how to get by in the time being. I’m not a fan of Microsoft attempt at an internet browser but not really in the league of this guy http://toastytech.com/evil/index.html .
Basically guys have fun and make sure you’re not supporting the IE domination by using it!
Pete Taylour is co-owner of the fast growing ebook site http://www.liquidebooks.com the only place to go for your cheap and free ebooks. With strong interests in a huge amount of different music styles Pete and friend are soon to embark on some crazy mix submission site for upcoming DJs across the globe, be sure to keep your eyes peeled for that and make sure you check out Liquid Ebooks at http://www.liquidebooks.com
Gordon
I am guessing an article on this subject has been posted prior to this one, I should hope a few have! However I hope this will provide a refreshing angle on the subject and branch to some other interesting bits of stuff.
I am sure that anyone who has taken even only a few steps into web development has come across the gigantic force that is Microsoft’s Internet Explorer. Even for the most experienced coders, the most popular browser of this age has always been a prominent foot across the path of our websites technological progression and the possibilities of which the internet is yet to yield. Maybe not crushing ideas, but certainly making it a lot harder to bring these ideas from paper to browser.
However, although IE, wielding its scathing weapon the Microsoft corp. and therefore for-fronting the battle as the windows default has dominated the market; we have weapons which allow us the fight back! I think I’ll cut the metaphors here and get back to business… Well, how can we fight back? And more importantly, what can be done to keep our designs looking slick in the interim… Yeah before the proper browsers take over!
I’ll start with the fighting back. Personally my favourite method would be to utilize a conditional comment and tell people what they should be doing! Something like this…
Sorry in advanced that all the code used in the article has had to be altered so that articlesbase wouldn’t filter it out
If you pretend that there is an open triangle bracket infront of each bit then you’re okay! eg h1> /h1>!–[if IE]>
h1>strong>Internet Explorer is Sh**e! Get a proper browser like a>Firefox/a> before I come round and make you!!!/strong>/h1>
![endif]–>
Realistically I wouldn’t try this method though, probably not the most tactful way when it gets down to it. You could however place a banner showing your support of these less buggy browsers such as firefox. This websites great for this promoting firefox business, very nice banners right here: http://www.spreadfirefox.com/?q=affiliates/homepage
Conditionals are pretty clever little buggers though, for general use they can become quite useful. And you’re not just limited to !–[if IE]>. The comments understand other operators as well; you’ve got the NOT operator which is an ‘!’. So “if not IE” would be !—-[if !IE]>. In addition to this there are “greater than” = ‘gt’, “greater than or equal to” = ‘gte’, “less then” = ‘lt’ and “less than or equal to” = ‘lte’. These can be used when referring to browser versions, so !—-[if lte IE 5.0]> could be used to warn users about a feature unavailable to them when browsing your site with IE version 5.0 and below.
But we are not here to help out the Internet explorer users; we’re here to convert them! Doing your bit locally can make all the difference. If you are round at a friends and he/she happens to log on to the internet using IE (boooooo), make it your concern that the very first thing that is done is the downloading of firefox (sorry Opera etc I’m a bit biased to the mighty fox.) Of course if the loging on to the internet part does not occur in the general flow of things it must also be your concern to make sure it does!… “Umm, you mind if I check the train times?” Okay I’m getting a bit carried away here, although very important to the advancement of the human race, you need not devote your life to spreading firefox.
The great progression in the internet and its uses over the last few years has meant that the look and the feel of a site has come under a lot more scrutiny, especially with ever rising amounts of traffic as more and more people connect to the internet. Complicated uses of graphics and CSS mean that when it come to interpretation by different browsers, everything can go wrong. The Browser that is renowned for taking perfect code and screwing with the end results is of course Internet explorer. It is so tempting just to say ***** it and ignore the IE users and their browser, but with over 58% still using a version of IE this really isn’t plausible solution.
So okay we’ve got to fix the problem. Where to start?
Well firstly it is a must to make sure your code is valid. Just from an incorrectly written Doctype or wrongly phrased line of css can through internet explorer into all sorts of funny modes where anything can happen. Make sure you get a green light here http://validator.w3.org/ and here http://htmlhelp.com/tools/csscheck/ .
Good stuff, that’s one step in the right direction if anything. Now if the problem still exists, what now?
Most of IE’s rendering blips are caused by bugs, which can be worked around with quick alterations or what are called hacks. Chances are your problem has been experienced by people before you and a fix has been fabricated already.
So what’s going wrong? I will list a few of the most common bugs, some which I myself have experienced and a link to some relevant articles explaining in depth the fixes.
• My borders have gone crazy! – fix… http://www.positioniseverything.net/explorer/border-chaos.html
• Margins doubled, pushing my content down and generally mucking stuff up – fix… http://www.positioniseverything.net/explorer/doubled-margin.html
• Contents there one minute gone the next, the peekaboo bug – fix… http://www.positioniseverything.net/explorer/peekaboo.html
You may have noticed that all those fixes above are at one website. Basically “Big John” and co of Position is Everything .net have done a fantastic job among some other geniuses out there, so why don’t I just give you guys a link to his site, the chances are you’ll be able to find a fix there… http://www.positioniseverything.net/explorer.html
You’ve now with a bit of time and effort (it ***** doesn’t it, and it really is unnecessary effort!) probably been able to fixed up your site. But what if something still purists, what can you do!? Well here is what I do…
Firstly if you know something which could be causing the inconsistencies in your site when rendered by different browsers, try just experimenting with this particular element of the code. Say the content part of your page is being pushed below your side navigation and you recon that IE is playing with your margin values but it’s not the double margin bug. Just adjusting the values of margins can bring results. This is a good time to introduce an excellent piece of free software called CssVista. If you know css well it can also be an excellent tool when in depth analysing your code when looking for problems. Check it out here http://litmusapp.com/cssvista/
If you can still find no joy using this experimentation method I’m afraid the best hope is now to do what I really find annoying especially since if browser bugs didn’t exist it probably wouldn’t be necessary. We’re going to have to start again. Now don’t panic we’re not going to redesign your site from scratch, we’re going to make a mock up page of your current design, testing for rendering problems all the way.
Okay, well your average website nowadays is divs inside divs inside divs. So first step is to create you’re outermost div and in your css give it all the position you want and a background-color so that you can see it. Now add the divs that are contained with-in this one and do the same thing, giving them all nice bright colours so you know exactly where they are. Now test it like crazy, anything going wrong so far? Basically keep going like this, until something starts to look weird, then think why it doing this? What have I just done to make it go weird? Google and other free recourses can be come very useful now. Yahoo answers is fantastic for everything so it is always worth a try at http://answers.yahoo.com.
That’s about it really; Give that a try and well, good luck!
So, we’ve had a quick look at how to rid the world of Internet Explorer and how to get by in the time being. I’m not a fan of Microsoft attempt at an internet browser but not really in the league of this guy http://toastytech.com/evil/index.html .
Basically guys have fun and make sure you’re not supporting the IE domination by using it!
Pete Taylour is co-owner of the fast growing ebook site http://www.liquidebooks.com the only place to go for your cheap and free ebooks. With strong interests in a huge amount of different music styles Pete and friend are soon to embark on some crazy mix submission site for upcoming DJs across the globe, be sure to keep your eyes peeled for that and make sure you check out Liquid Ebooks at http://www.liquidebooks.com
Gordon
