Whitespace Collapsing

[snakeyes37]

Hi,


I seem to be having a problem with my website, when viewed in Internet Explorer, there seems to be extra spacing between the links, the header, and the footer. However, when viewed in Firefox, Safari, it looks fine, I'm thinking this might have something to do with white-space collapsing, but I'm not quite sure how to fix it. Maybe somebody here could give me possible solutions on how to solve this problem?

http://webwizardz.50webs.com/layout2.html


Thanks.

[jscheuer1]

If you use a strict DOCTYPE it is just as messed up in FF. Anyways, keeping your current DOCTYPE, I found that you could just add in a few line breaks using the <br> tag and it looked good in both IE and FF. This is all on the PC, as I have no Mac and equally cannot tell what the effect in Safari or Mac versions of these other browsers would be. Here is the code I changed (additions red):


<div id="header">

<img src="http://webwizardz.50webs.com/ww_layout3_01.gif" /><img src="http://webwizardz.50webs.com/ww_layout3_02.gif" /><br>
</div> <!-- end header -->
<div id="leftcolumn">
<img src="http://webwizardz.50webs.com/ww_layout3_03.gif" /><br>
<img src="http://www.sprydesign.com/clients/bbr/port.jpg" /><br>
<img src="http://www.sprydesign.com/clients/bbr/serv.jpg" /><br>
<img src="http://webwizardz.50webs.com/ww_layout3_10.gif" /><br>
</div> <!-- end leftcolumn -->

NOTE: There is one other <br> added at the end of that real long line near the top of the above snippet. You will miss it if you do not scroll the snippet over.