Solved Multi-browsers Issue

Browser Issue:

     The top navigation for Mosaic and IT site has a problem with brower firefox and Safari. The image on left side of the top menu does not display properly. Like following image:

      

Solution:

   We traced and found a section of the following css using left side. On browser firefox and safari are not support.  Css directory: /Style Library/en-US/Core Styles/Band_ray.css

.topNav1Selected table td

{

                background-image:url(http://www.cnblogs.com/Images/bl_Tab_Selected_Left.gif);

                background-repeat:no-repeat;

                background-position:left bottom ;

}

 

We solved the steps as following:

 

1)      Rename “.topNav1Selected table td” to ”.topNav1Selected tbody tr td”

2)      Add a new css called “tabOtherBrowser.css” under the directory: /Style Library/en-US/Core Styles/

3)      Input  following code into it.

/* _lcid="1033" _version="12.0.4518"

    _LocalBinding */

 

.topNav1Selected tbody tr td

{

     background-image:url(http://www.cnblogs.com/Images/bl_Tab_Selected_Left.gif);

     background-repeat:no-repeat;

     background-position:left bottom ;

      

     float:left;

    left:5px;

    position:relative;    

}

.topNav1Selected tbody

{

 

background-image:url(http://www.cnblogs.com/Images/bl_Tab_Selected.gif);

background-position:right bottom;

background-repeat:repeat-x;

}

 

.topNav1Selected tbody tr{

     background-image:url(http://www.cnblogs.com/Images/bl_Tab_Selected_Left.gif);

     background-repeat:no-repeat;

     background-position:left bottom ;

    

     float:left;

     left:-5px;

     position:relative;

}

4)      Save this css file and check in .

5)      Edit the master page(BlueBandAMAXPurple.master) . input the following JS code into it.

     <script language="javascript">

     if(navigator.userAgent.indexOf("MSIE")<=0)/* judge current browser isn’t IE*/

     {

                     var head = document.getElementsByTagName('HEAD').item(0);

                    var style = document.createElement('link');

                    style.href = '/Style%20Library/en-US/Core%20Styles/ tabOtherBrowser.css';

                    style.rel = 'stylesheet';

                     style.type = 'text/css';

                     head.appendChild(style);                            

     }             

     </script>

Note: Above the code to judge current browser whether is IE? If no, the code will call “TabOtherBrowser.css”

 

6)      Check in and publish master page.