DebonStudio » web design

Dealing with IE6 CSS Bugs

Olivier — Wed, 27 May 2009 18:46:35 +0000

Although Internet Explorer 7 and the newly release Internet Explorer 8 have made progress in replacing the infamous Internet Explorer 6, there are still about 30% of users who still use it globally, and depending on your audience, that number could even be larger.

84% of DebonStudio.com visitors are using Internet Explorer, with roughly half of them being IE6. So 42% of the total visits are done using Internet Explorer 6. Compare this with the W3C School website, where almost 50% of visitors are using Firefox (IE6 users amount to only 15%).

A word about IE5.5 and earlier versions

I don’t worry too much anymore about IE5.5 and earlier versions. They are now representing such a tiny share of the browsers market that they can be safely ignored. But if you really, really, really want to accommodate these browsers, this page goes through the IE5.5 and earlier browsers bugs.

Ok, enough already, let’s get to it!

The Internet Explorer Conditional Comment

Until IE6 meets the same fate as its predecessors and fades away like a bad dream, you should go the extra mile and make sure your web pages are properly rendered in IE6.

Some of the IE6 css bug fixes listed in this article are straight forward, but for others some “hacks” are necessary to make IE6 behave. Depending on the amount of extra code needed, it is sometime easier to just create a separate style sheet and call it only when the page is viewed in IE6 using an Internet Explorer conditional comment.

As an example, the conditional comment below will load the ie-css-fixes.css style sheet only if the page is viewed in IE6 or an older version. (The “lte” meaning “less than or equal to”)

Doing so will ensure that non Internet Explorer browsers don’t unnecessary load the extra style sheet since they will ignore this code as a comment.

The Box Model Bug

This bug is responsible for a lot of gray hair in the web development community. It occurs when IE6 is in Quirks Mode, which happens when the html document doesn’t have a Doctype declaration or has an incomplete or erroneous one. The bug was corrected with the release of Internet Explorer 6. But if in Quirks Mode, Internet Explorer 6 falls back to the way earlier versions rendered html documents, thus applying the old box model. To prevent this from happening, simply don’t forget to put a valid Doctype declaration in all your web page. To verify that the page has a valid Doctype declaration, use the W3C Markup Validation Service.

Here’s an example of a Doctype declaration:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

What is the box model bug anyway?

When Microsoft implemented the box model for Internet Explorer 5/win, they decided that a div (box) “width” declaration should refer to the outer dimension of the entire div. That means the width of a div would include the standard width, any padding applied to it and also its borders. The visual result would be a much smaller div depending on the amount of padding and the size of the borders. Only fluid div were unaffected. All the workarounds and hacks have been about applying a different width depending on which browser was used.

Read this article for more details.

IE6 Doubled Float-Margin Bug

You probably encountered this weird bug if you have been using margins on your float elements. For example, you use a 10px left margin on a left float element inside a container, everything looks normal on all browsers except when you view your page in IE6, for some weird reason the 10px margin has become a 20px margin, resulting in a broken layout. Steve Clason discovered a quick and easy fix by simply adding a “display: inline;” on the float element. It makes IE6 behave properly and apply the margin without doubling its size. By the way this will fix also the Duplicate Characters Bug.

div.floated-element { display: inline; }

You can read this great article for a more detailed explanation.

IE6 Peekaboo Bug

This bug is triggered when you have a float next to some content inside a container. Upon loading the page in IE, the content is nowhere to be seen. If you scroll down the page or switch to another window and come back, this time it is there. No, it’s not magic, it’s IE6. To this day, I haven’t heard a coherent explanation for that behavior, but fortunately, there are a few fixes. An easy one is to give the container a zoom property of 1.

div.container { zoom: 1; }

But it won’t validate, so put it inside a IE Conditional Comment.

Search Engines Optimization Tips

Olivier — Wed, 15 Apr 2009 19:53:32 +0000

Because of the enormous competition from websites for user attention, it is vital to have the best exposure to attract your audience. Although there are over 3000 search engines, 95% of the business in the US comes from only 4 search engines (Google, Yahoo!, AOL & MSN). The search engine rating game is subtle and complicated. Each search engines has different rating criteria. (Criteria that are constantly changing.) Search engines check six principles when deciding how high to rate a site. Your ability to gain high ratings for your site depends on creating your site to rate well in those six criteria.

The six main search engine criteria are:

WEB PAGE TITLE

The title is extremely important. Located in your web page header, the purpose of your title tag is to clearly communicate the content of the page to the user. Since users most likely view your page out of context, you should try to provide context-rich titles.

Although it is tempting to stuff your titles with keywords for the purpose of having your page rank higher in search engines results, it is a mistake that will most likely backfire. Consider this title: “Bonsais – Bonsai Trees – Bonsais Specialist – Maple Tree – Bonsai Tree Sale”. This title doesn’t tell much about the page and it looks more like keywords stuffing than anything else. The author clearly tries to speak to search engines and not to users. Now consider this: “Buy Red Maple Bonsai Tree in Tallahassee, Florida”. In this case, aside from being more meaningful, It makes more sense to a user. Which is what matters because you want users who land on your website find what they are looking for, in this case, a red maple bonsai tree around the location of Tallahassee. Users on the internet don’t want to waste their time, and if they don’t find what they are looking for on your page, they will leave in frustration and never come back.

All your pages should have a unique title to help users differentiate them in their browser tabs and favorites. If you want to add your website name to each title, do it at the end of the title, preferably clearly separated by a – (hyphen) or | (pipe).

