Creating browser friendly pages.

This weekend i was working on a PHP project and suddenly my designer came up with problem of his design working in IE and not working in Mozilla and safari. I was hanged with a title called browser expert, in many of the firms i used to work. Its was somtimes hard slog reading the lines of a designer, being a programmer heavily. Here are some of the issues my designer patrick faced.

Div doesn’t center in my Firefox, and it works fine in Internet Explorer!

I know where the problem did lie, looking at his code i found this line which was not reflecting in Internet Explorer.

heading { width = 320px; text-align = “center”; }

I changed the code into this heading{ width = 720px; margin: 0 auto; }

It worked like a charm! So what was the issue behind.The Fact is that, W3C does not recommend text-align tag to be used for text, so your entire DIV will not get aligned to center.

Rendering an item does not work

heading { width = 320px; margin: 0 auto; -moz-margin-top: 4px; // For Firefox  }

This will work in firefox and not in other browsers and to work in other browsers you have to use margin-top: 4px;

In IE 7, i have a hover problem with z-index being ignored.

This is a bug in IE 7 and the best to resolve is pretty simple, please look into the code below.

#menu, #header, #sidebar {
z-index: 1;
}

The below code will work. Magic isn’t!

#menu:hover, #header:hover, #sidebar:hover {
z-index: 2;
}

If you have problems in IE 6 with this code, just add display: block. Now placing the columns is easy enough.

I will be adding more in coming days, please do update me with comments, i will add more.

Popularity: 8% [?]