Angel's Affordable Web Design

Overlapping items are the result of bad, or improperly interpreted code. They typically occur from using browser specific code, or from using Site Builders or WYSIWYG software that does a poor job of creating compatible code.

When certain programs write code, they'll use code that is not standard, or which doesn't handle placement of elements well. The program which creates the code will show it in the way you wanted it to be, but when you view it in the Browser, the Browser interprets it in a different way. So when you are building the site, it looks fine in the software, but once you load it, it has problems online.

To further complicate the issue, sometimes the code will show up right in one browser, but not in another. This can happen for a variety of reasons, some of which are simple to repair, some which are not. And many sites which look great in Mozilla, will fail to display properly in IE, especially older versions.

When a program creates a container for each text block, requiring you to create a text box to put all text in, it usually causes problems. When the font type and size are not controlled in a way that works across all platforms, text can often overlap other text, or other objects on the page, because it can show up different sizes, or even with a different font, depending on the browser, the operating system, and the user preferences.

HTML Software that has the greatest problem with this is that which works most like desktop publishing software - it treats everything as an object. Now, this is not a condemnation of all of that type of software, just a warning that in general, the cheaper the software, the more of a problem it will be. Free web software that uses object oriented layout is the worst.

I recommend that if you use free software, you use the type that works more like a word processing program, instead of like a desktop publishing program. It works with text and elements a bit differently, and allows you the ability to view the code directly.

Always preview your site as well - Preview it in Internet Explorer and Mozilla. Those two will give you a good idea of whether the majority of your site visitors are seeing what you want them to see, in a way that looks good.

If it is not showing up right, then look for things like object sizes that need to be flexible width instead of set width, or positioning that needs to be relative (anchored to another object) instead of absolute (put in a specific spot on the page). Sometimes extra paragraph tags, or the absence of paragraph tags can mess things up. Sometimes the absence of a closing tag on an object or element can throw it all off.

One of the best pieces of advice I have heard about web design is that you don't have to get the design to look the same in all browsers. You just have to get it to WORK and not look BAD in them! And usually, if it works ok in Mozilla and IE, that is close enough to run with.