So if you decide to do only one thing to optimize your pages, it should be adding to each of them a meaningful title. That’s without a doubt the most important thing to optimize your website.

WEBSITE CONTENT TEXT

The first and last sentence of a web page hold a big attraction to many search engines. You should place a single sentence chocked full of key words as the introduction to each web page. The text within your page is also very important. Some search engines rate a page according to the percentages of a key word or words appearing in the text. This percentage varies from search engine to search engine. In doing so, try focusing on some keywords combination instead of single keywords. “Red Maple Bonsai Tree” will help your page rank better than “Bonsai Tree”. It is usually better to have many pages that treat part of a topic than a large page where tons of information is stuffed.

It is vital that your first page not be only graphics. Search engines read graphics poorly, or in most cases not at all. In addition, sites created using frames confuse many search engines. Often they will read the wrong frame on a page giving a low ranking to that page.

Good content means good ranking. I your page contains meaningful text and useful information for your visitors, it will be linked to more often from other websites – see incoming links below – which in turn will improve its ranking.

HIDDEN DESCRIPTION

Not visible on screen is a coded description of your site inside a “meta tag”. This is a single full sentence that describes your page that some search engines display in search results. It is important to carefully add one to each pages of your website because, aside of being displayed in search results, it can raise the density of some of your keywords for the search engines that take that into account.

HIDDEN KEY WORDS

Not visible on the screen is a list of key words associated with your site inside a “meta tag”. Some search engines will note more words in this coded section. The more words used, the lower some search engines will rate any single word. The trick is making sure specific pages on your site are densely clustered around single concepts requiring relatively few keywords to get across your message. You should devote your index page (home page) to communicating the big picture.

INCOMING LINKS

Search engines will rate you higher if many websites link toward your website. Although keep in mind that not all links are created equal. An incoming from a highly ranked website will have much more weight than a link from a poorly ranked website. It may actually penalize you to have incoming links from sites that are “link farms” or blacklisted by Search engines.

DOMAIN NAME

The letters that follow your www are highly regarded by some search engines. If you are not depending on advertising or promotion for most of your business, then consider embedding your product or service within your domain name. Those words most often used to find your site in a word search are the words you need to consider inside your domain name. But in doing so, try to keep it as simple as possible by not using more than 2 or 3 words and avoiding hyphens. The trick is to find something easy to remember and meaningful to both search engines and humans. Of course these days finding a good domain name that is available is difficult. You may want to consider spending a few more bucks and purchase an already registered domain. True, it will cost you more than the $8 you’d spend for an available domain, but this would be a one time cost, since the renewal would be dirt cheap in the future.

Other variables that matters in Search Engines ranking

How your pages are linked inside your website, how many levels there are to your site, whether your site is backend generated or static in nature, what the url page names are and many other variables influence a sites ability to get high rankings.

In the end, if you publish good content that people will want to read and you follow basic search engine optimization procedures, you should obtain a decent ranking in a matter of weeks.

Time to Ditch the GIF Format?

Olivier — Thu, 26 Mar 2009 21:06:41 +0000

Compared to the JPEG (Joint Photographic Experts Group) or PNG (Portable Network Graphics) formats, GIF (Graphics Interchange Format) is clearly behind technically, but web developers still use GIFs, mostly because virtually all browsers support it, making it a safe choice, and also because of its small file size.

Then, why ditch the GIF format? After all, it does what we need it to do, right? Well, simply put, it’s because PNG and JPEG are better, much better. It’s like using an old typewriter instead of a computer to put your thoughts on a piece of paper, it still does the job, but it doesn’t look as good.

So unless you want to create an animated image (which is possible only using GIF), you should use JPEG to create photographic images and PNG for all your other graphic needs.

Comparing GIF, JPEG and PNG formats

Some will argue that I make a big deal out of nothing and that using GIFs is perfectly fine. Actually, I still use GIFs sparingly here and there myself, when I need a basic solid color image for example. But I always compare with a PNG version first to check which is smaller, and when GIF wins, it’s always by a tiny margin.

Below are 3 examples of the same images using GIF, JPEG and PNG respectively. As you can see, they all look similar if not for the file size, but although the JPEG is the smallest, the quality is significantly poorer when you examine it closely.

JPEG - 6 KB

GIF - 14 KB

PNG - 11KB

Advantages and Drawbacks of the PNG Format

First of all, unless you want to make sure that your images are viewable by people who have not updated their browsers since 1997, you are safe to assume that all your website visitors will see them just fine. Then, since the file size of a PNG is almost always smaller than a GIF, you will have a page that loads faster. Not to mention the quality you can achieve with PNGs, since it’s a bitmapped image format that employs lossless data compression. Actually, the quality is even better than JPEG, especially if you use gradients. JPEG advantage is in its lossy compression that result in smaller photographic files, but at the cost of a loss in quality.

The PNG transparency drawback in IE6

That said, there are some drawbacks when it comes to PNG transparency in Internet Explorer, but the culprit is Microsoft, being the latest of the main browsers (as of IE7) to finally understand Alpha Transparency. For Internet Explorer 6, there are some turn-arounds to make it behave nicely and display PNG transparency properly using the MS proprietary alpha image loader filter. Ingo Chao wrote an excellent article describing ways to fix various IE6 bugs related to PNG transparency.

So don’t take my word for it, next time you create a design layout for a website, create both GIF and PNG versions of your graphical elements and compare their overall quality and size. I bet that in 99% of the cases, you’ll ditch the GIF!