Float:left does not work in Firefox/Netscape

HTML, CSS tips and tricks #II

The code might be something like:

<div>
<div id="”left”"> test text left or image</div>
<div id="”right”">test text right</div>
</div>

and style with properties:

#left {width:30%; float:left;}
#right {float:right;}

everything is perfect and works as expected in Internet Explorer, then what’s wrong with Firefox/Netscape?
There’s nothing wrong, IE is acting Smarter, it actually calculates and considers the width for ‘right’ div to be 70% but Firefox or Netscape takes it to be 100% which I think is logically correct as if we don’t specify the width=100% that means we assume the browser considers it to be 100%, and the same thing is happening here in case of Firefox and Netscape.

Well, now do I need to tell the solution? Pretty simple, assign width preferable little less than 70% e.g. 68% and everything will work as you want in Firefox, Netscape as well as IE.

text-align:center works in IE but not in Firefox

HTML, CSS tips and tricks #I

When things work in IE as we expect, we presume that it’s perfect and should work in other browsers too. text-align:center; or text-align:right; properties for layout works well in Internet explorer as we want but it doesn’t work in mozilla-family of browsers, why?

Well there is nothing wrong with Firefox or Netscape but something with IE, read the property again, text-align must be for alignment of the text inside an element and not the alignment of that element itself, right? This is why Firefox/Netscape will not align the element but the text inside it, and that’s perfectly alright! But IE on the other hand uses this property to align elements as well as text inside them to specified location, which is logically wrong as far as the alignment of elements is concerned.

Well anyways it works in IE, but then what is solution for Firefox/netscape if you want to align elements in the center/right?
It’s very simple, use margin:auto; (all margins top, right, bottom, left would be adjusted automatically) or use margin-left:auto; and margin-right:auto; to align the element in the center and use only margin-left:auto; to align the element to right.
Isn’t that logically correct? It is! It works for IE too.

HTML, CSS and Cross Browser Issues

There are things that work in IE but not in other browsers and there are things that work perfectly in Firefox, Netscape but look weird in Internet Explorer. Sometime when we code/develop an application with very neat HTML and good CSS, we feel that it will work fine in all browsers but that’s always not the case, Internet Explorer renders the pages with its own rules while others do it with their own policies. Most of the time its a problem with IE and the development rule should be to design first for other browsers and then fix the issues in IE.

One such example is one of my past articles: Alt text for images and Browsers - Why some browsers does not display alt text?, it is on why firefox, netscape and mozzila-family of browsers doesn’t show ALT text in tooltip but IE does and what is a way around if you need to show the alternate text for images in tooltip for these browsers.

Hereafter I am going to write a small series on HTML, CSS tips and tricks that helped me and hope they will help you too to counteract the cross-browser compatibility problems.

December 3 - World Disability Day

Today, 3rd December, is a world disability day and I am happy that part of my work as a web usability professional, involves doing something good for physically challenged people and ie creating Accessible and Usable web application.
They have the equal rights to enjoy the life, and we can do lot many things for such people. On political front in India, if we can implement the cast-based reservation system then why can’t we implement reservation for these disabled people?