Posts Tagged ‘ IE Issues ’

CSS ZOOM – Yet Another IE quirk; The 3 pixel shift

Saturday, November 7th, 2009 By Nikhil

Time and over again, When all the other browsers seen to behave as told by the w3c rules , IE spirals you out of the development spirit by throwing a tantrum,  that doesn’t seem to have a fix . Just such a one is this issue in IE7.

Problem Statement:
I  and  so might many of the other  serious web developers have  noticed more than many a times , that when there nested floats in the layout, on hover over some links ( anchor tags) , the containing container seems to shift a few pixels to the right.   I have tried to google solutions for this issue , but have  hardly found any reasonable answer to why and when it occurs ( that might help to prevent this issue from happening)  , hence  I  have never found a clear solution to the problem either…

Possible Solution :
Out of experience , I have notice 90% percent of the times  i.e. ,  that this issue is fixed by adding a zoom property in the CSS definition of the mis-behaving container …

#somediv {
      zoom: 1 ;

again the reasons are ambiguous … try this …
Some elements in IE have a “hasLayout” property , which is “true” by default. Many visual CSS behaviors ; for example, an alpha filter only works on an element that hasLayout. and the {Zoom:1} seems to give the target elements the hasLayout property…. USeful? I dont think so…

The zoom property is also seems to supported by Chrome , but  its use  dint seem to make much adverse effect on my layout… try it, If it works for you … if it doesn’t,  bookmark this page under “CSS craps”

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

SevenUp! Encourage the world to get rid of IE6!

Sunday, March 22nd, 2009 By Nikhil

Google starts a movement prompt people to dump IE6 … By bugging IE6 users with a POPUP on page load… may be not a very good idea … but being a UI developer , I have to join this band wagon … one less browser for me worry about … Sorry selfish it is! but I have include this javascript … ( TRY THIS PAGE IN IE6) …
Hey ! and on the brighter note … See it is a display of the POWER of JAVASCRIPT …. it can even bring down a giant (or once it was )

SO … Help rid the world of IE6 with one line of javascript!

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Mis-behaving IE8 : CSS Layout breakages (Targeting a browser version using Meta Tags in IE8)

Wednesday, December 17th, 2008 By Nikhil

If you are css person, you would know the pain in getting your layouts working cross-browser. IE8 is yet another spanner in the works for us developers. Anywaz! if you hit upon this issue, Like I did yesterday, where your perfectly working CSS in IE7 (and earlier) and  Firefox  has suddenly started throwing tantrums in IE8 , TRY This … It nicely seemed to fix my problems for the moment ….

Using Meta declaration, we can specify the rendering engine we would like IE8 to use. So to force IE8 to render as IE7 … Insert the following Meta Tag into the head of your document:-

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

By default IE Meta would be:-

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />
which would make IE8 render the page using the new standards mode.

If required, this syntax could be used to accomodate for other browsers as below:

<meta http-equiv=”X-UA-Compatible” content=”IE=8;FF=3;OtherUA=4″ />


IF you are yet unfamiliar with the sort of animal called “Doctype” … here is some quick read
Setting the DOCTYPE in XSL

For a more in depth understanding about DOCTYPES , try visiting these links…
A List Apart : Fix Your Site With the Right DOCTYPE!
A List Apart : Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

Note: Though many of us HTML/CSS people have been neglecting the importance of DOCTYPE decleration in our documents , Setting the right DOCTYPE , is usually the answer to most cross browser issues.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

NOT For IE Only – CSS Child Selectors don’t work in IE

Friday, October 10th, 2008 By Nikhil

CSS for Non-IE Browsers : Its no news to CSS developers that , CSS Child Selectors like the example below, doesnt seem to work in IE. 

e.g. div > span { some css } , that means “when a span element is a child ( and NOT  a grandchild or great grand child etc.) of a division element” .

But we used this CON to our advantage. Historically, the child selector has been used to hide CSS commands from IE. Simply by placing html>body in front of any CSS command IE will ignore it:

html>body .foo {CSS commands go here;}

This works because <body> is always a child of <html> – it can of course never be a grandchild or great-grandchild of <html>.

