Archive for the ‘ Browser Quirks ’ Category

No “OPACITY” in IE8

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>
</ul>

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…
null

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;}
</style>
<![endif]–>


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 ….

“HIDE THE ROUGE SELECT BOX WHEN YOU SHOW THE POPUP

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


Conditional Comments : For your IEs Only -Part Duex

Tuesday, January 8th, 2008 By Nikhil

A few months earlier we saw , how we could include a piece of CSS that would be visible to IE6 only(For your IEs Only ). There are other ways to achieve this as well. Simply include a separate CSS, specific to your target IE. this could be achieved with what is called as Conditional Comments.

Conditional Comments is a way to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser specific. Browser detection can be done using many different techniques. This method has several advantages over earlier methods, that included style switching using javascript. To list important few, would be;

  • Scripting is not required
  • Cross-browser

How do we do this?

Do something in IE 5 only
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Do something in All IE versions
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Do something in All IE versions newer that IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

For more conditional vartiations , read this info on MSDN :
About Conditional Comment


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


IE 6 location.href Problems

Sunday, September 9th, 2007 By Nikhil

Have you noticed sometimes , how simple things just refuses to work in IE6 …location.href is just such a thing.

If you have added an onclick function to your anchor tag like below …

<a href=”javascript:void(0);” onclick=”onClickLink(‘xxx’);” > go to new location </a>

With some function like this…
function onclickLink(id){
var URI = “test2.html?id=”+id;
window.location.href = URI;
}

To your irony, you would notice that such a piece of simple script refuses to work in IE …  Well! I can discuss reasons here,  but not think it will be worthwhile … Though , I do seem to have a solution… ( I bet if you understand Javascript, you will understand , why we add this tweak for IE6)

The Solution

<a href=”javascript:void(0);” onclick=”onClickLink(‘xxx’);return false;” > go to new location </a>

If you any simple answers , please do write a comment. It will really be appretiated, I bet , by Many!


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


For your IEs Only

Saturday, September 8th, 2007 By Nikhil

If you have been writing CSS for  while, you would have experience those times when you literally pull your hair  when your CSS layouts looked fine in all the new browsers ( I mean browsers later than IE6) , but IE 6 throws a  tantrum. You struggle hard to adjust your CSS but it doesn’t work … Well! Try These  HACKs…

1. Underscore Hack :-
By definition, CSS 2.1 specification allows underscore (“_”) in CSS identifiers. But many browsers still seem to ignore any identifies proceeded with an underscore but IE. This IE’s bug/feature thus becomes a very clear way to set CSS properties for IEs only. so remember, A CSS property written with the underscore on the start is visible for Internet Explorer (all versions but IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

View demonstration of this underscore hack

Also, The min-height hack for IE6 uses the underscore hack, check out


2. Hash(#) Hack :-
Like the underscore hack, this one is too is for IEs oly, with a good difference, property identifiers preceded with # on the start is visible for All IE versions , IE7 included and is invisible for any other standard browser.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

This hack has been used nicely to demonstrate a cross browser vertical align solution, have a look at this article to find our more


3. CSS for IE6 only:-
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

These hacks seems heaven sent, when  nothing else works… If any of these hacks saves your life  someday,  dont forget to treat me to a coffee:)


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


Mouseover event in a transparent division in IE

Thursday, July 12th, 2007 By Nikhil

I had this problem  where , if you had a mouseover event on a division (DIV)  and that division , for some good reason had to be transparent(as In my case, where it was required to display some tags over an image on mouseover of this transparent division),  IE failed to trigger the mouseover event ( Worked fine in FireFox).

Tried several options … many of which was just a desperate attempt to get the event to fire in IE. One of the sensible ones, that I thought might work was to set a background color to the division and set the opacity to zero … Well! dint work!

The final solution which seemed  to work and not disturb the functionality I required was to put a one pixel  repeated/transparent background image in that division

… Silly! but now IE seems happy.


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


IE6 double margin bug in floated elements

Monday, June 11th, 2007 By Nikhil

Simple … To correct this problem use display:inline.

div {float:left;margin:40px;display:inline;}

If you have a floated element such as a div and you place margin-right or margin-left on that element, Internet Explorer 6.0 will double that margin value, messing up the html/css layout. To fix this simply add display:inline; to your floating element.


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