HTML Tip:
Eliminate The Mystery Spaces

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Even when it's carefully written and documented, HTML code can be hard to read. Webmasters are often tempted to break the code into sections so that each tag stands on its own line. That makes the code much easier to read, but often causes unexpected display problems in Internet Explorer.

The Carriage Returns More Than You Expect

Consider this snippet of HTML code:

"Hard to read" isn't really an adequate description! This second example is much easier to follow:

It's pretty clear in the second example that the effect you want is to display three images pressed together directly above a DIV tag that's been styled using a CSS class. According to HTML specifications, the images should appear directly above the DIV tag with no vertical spacing between the elements.

That's exactly what happens in both Netscape 7 and Explorer 6 when they display the first example snipped of unformatted code:

But when we use the code from the second example, we see the extra space that Explorer places between the images and the DIV. The culprit is the line break between the last image and the opening DIV tag:

The only way to remove the space is to place the opening DIV tag on the same line as the final image:

Then the extra space disappears! That's because you've removed the so-called "hard return" or "carriage return" placed between them. You place a carriage return inside your HTML code when you create a new line using the ENTER key on the keyboard.

Other Affected Page Elements

An extra carriage return can cause lots of problems with images because you often want an image to appear with no extra spacing around it. Think of all the extra hours you could spend adjusting spacing, margins, and padding with CSS only to discover that the problem was a line break!

Other instances where you need to be alert to this problem include:

The frustrating thing is that it doesn't happen with all HTML tags: just closing tags and just with some HTML elements! Because the spaces are not a coding error, HTML validators ignore them. This is a browser display problem, not a coding error.

It's a problem that's been around about as long as HTML and graphical browsers.

Find And Fix Browser Display Problems

In fact, our first newsletter editor, Tom Dahm, noticed this problem and warned subscribers about it in one of our very first newsletter articles: Beware Of The Carriage Return. He noted that extra carriage returns cause display problems in Netscape 4.02 and Explorer 4.0.

Things have a bit changed since then.

In a mixed blessing, Netscape fixed the problem in subsequent versions. Netscape browser versions 6.x and 7.x ignore extra carriage returns and display pages like you expect. So do Opera versions 6.x and 7.x. Both browsers try to adhere rigorously to HTML and XHTML standards.

Unfortunately, the bug is still a problem in Explorer. Even Explorer 6 still pops little spaces in where you least expect it!

That's just one example of browser display problems that can give you fits! Technically, there's nothing wrong with your code when you place some extra carriage returns for increased readability. The difference is in how browsers interpret your code.

Unless you have a professional-quality testing lab in your office, you may never realize there's a problem until a client or customer finds it for you. That's what makes NetMechanic's Browser Photo such a helpful tool for all webmasters - from beginners to experts. Browser Photo shows you actual screen shots of your Web page in 16 different browser and operating system combinations.

Use it to take the initiative. Find and fix display problems before your visitors notice them. Browser Photo is easy-to-use, Web-based, and affordable! It's the best present you can give your Web site this year.