IE and Unwanted WhiteSpace
There is an issue with Internet Explorer adding white space when it isn’t really wanted (at least in my opinion). I haven’t noticed the problem with Firefox. The situation occurs when a line break exists in the html, but other than that there are no spaces or other elements that “should” display on the page in the browser. For example, let’s say I have several images that I want to appear side by side on the page and have no space between them, as when slicing images. My code might look like the following:
<img src="images/logo_left.gif" />
<img src="images/logo_right.gif" />
which would result in:
I think you see what I mean by unwanted space. One fix is to make sure there is no whitespace (carriage return, line feed, or space) between the image tags in the html, which is simple but can make for sloppy code and would look like this:
<img src="images/logo_left.gif" /><img src="images/logo_right.gif" />
It doesn’t look all that bad here, but if you have a lot of images, or a lot of parameters to include with your image (noborder, height, width, etc), it can make the underlying html pretty sloppy. But, you can get the layout you want:
However, I prefer a simple CSS solution. In my stylesheet, I add the following class:
.imageNowrap {
white-space:nowrap;
display:block;
float:left;
}
I can then add this class to each of my images (except the last image in the row), like so:
<img src="images/logo_left.gif" class="imageNowrap" />
<img src="images/logo_right.gif" />
and again get the desired result, this time with cleaner, more readable html. If your images span several rows, then something like this will work (remember to keep the <br /> on the same line of html as the last image on the row):
<!--// ROW 1 //-->
<img src="images/logo_top_left.gif" class="imageNowrap" />
<img src="images/logo_top_right.gif" /><br />
<!--// ROW 2 //-->
<img src="images/logo_low_left.gif" class="imageNowrap" />
<img src="images/logo_low_right.gif" /><br />
I am sure there are other solutions, so I would be happy to hear them.
UPDATE: 13 Feb 2008
I had a visitor contact me stating that he had used this solution with success on one page of his site, but the solution failed to work on another page. After reviewing his source, I noticed something critical that I thought I would pass on here. The page that was not working did not have a DocType specified. For this solution to work, be sure that the first line of HTML includes the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
September 13th, 2008 at 9:53 am
Thanks. I successfully used this to prevent unwanted vertical white space between multiple inputs in IE6:
(HTML 4.01. Using style rather than class for simplicity in this illustration. span with space before included purely because that’s what my HTML had and I haven’t checked whether the same problem arose without it.)