Category: Hacks

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!).

December 9, 2014

CSS Hacks & Modern Browsers

*Note: Possibly outdated but i kinda miss those days…

That One Browser That Always Gives You Trouble.

How many times you found yourself trying to understand why, among all the modern browsers in the world, there must always be one that just doesn’t get it right! I know, I know… things can’t always be perfect and you’ve probably started thinking about Internet Explorer until now, but that’s not always the case.

CSS-hacksCSS HacksThere are times when, even modern browsers seem to have their differences about how to treat a CSS property. It is a very rare thing, but still, happens! This time may be Opera; next time could be Chrome or Firefox, this one browser that just, will not seem to care about that margin property of yours.
So, how are you going to fix this? You have, somehow, to be able to target each and every one of those browsers alone. Well, the solution to your problems is known as “CSS Hacks”. Of course, in this world there is always a catch, so let’s take it from the top.

Targeting & Filtering.

The logic of CSS hacks is based on two different ways of processing. You can either “target” a specific browser, in order to apply the change only to that, or “filter” a group of browsers, in order to apply the change to them, leaving one specific browser out.

The following examples are only a small part of the existent hacks and not all of them are validated as CSS.

1. Target Firefox Only.

/*Target all versions of Firefox*/
@-moz-document url-prefix(){.yourclass{ yourproperty:value; }}
/*Target all versions of Firefox & Gecko*/
*>.yourclass { yourproperty:value;}
/*Target Firefox 1.5 and newer*/
.youclass, x:-moz-any-link, x:only-child { yourproperty:value; }

2. Target Chrome & Safari.

/*Target webkit browsers - All versions of Chrome & Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0) {.yourclass{ yourproperty:value; }}
/*or*/
html:lang(en)>body .yourclass{ yourproperty:value; }

3. Target Opera Only.

/*Target Opera 10 and newer*/
@media not all and (-webkit-min-device-pixel-ratio:0) { .yourclass{ yourproperty:value; }}
/*or*/
noindex:-o-prefocus, #yourid { yourproperty:value; }
/*Target Opera 9 and older*/
html:first-child #yourid { yourproperty:value; }

Although the older versions of Internet Explorer don’t fall into the “modern browser” category, here are some well-known ways to target those old versions.

4. Target IE 5.5, 6 Or 7

/*Target several IE versions*/
#yourid
{
*property: value; /*IE 7*/
_property: value; /*IE 6*/
property/: value; /*IE 5.5*/
}

Proceed With Caution!

Unfortunately, even if all of the above “solutions” work as expected today, there is no assurance on how they will behave in the future. In general, try to avoid the usage of similar hacks, as they are based in constantly updating standards.
For example, here is a hack that was meant to work only with Safari 3 and Chrome:

body:nth-of-type(1) .yourclass{ yourproperty:value; }

This is now valid for all modern browsers… nice!

So, every time you are about to hack your way through your CSS code, you must make sure that you’ve already checked for every possible, valid solution. Think it over and try not to mess things up by adding more complicated or “unstable” code into your style sheet.

In case you can’t avoid them, at least try to minify the hacks needed, by targeting as fewer browsers as possible. Finally, always remember that it is safer to hack an older/dead browser than a modern/live one!

December 9, 2014