Browser Compatibility Issues – Part III

This issue is a JSON issue.

We had lots of JSON objects in the page and things were all working fine on Firefox and IE9 until we started testing JSON objects on IE7 and we kept having the following error “JSON undefined”

After some research, I found that there’s no native support for JSON in IE7, for this reason, one should use json2.js created by Douglas

Here’s another forum for this.

Off course another main point that’s worth noting in constructing your JSON objects would be, getting rid of all the trailing commas that are extra at the end of JSON last element in the array. This does matter in IE but doesn’t in other browsers.

Advertisements

IE7 Opacity Filter with JQuery methods

So I have an undisplayed div that has an opacity applied to it which is triggered by a Jquery method to be fadeIn with a certain event. This doesn’t work with IE7.

Code:

<script type="text/javascript">
$(function(){
     $('#fade').fadeIn();                   // does NOT work on IE7 with filter Opacity
});
</script>
<div id="fade" style="position:absolute; z-index:20; top:0; left:0; background-color:#000; opacity:0.7; filter:alpha(opacity=70); zoom:1;"></div> 

For this reason, fadeIn() is not the solution here. Here’s the right code:

  $('#fade').fadeTo("slow", 0.7);

Browser Compatibility Issues – Part II

So next to discussing the HTML/XHTML and CSS major issues when it comes to cross-browser testing, comes a third one which is as important especially when making your pages more interactive, the JavaScript. 

This part is not meant to discuss all the JavaScript issues cross-browser, yet just useful tips to tackle those issues. 

If one is interested on knowing which browser is supporting what version of JavaScript, here’s a list that I came across in my research: http://ejohn.org/blog/versions-of-javascript/

The reason I thought of this post is what I’ve been seeing as mishandling of some browsers to my legacy javascript and what I proposed to my colleagues to do. Where I work, there’s a big deal of working with legacy JavaScript, though I have been doing most of the DOM changes in JQuery now. 

Problem: 

The users would go to our site on an IPad, IE9 and Safari on a Windows machine, click submit of their order. If their connection is slow (by any chance) and especially those using IPad since they might not be on a wifi at the time, they click submit again, and again and again.. 

Those four times of submission will actually cause 4 submissions on the backend whereas on a normal machine, the submission times aren’t affected as long as the page is loading.

Partial Solution:

Some suggested to use this.disabled on the anchor of the submit. This solved the problem on IE9 but not on IPad and Safaris. 

Solution: 

I suggested using JQuery because of its compatibility on different browsers since you don’t have to deal with what browser using what version of Javascript. 

Not only, one should consider using JQuery or any of the other reliable JavaScript libraries for their fancy animations, ease of writing, good documentation and provided methods. But one should also consider that they do play a big role in cross-browser functionality. 

Notes: 

JQuery Browser Compatibility

Browser Compatibility Basics – Part I

With all the browsers we have today and the ones which are emerging as I am writing this post, it seems to me that the job of UI developers could be counted more than “it’s just HTML” cause it seriously can turn into nightmare at times.

Understanding the browser engines are as important when it comes to HTML/XHMTL as well as CSS and its IE hacksand the different box model which IE renders from all other browsers.

This being said, however one would still have to add some exceptions especially with those large websites where it is irrational to add IE CSS hack for every class property which is being added.

For this reason, well renowned large websites still resort to creating IE CSS files, or within the same CSS file add a different class for the body which will make all the elements inheriting from it behave similarly.

Here’s the way it’s being added:

<!–[if lte IE 6]><body class="news ie"><![endif]–>
<!–[if IE 7]><body class="news ie7″><![endif]–>
<!–[if IE 8]><body class="news ie8″><![endif]–>
<!–[if !IE]>–><body class="news"><!–<![endif]–>

Albeit, one should know that most of the IE browser issues could be solved by using a reset CSS (CSS Tools: Reset CSS and CSS Tip #1: Resetting Your Styles with CSS Reset) before starting including other CSS files. The reset is advised to be included in a separate CSS file and a good read on that would be here: Killer Collection of CSS Resets. Though some would disagree with that making mention that default browser CSS actually make sense and was made for a purpose and rather designers should use well crafted CSSs to address different browser issues. Here a good read for such an argument: Should You Reset Your CSS?

Browser issues are many anyways and they are the main limitation for our restraint at least where I work for going on HTML5. There are countless of articles on this..

IE7 Absolute Positioning

So I think there should be a dedicated blog for all the IE7 ‘misconduct’. I work with a company that puts emphasis on cross-browser compatibility starting with IE7.

Now lots of issues are there with IE7. One of them is the absolute positioned div within a relative position div. The child div often flies outside of its container.

Reason: (at least as I assume:) is that it is not knowing where to be placed even though absolutely positioned within the container.

Solution: child div which is absolutely positioned has to have both positioning properties of (left or right) and (top or bottom)

Example:

   <div style="position:relative;border:1px solid #000;">
       <div style="position:absolute;bottom:10px;"> submit button </div>
   </div>

Image

As you can see the submit button is flying outside of the container itself

Example resolved: 

    <div> style="position:relative;border:1px solid #000;">
        <div style="position:absolute;bottom:10px;right:10px;> submit button </div>
    </div>

Image

Managing Your Quickconnect in Filezilla

So, I had some ftp connections in my quickconnect which I wanted to remove as in Filezilla there’s NO easy way to remove those from the UI itself. One has to access the recentservers.xml file and remove the section related to those ftp connections from there.

Unfortunately most of the sites show the location of the xml file in newer operating systems.

Here’s where I found it on Windows XP, since most of the companies are still using Windows XP

C:\Documents and Settings\%username%\Application Data\FileZilla

Remove the section pertaining to connection you want to remove, i.e.

<Server>
    <Host>unwanted server connection</Host>
    <Port>21</Port>
    <Protocol>0</Protocol>
    <Type>0</Type>
    <User>John</User>
    <Pass>mypassword</Pass>
    <Logontype>1</Logontype>
    <TimezoneOffset>0</TimezoneOffset>
    <PasvMode>MODE_DEFAULT</PasvMode>
    <MaximumMultipleConnections>0</MaximumMultipleConnections>
    <EncodingType>Auto</EncodingType>
    <BypassProxy>0</BypassProxy>
</Server>

This should do it!

Let me know if there’s any issue with that