If you have any experience with web design at all, you know that things don’t function the same across browsers. For example, you could design a site that worked fine in Internet Explorer, all of the
text aligned properly, all of the images fitting together…open the page in Netscape, mass chaos ensues…
There are a couple of browser quirks I’d like to talk about, just from my personal experience, and try to alleviate them for YOU in the future.
Tables With Background Images
One of the most annoying things I encounter when designing is trying to coordinate table backgrounds between IE and Netscape. The root of this problem is Netscape’s interpretation of nested tables
and their backgrounds.
Example: You have a table with a background image and you want to nest another table with no background within the original table. What happens?
IE – The nested table is interpreted as having a transparent background so you can see the original table bg without any problems.
Netscape – Mass chaos. The nested table inherits the original table’s background. So you see the original table’s background, overlapped by the nested table’s inherited background.
Frustrating huh?
Luckily, there’s a quick and easy fix for this problem. Simply open up Fireworks, or whatever your favorite image editor may be and create a 1 x 1 file. Leave the 1 x 1 dot white, and export it as a transparent GIF with white being the transparency.
Essentially, you’re creating a transparent background for all of your nested tables. The transparency allows you to see the original table’s background in IE and Netscape.
Form Fields
Example: You have a very small space you’d like to put a form field text input, for a signup, etc…The form field has to fit into a very specific number of pixels to maintain the look of your page? What to do?
This is a tricky one. Both IE and Netscape interpret the widths of form fields correctly, the problem lies in the font that each respective browser uses for it’s default form field text. If you compare the form field text, you’ll notice that IE uses a narrow font for it’s text, while Netscape used a more wide Serifed font.
Now this doesn’t pose any particular problem until you’re using very strict calculations for table widths and such. You’re going to find that your site will look fine in IE, and not so hot in Netscape.
Even more frustration…
The solution to this problem is as simple as it seems. Design for the lowest common denominator. If it works in IE and doesn’t in Netscape, design it to work in Netscape. Simple.
I’ll take a closer look at some more browser oddities next week!
Murdok provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.