Now that IE7 understands the child selector, you have to insert an empty comment tag in directly after the greater than sign. IE7 will then not understand this selector (who knows why!?) and will therefore totally ignore this CSS command:

html>/**/body .foo {CSS commands go here;}

If haven’t already seen these before, have a read through the following as well

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Disappearing HTML/DIV elements in Internet Explorer [IE]

Saturday, October 4th, 2008 By Nikhil

As usual, one of the many some strange problems with IE and this one must ranks in TOP 10 of IE Quirks.

PROBLEM STATEMENT (This was my problem, maybe you have similar misbehaviors):
I have many DIV’s in the page with class “sectionhead” , which is nothing but title of a section on the page. So I have some style looking like this

.sectionhead{font-size:18px; background:#cfcfcf; padding:5px;}

The div is a light grey bar with some black text. What happens in IE is some of these section headers are displayed ok, but some are invisible, UNTIL, you scroll the page or click something on the page etc. Sometime they tend to disappear when you click the ‘alt’ key when you page down or scroll with the scroll bar. They sometimes seem to reappear when you reload (f5) the page. I short a perfectly simple DIV with some simple style behaves BAD.
What could cause such an erratic behavior? Well! Frankly, NO IDEA!!!

Again don’t ask me why, but in many instances this problem tends to vanish when you add position:relative to the mis behaving elements style, like this

.sectionhead{font-size:18px; background:#cfcfcf; padding:5px; position:relative }

Weird but what to say? God Bless me from IE!


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

IE 8 strict mode and CSS opacity… Work Around

Tuesday, July 15th, 2008 By Nikhil

Oh Well! In the earlier post a few days back regarding Opacity in IE8 ,I forgot to mention an important point that “IE 8 strict mode doesn’t allow for CSS opacity“.
For those who donot understand what I mean by strict mode , here is quick tutorial.

A work around to this (Before IE dev team realise that they have paved way for re-work routines all over the world, for web-sites using Pop-up lightboxes with some opacity, and put back support for OPACITY) is to use a semi transparent image …preferably in PNG format (I have had bad experience getting transparent GIF images to work as they were supposed to). Create a PNG image of the color and percentage of transparency you like , in you favourite image editor and use it as a background image for your lightbox overlay.

Instead of something like this

background-color: #ffffff;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

Do this….

background:url(bkg.png) repeat;


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Sunday, July 6th, 2008 By Nikhil

If you are viewing this page in IE8 , then  you must be seeing a full opaque white background behind this post. Yesterday , my collegue pointed this out to me (As I am one of those people  who adapt to changes slowly and steadily… especially browsers. Might say, Im a coward, but so be it …. Being a UI developer, I’m always shit scared of new browser versions … you know what Im tlaking about, right?)

Digged around for while, trying to find a solution to fix it and then what …
This time our ALL TIME FAVOURITE browser  has done it all over again by dropping all support for CSS opacity. The non-standard `filter: alpha(opacity=##)` CSS attribute has been removed , Nice ,  but they also totally forgot to add CSS3 opacity support (like how all the other browser’s nicely have kept it in).  So, for the first time since GOD told us about CSS opacity ( since IE 5.0 , I guess)   , a web browser won’t support CSS opacity.
And now for the cream on top: Official word from IE 8 team? It’s “by design” and “we will consider this in a future version of IE”.

PS: Try this page in FF, swear it looks neat!


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

White Space Bug in Line/List Items(li) in IE6

Friday, June 20th, 2008 By Nikhil

If you  have ever made ( or making one) a Vertical Menu using list items( li) tags and CSS, you  might encounter, this yet another bug in Internet Explorer, where IE 6 inserts these gaps between list items that contain block level elements, i.e. if there is any whitespace between the list items in the markup.  Thanks, but no thanks , the IE version 7  seems free from this bug.
If like me , and many more, you  belong to this  band of frustrated developers , who still have to get their new layouts , working in IE6 too, then this might prove useful . Have a look…

Sample markup:

<ul id=”menu”>
<li ><a href=”#”>Home</a></li>
<li ><a href=”#”>About</a></li>
<li ><a href=”#”>Services</a></li>
<li ><a href=”#”>Portfolio</a></li>
<li ><a href=”#”>FAQ</a></li>
<li ><a href=”#”>Contact Us</a></li>

You might create some CSS , similar to one below, to transfrom the above  markup into a vertical menu ….

Sample CSS…
#menu {
margin: 0;padding: 0;background: #FF9900;
list-style-type: none;width: 150px;
#menu li {margin: 0;padding: 0;}
#menu  a {display: block;
color: #555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;

The results you will see…

Solution for this bug…(modified/added CSS in bold italics)

#menu {
   margin: 0;padding: 0;background: #FF9900;list-style-type: none;width: 150px;
  float: left; /* this contains floated list items */
#menu li {
    margin: 0;padding: 0;
   float: left;      /* This fixes the */
   width: 100%;  /*  whitespace bug in IE6 */
#menu a {
   display: block; color: #555555;
   text-decoration: none;
   padding: 0 15px;
   line-height: 2.5; border-bottom:1px solid #FFF;

If the above solution doesnot seem to work (for reasons known to IE6 only)… try this method instead

Just add this additional IE6 only styles to your markup …

<!–[if lt IE 7>
<style type=”text/css”>
#menu li a {display:inline-block;}
#menu li a {display:block;}

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

CSS Cross Browser Minimum Height Hack

Saturday, April 12th, 2008 By Nikhil

Post IE 6 , MSIE has been kind enough to us UI developers by adding a few more CSS properties standard to most other standard browsers. One such usefull property in “min-height”.  Pretty straight forward property that needs no long winded explanation. When a min-height for a division is set, it always retains that set height when the content it houses occupies less than it can hold and importantly ( unlike the plain vanilla “height” property ) scales or in CSS words, it behaves like a division whose “height” is set to “auto”…

For some of us poor developers, who still are required to code CSS that must also work in IE6, un-availability of the “min-height” , could prove a show stopper sometime… Donot despair.  

Fortunately, we have enough quirks in IE , that we would use to out advantage and hack our way through to reach our goal…i.e. make a DIVISION division as though its min-height in IE6

Solution 1 : Using the Underscore Hack [ …Read more]

.box1 {
min-height: 200px;

HTML : - 
<div class="box1">Some dynamic content with variable height ...</div>

 Solution 2: Using the CSS Attribute Selector Hack

.box2 {
div[class] .box2 {

<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>

 The CSS Attribute Selector Hack takes advantage of the fact the browsers earlier tha IE6 ignored an atribute-selector. Note the requirement of another container division with class=”someclass” . Just the presense of the class attribute for this division, overrides the height back to auto for Opera, Mozilla and MSIE7 and later. IE6, which doesn’t support atribute selectors, ignores it.

View Demo of the min-height hack for IE6

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Irritating Select Boxes Visible Through the Popup Divisions

Saturday, March 15th, 2008 By Nikhil

At several occasions, while doing  page layouts with popup divisions/ lightboxes/ Tips etc  we come across situations where  some Form SELECT  objects happens to be under these POPUP Divisions , by design and it shows through…. YUK!!!

Well! you could easily FIX this by adjusting your Z-INDEX values appropriately for FF and IE7 . But Good Old ( pun intended) IE6  doesn’t  behave as intended…. The SELECT BOX show through , even after you apply some drastically high  Z-INDEX values to your PopUp Division… Bummer!!!!

There are NO FIXES for this problem , but there are , I believe,  more than a few way to work-around this problem , But Im here to tell you the simplest solution that I use, which works fine for me, in most of the cases ….


Simply in your script snippet where you show your popup, add a piece of script to set the visibility of the SELECT Box to “Hidden”

document.getElementById(‘my_select’).style.visibilty = “hidden”;

And remember to set it back on CLOSE of your PopUp Division

document.getElementById(‘my_select’).style.visibilty = “visible”;

where “my_select” is the ID of the irritation SELECT Box

Hope this helps…

PS. There are ofcourse other options like dynamically positionining an IFRAME ( same size as you PopUp) under the Popup DIV … This works well too , but with an addition of loads of DOM Elements, SCRIPTS and Headache . I have used this solution too, and  If you do need any help with this option, do let me know. Will be glad to help!

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter