Cross Browser Web Design Tips
Every web designer understands the importance of cross browser web design. Basically, this is the act of making a web site look the same on each browser. If this sounds new to you then you are probably unaware that each web browser processes web sites in different manners. Only really affecting the visual elements of the site (the css sheet/styles).
Most designers will tell you that majority of the problems are with the infamous Internet Explorer (IE), primarily IE 6 and IE 7. Here are some quick tips to that tend fix most problems.
1. If using "float: left;" always use "display: inline;".
2. For some reason IE 6 double pads floats...so if using "float: left;" set the the padding-left and margin-left to "0px;".
3. Use jpegs instead of pngs. If you must use a png, try to make it work with a gif image. If you absolutely have to use a png (like with gradients and drop shadows) you can look into using a javascript ie 6 fix. Since barely 10% of the market share uses IE 6, I tend to use an "IE IF" statement to call upon a style sheet only designed for IE 6. This allows me to "simplify" the design. By doing this, IE 6 users will be able to enjoy a site that looks good and functions properly. Here is an if statement for IE.
< ! -- [if IE 6] >
Special instructions for IE 6 here
< ! [endif] -- >
4. Z-index issues causing overlapping of elements. Set the z-index to "-1000" for the bottom object and "1000" for the object that should be on top.
5. Background images not showing up in IE 7 and 6. I don't know the reason for this, but I have noticed that if, in CSS, I give the div that needs a background image a background color as well, it works.
Sample code; background: #ffffff url('myimage.jpg');
Still having issues?
Every now and then you run into a problem where the above solutions don't work. Using Vista and Windows 7, I am unable to use IE 6 to test and debug my sites, until recently when I stumbled upon a program called IE Tester. This is a free program and you can test in IE 5.5, 6, 7, and 8! This is a must have for web developers who are not running a Windows XP machine.
I also use Adobe Browser Lab which provides (rather fast) screen grabs from each browser (IE 6, 7, 8, Safari, and FireFox) from windows and mac computers.
I have been designing cross browser, css driven websites for a few years now and these tips have solved about 99% of my IE issues. If you are still having problems, comment this article with your question and I'll respond!
Have you found any helpful ways of testing and debugging web sites across multiple browsers? If so, comment this article and share with us. Together we can make the web beautiful!
