Category: Web Development

10 Weird Bugs Of IE & How to Deal With Them

internet_explorer*Note: This is outdated for sure…

Here is a small list with some of the most weird and annoying IE bugs that you may almost every time come across.

As we look back to the older versions of IE, the problems seem to grow in number and although older versions of IE may seem like a part of the past now, there are still people out there trying to fight this big, fat, bullheaded bug called, Internet Explorer 6. So, here it is:

1. The “peekaboo” bug:

How to identify it: When parts of a div disappear and then somehow reappear when you scroll through the page or resizing the browser’s window.
Solution: zoom: 1; Add this property into the specific class or id. This is a property only seen by Internet Explorer without affecting any other browser at all.
Applies To: IE 6 , IE 7.

2. The “border” bug:

How to identify it: When the border is extending under a floated item and overflow property doesn’t seem to do anything about it.
Solution: zoom:1;
Applies To: IE 6.

3. The “layout” bug:

How to identify it: When an absolute positioned item is falling off its place ignoring the left or right properties.
Solution: Set the width property of the containing div to 100% or to a specific width.
Applies To: IE 6.

4. The “guillotine” bug:

How to identify it: When the bottom part of a floated element just disappears. Usually you may have 2 or 3 floated elements into a div.
Solution: Create a div at the end of the parent div with the class “clear” Then in the CSS file apply .clear {clear:both;}. Note that this bug has extremely many ways to appear and thus there is also a large number of ways to solve this. In some cases zoom:1; may do the job or declaring height:1%;.
Applies To: IE 6 , IE 7 .

5. The “double-margin” bug:

How to identify it: When using negative margin values and some extra space is created next to a floated item. It also happens when the margin is at the same direction of the float.
Solution: * HTML {display:inline;}. Create a style with this property into your code. This also applies only to the version 6 of Internet Explorer.
Applies To: IE 6.

6. The “broken box model” bug:

How to identify it: The total size of a div ( width + padding + border) is miscalculated. Actually only the width property is counted by IE.
Solution: Apply the padding into the elements of the block directly.
Applies To: IE 6.

7. The “minimum width and height” bug:

How to identify it: When min-height and min-width properties are ignored.
Solution: Apply: { min-height:150px; height:auto !important; height:150px;} to the specific element.
Applies To: IE 6.

8. The “unknown hover state” bug:

How to identify it: IE 6 doesn’t support the hover pseudoclass.
Solution: Apply Javascript or Jquery code in order to overcome this.
Applies To: IE 6.

9. The “wrong bottom” bug:

How to identify it: When you trying to vertically position an image at the bottom of the browser window but the image is getting stacked under the last paragraph instead.
Solution: html {height: 100%; }.
Applies To: IE 6.

10. The “Internet Explorer 6” bug:

How to identify it: When you set a link to display as block and the clicking is limited only to the text instead of the entire block.
Solution: .yourclass a {zoom:1;} or by setting a specific width for all the a tags.
Applies To: IE 6.

As you may have already understand, the zoom property actually fixes a lot of IE 6 bugs, so in cases that you may find yourself stuck without knowing how to fix an IE bug, just give it a try!

** Note: Personally I have stopped trying to fix things in IE 6. I mean, if you think about it, I already have a great number of bugs to deal with in IE 7 and 8 and maybe a couple in IE 9, so if I’m going to double the size of my HTML and CSS code just to fix things in IE 6 then I prefer not to.

Especially, if you bring HTML 5 into the picture then you have yourself some extra days of work to deal with some very, and I mean VERY, strange things that you couldn’t even know where to start in order to fix them (things can get really messed up). If on the other hand you strongly feel a strange urge to combine HTML 5 and IE 6, please let me know how it went (I mean it, pictures are welcomed too!).

Humans.txt – A File For Websites Made By Humans…

humans-txtSometimes people forget that websites are not something that just appears out of nowhere, nor are created automatically by some kind of robots…. There’s a lot of work that needs to be done every time and a number of people behind it that should take the credit for all this work.

This is why humans.txt was created! The idea came from a Spanish group of web developers: Juanjo Bernabeu, Maria Macias, Carlos Mańas,Abel Cabans and Abel Sutilo. These are the same people who decided to create the humanstxt.org website, in order to further promote the whole idea, the motto of which is “We Are People, Not Machines”.

What Is Humans.txt.

Like robots.txt, humans.txt is a simple text file, placed in the root folder of a website, that provides information about the site and the people that created it. The main difference from the robots.txt is that, humans.txt is designed exclusively for humans in contrast with the former which is meant to be used only by search-bots.

Why Use It?

Freelancers that are temporarily hired by companies in order to create a website, often have great difficulties in establishing their authorship. There are times when companies don’t want the names of those people, for whatever reason, to appear in the same website that THEY created (and this is not ethically right, at the very least…).

Even when you are the owner of a small company, consisting of 2 or 3 persons, why not to be able to present some information about each of those people separately? You could introduce the developer/s, the designer/s, SEO expert/s, or even those people that may had contributed with their ideas or played a particular role in the completion of a project (after all, they deserve to be thanked too!).

Finally, you could consider this as a way to give a more personal or more “human” dimension to your websites (your own and those made for others). Even big companies, such as Google, have their own humans.txt file!

How To Use It.

It is a very easy process really. Just open your notepad and write about your website, the people that are behind it or give thanks to all those people that contributed. You can do this in whatever way you like (after all, this is only simple text we are talking about, not some kind of code) and upload it to the root folder of your site.

In order for humans.txt to become a standard though, there are some guidelines that it would be good to be followed. Abel Cabans has created a great example for the humanstxt website:

/* TEAM */
Your title: Your name.
Site: email, link to a contact form, etc.
Twitter: your Twitter username.
Location: City, Country.
...

/* THANKS */
Name: name or url
...

/* SITE */
Last update: YYYY/MM/DD
Standards: HTML5, CSS3,..
Components: Modernizr, jQuery, etc.
Software: Software used for the development

The last thing you need to do, is to include this link into the <head> tag of the site:

<link rel="author" href="humans.txt" />

More Information.

To learn more about humans.txt, visit http://humanstxt.org/.
or you could download the Mozilla add-on: https://addons.mozilla.org/firefox/addon/humans-txt/