1 pixel gap between images in IE and NN

[denimflavored]

I have been working on the layout for our new site for about a week now. One of the requirements is that it is cross-browser/cross-platform compatible. As I'm sure you all know, this is a huge pain. My current problem (that has been vexing me for a few days) is that there is a one pixel gap between two sets of images, and another one pixel gap between the header div and the container div. I do not leave white space in my code, I use comment tags to space out my code. All margins/padding/borders are set to zero.
Has anyone else had this problem? Does anyone have a solution?
Thank you in advance.
Here is the page, "View Source" to see the code (I didn't want to be rude and paste too much in here.

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

[edited by: tedster at 3:38 pm (utc) on May 31, 2005]

[vincevincevince]

It would be better to show the code...

Try containing each image within its own DIV, that has worked wonders for me when images are floated. For some reason IE puts gaps between floated images but not between floated divs with images in them.

[denimflavored]

Wow, I didn't expect to get such a quick reply! Thanks, I'll try that. Here's the code, I cleaned it up the best I could.

<div id="header"> <img src="assets/images/logos/logovault.jpg" name="logo1" hspace="0" vspace="0" border="0" usemap="#logo1Map"
style="float: left;"><img src="../../assets/images/header/navsitemap.jpg" alt="Site Map" name="site"
width="244" height="36" hspace="0" vspace="0" border="0" usemap="#siteMap"
style="float: left;"><img src="assets/images/header/historyhistory.jpg"
height="36" width="211" hspace="0" vspace="0" border="0" alt="History"><a href="products.cfm" target="_self"><img src="assets/images/header/navproducts.jpg" name="prod"
height="36" width="125" hspace="0" vspace="0" border="0"
alt="Products"></a><a href="solutions.cfm" target="_self"><img src="assets/images/header/navsolutions.jpg" name="solu"
height="36" width="72" hspace="0" vspace="0" border="0"
alt="Solutions"></a><a href="support.cfm" target="_self"><img src="assets/images/header/navsupport.jpg" name="supp"
height="36" width="72" hspace="0" vspace="0" border="0"
alt="Support"></a>\<a href="faqs.cfm" target="_self"><img src="assets/images/header/navfaqs.jpg" name="faqs"
height="36" width="54" hspace="0" vspace="0" border="0"
alt="FAQs"></a><a href="about.cfm" target="_self"><img src="assets/images/header/navaboutus.jpg" name="abou"
height="36" width="61" hspace="0" vspace="0" border="0"
alt="About Us"></a><ul style="display: none;" id="nav4"><li><a href="news.cfm" target="_self">News &amp; Press</a></li></ul><a href="contact.cfm" target="_self"><img src="assets/images/header/navcontactus.jpg" name="cont"
height="36" width="71" hspace="0" vspace="0" border="0"
alt="Contact Us"></a></div><div id="container"><table width="760" cellpadding="0" cellspacing="0" border="0" align="left">

[Stormfx]

Looks likes it's an IE problem. Works/looks fine in my Firefox. If you're using a table for the body, why not just use a table for the navigation? That would keep the images aligned in all browsers, including older browsers that destroy <div> layouts.

[denimflavored]

Using <div>s doesn't work. :(
I'm aware it works fine in Firefox, it's only a problem in IE and NN for PC. It works in Opera Mac/PC, Firefox, Safari, and (surpirisingly) IE Mac.
I'm not using tables because I don't want to bog down the page with dozens of lines of code that aren't necessary. The only reason I use tables in the content part of the page is so the lines on the right and left stay consistent with the length of the page.
Our old site had impossible-to-read code because of the nested tables. Sometimes they were eight deep. I'm trying to avoid that.

[createErrorMsg]

Are you sure IE isn't in Quirks Mode? Do you have a full, valid doctype, no code or whitespace before it in the source?

cEM

[Richard_N]

yep valid doctype might be it... not sure why you have all the formatting of images in the source why not just declare a #header img definition with border none padding none, that may fix it..?

Which version of IE and NN are we talking about?

[denimflavored]

No, I did not have the doctype. I put that in, but that made a double scroll bar show up. I'll figure that one out, but it still didn't get rid of that white space.
In the CSS I do have an *img declaration with padding/margins/border set to 0. I thought that might work, but it didn't help. I also tried setting the top margin of the table to -1 to close the gap, but that didn't seem to do the trick either.
I'm using Explorer 6 and Netscape 8.

[Richard_N]

without the css as well its pretty impossible, my advice would be to seperate off the page off with the image problem, solve that, then fix the other one. The only thing I can suggest without the css is you remove all extrenous formatting like border margin horizontal and vetical space from the image tags, strip it right down to basics then it may be easier to work out

By the way you have a \ sitting between two images, was that intentional? Does any of the divs have top or bottom padding, try taking that out as it can sometimes throw IE, one other point, try adding a <br /> in the start of the second div, seen that fix things sometimes.

[denimflavored]

Thanks everyone for your help. createErrorMsg helped me out. He figured out that since I had the header set to "vertical-align: bottom" it was moving stuff around. That pretty well got rid of the gap between the table and the header. The gap between the images was caused by a missing image map, which I ended up deleting just as an afterthought to clean up my code.
I really appreciate all this help. :)
Oh, and Richard, the "/" isn't in the original code, it must have been left there when I cleaned everything up to post on here. I leave "hspace" and "vspace" in all my images so that Explorer keeps them next to each other (I hate how it likes to render white space....)
Once again, thanks!