Fidelus | Fidelus.in

At MyShaadi.in we provide our users with a feature to upload photos in their wedding site.

However our users have been complaining about not being able to upload photos when using Internet Explorer, though the

same image could be uploaded successfully when using Firefox or Chrome . . any non-IE browser for that matter …

Solution

We check for file type when a user uploads an image .. to ensure only valid image types are uploaded.

In case of non – ie browsers .. for jpeg image file type is “image/jpeg” or “image/jpg” .. for png .. “image/png” ..

However as usual IE decided to not go by the usual way .. and instead of the returning the usual  .. returns

“image/pjpeg” and “image/x-png” .. and thats where the culprit was … added these two to the list of valid image

types and things started working again ..

Below is the code we use to check valid image types ..

function isValidImage($img_type) {
// allowed image types ..
$allowed_img_types = array("JPG","gif","jpg","jpeg","bmp","tif","png","image/jpeg","image/gif",
"image/bmp","image/jpg","image/png","image/x-png","image/pjpeg");
return in_array($img_type, $allowed_img_types);
}

We usually have the believe that rendering the UI on client side is faster than rendering it on the server. But this might not be true in all situations.

I do accept that the scenario am about to explain is not going to be a very common one, but am sure it would still be wise to keep it in mind before actually starting to code.

Let me give you a background of the problem we were asked to solve recently.

Technologies: JavaScript, JSP, Servlet, SOAP

Browser: IE 7  ( had to use it, dont as why )

OS: Windows XP

We had to show 14000 check boxes in a page ( told you not a very common scenario but trust me we had to show all these in one page ) .. and the way it was being done till now was that the comma separated string received from a web service was being used to create these check boxes on the client side using JavaScript.

The UI was initially tested with dummy data of around 20 check boxes and things seemed to work perfectly fine until we tested it with real data and boom the browser hung for minutes and that’s what were supposed to solve, bring down the rendering time.

In contrast to the usual belief that rendering the UI on the client side is faster. In this case it made more sense to render it on the server itself and pass it to the browser. The result was rendering time came down to seconds.

The reason being the javascript engines today are not capable of handling so much data in one shot. IE 6 is a single thread based browser and the thread gets occupied in rendering the check boxes,  resulting in making the browser non responsive.

I know this is not a very common scenario still we learnt it the hard way. I had to port the entire JavaScript code to server, meaning lot of rework.

The requirement here is pretty straight forward …

We got a fixed size web page which we have to display at the center of the window …

What we would ideally do is create a container element and using CSS try to place it at the center of the page ..

This it what it would look like ..

#container{

width: 980px;

margin: 0 auto;

}

The second command, margin: 0 auto, basically gives our containing element an automatic margin on the left and right, thereby positioning the containing element in the centre of the browser window.

Now for the weird part .. this doesnt seem to work in IE ( the usual menace creater i suppose) ..

and as usual this time there was nothing wrong in our code ..

The correct way of centrally aligning content through CSS doesn’t actually work in IE.

We will need to do it slightly differently this time for it to work in IE .. and ya rest of the browsers too

body {

text-align: center;

}

#container{

width: 980px;

margin: 0 auto;

text-align: left;

}

This will then centrally align the container in IE too. To prevent the text from centrally aligning too, we insert text-align: left into the container div.

Ever have trouble getting your Internet Explorer-specific Web applications to work with Mozilla? This article covers common issues associated with migrating applications to the open source Mozilla-based browser. You’ll first learn basic cross-browser development techniques, and then develop strategies for overcoming the differences between Mozilla and Internet Explorer.

Click on the link below to read the article

SRC: IBM Developer Works

Another interesting link:

7 JavaScript Differences Between Firefox & IE