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);
}

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