CSS behaviour on IE & Other Browsers

In this post , i want to emphasize how exactly the css behave on IE and Other browsers like firefox , google chrome , opera etc.

I would like to share my personal experience and challenges which i have faced during working on different different browser for an application.
here are the some challenges in key points:

1.Display box in IE & other browser

For IE:-

#box{ display:inline; border: solid 1px; }

For Other browser:-
#box {
display: inline-block;
border: solid 1px;

2.Anchor tag (hyperlink) visited issue

Html code :

tesing hyperlink

a:link {
color: #A5ACB0;
/* visited link */
a:visited {
color: #00ADEF;
/* selected or active link */
a:active {
color: #A5ACB0;
/* Hover link */
a:hover {
color: #00338E;

Test IE
Test ALL

For IE Broswer:-
After clicking on TestIE link , it will show a:visited color but when you go to other page and come back to the same page where you have TestIE link , the color of hyperlink will as a:link .
Logically , it should be a:visited color because you have visited the link.
This logic won’t work on IE 6,7,8 and other latest IE versions but work perfectly fine on any other browsers.

But After clicking on TestALL link on any browser, it shows visited color .


Image onmouseout , onmouseover and onclick

Requirement:- A web page should contain an image say top arrow image.
When user visit to a page , top arrow image should be in disable form (say in grey color) , when user hover over the image , it should get activated and turns to other color (say in green) and when user clicks on that image , it should turns to other color (say blue).

images:- top_arrow_disable.jpg , top_arrow_active.jpg and top_arrow_visited.jpg

1st Solution:-

<script type=”text/javascript”>
function checkHidden(id,checkVal){
var hiddenVal = document.getElementById(‘check’).value;
//alert(‘Link is already clicked:Onclick takes precedence’);
//alert(‘on mouse over’);
else if(checkVal==’out’){
//alert(‘on mouse out’);
else if(checkVal==’clicked’){
//alert(‘just clicked’);

<a  href=”#top” onclick=”checkHidden(‘a1′,’clicked’);” onMouseOver=”checkHidden(‘a1′,’over’);” onMouseOut=”checkHidden(‘a1′,’out’);”>
<img id=”a1″ src=”images/up_arrow1.gif” name=”anandf” width=”16″ height=”16″ border=”0″>

2nd solution:-

 <script type=”text/JavaScript”>
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

<a href=”#top” onMouseOut=”MM_swapImage(‘Top’,”,’../images/up_arrow3.gif’,1)” onMouseOver=”MM_swapImage(‘Image1′,”,’../images/up_arrow2.gif’,1)”><img src=”../images/up_arrow1.gif” name=”Image1″ width=”16″ height=”16″ border=”0″></a>