Designing Web Pages with Internet Explorer
In January 2011, according to the W3 Counter (A free real-time web stats and hit counter for websites and blogs, also including data relating to browser market share and operating system market) it was found that Internet Explorer had about 40% of the browser share on the internet.
Although Internet Explorer is no longer being used by the market majority, it is still being used by a very large share of people using the internet. It is therefore fair to say that this browser is still a necessity for designers to consider greatly when creating their web pages, if ignored or not thought out; designers will come across many problems due to across browser compatibility (i.e. the visual design /layout).
Internet explorer is becoming increasingly standards compliant and there are ways to develop and design pages that take IE’s quirks into account, ensuring a webpage looks the same in IE as it would in another browser such as Firefox or Google Chrome. The article below looks into designing web pages with IE.
Tags and CSS Styles Specific to IE
If you are going to write web pages that are specific to Internet Explorer, you should be aware of the tags and properties that are only supported by IE. At this time there are two:
- <bgsound>
- <comment></comment>
Internet Explorer also supports conditional comments. These are comments that can be used to show and hide different parts of your code depending upon the conditions in the comment.
And while Internet Explorer 8 doesn’t support CSS 3 very well, there are some CSS extensions that can help you improve your Internet Explorer web pages. These extensions add scrollbar colors, zoom functions, overflow and more.
Tips for Designing a Page for Internet Explorer
Designing pages for IE, especially less standard compliant versions like IE 7 and below, can be challenging. Especially if you want your page to look good in standards compliant browsers as well. The first thing you should be aware of is how IE 7 and earlier versions handle the CSS box model. In order to get those browsers to work with CSS boxes, you need to know how to force them to play nice.
Then, you should be aware that it is much easier to create a website for IE by designing the site for Firefox first. By designing for Firefox (or Chrome, Safari, or another standards compliant browser), you get the page looking how it should with standard HTML and CSS. Then you just have to add in small tweaks to get it to display correctly in IE.
Internet Explorer 8 has also added in a feature called compatibility view. This allows IE 8 and newer versions to render a page using IE 7 view modes or even IE 5 (quirks mode) view modes. You can force the view mode that IE uses with a meta tag as well.
Tips for Using IE
When you’re designing for Internet Explorer you need to be able to test with it. This means that you have to use the browser. But if it’s not your standard browser you may not know how to do important things like clear the cache or view the HTML source code.
Another thing you’ll notice is that you can only have one version of IE on Windows at any given time. While it would be nice to think that everyone downloads the most current version of the browser as soon as it comes out, this isn’t the case. And so unless you have the ability to run 3-5 different Windows machines, you need to be able to test in different versions of IE from the same computer. I have used BrowserCam a lot for testing, but another site that many people like is Browsershots.
HTML 5 and Internet Explorer 8 and Lower
One of the biggest frustrations that many designers have right now is that IE 8 and lower don’t support HTML 5. But there are ways to enable HTML 5 in IE 8 and lower. And if you’re looking into HTML 5 video, you can convert your video to FLV so that it will play on IE from the HTML 5 video tag.
The <comment> Element
The <comment> element is an HTML tag that is available only for Internet Explorer (versions 3 and up). This tag allows you to hide things from Internet Explorer.
In browsers other than Internet Explorer, the comment tag is ignored, and all items within it are parsed and displayed as usual.
You use the comment tag like you would any other tag:
<comment>This text is hidden from IE</comment>
It requires the closing tag.
Using Internet Explorer 6 and JavaScript you can read the number of characters in the <comment> with the comment.length property.
The <comment> element is not valid XHTML or HTML.
If you use the <comment> element, you are automatically creating invalid HTML. But as long as that doesn’t bother you, it’s a great way to hide aspects of your page from Internet Explorer users, while displaying them to users of other browsers.
More posts from our team
Five Star
Reviewed Marketing
"Would definitely recommend to a friend"
"I cannot recommend Dental Design highly enough"
"Really great company to deal with"
"Very professional, efficient & adaptive to new situations"
"I cannot recommend them highly enough"
"Has been invaluable and gone out of her way to help us"
"We love the look of our practice website. Very professional!"
"Dental Design stood out both in their knowledge of the industry and their professionalism"
"The team and package offered at dental design was unrivalled"
"absolutely fantastic and are always on hand to help"
"Dental Design are fantastic to work with"
"always met with a swift and professional response"
