IE Problem with space between divs at top

I removed all the stuff at the top and use

<div>an image</div><div>another image</div>

The images are to butt together and it does in FF but IE places a 1px space between them and I can't figure what is causing it.

Does anyone have a solution?

Define your div's and give them a -1px margin. That should make them butt together better in IE.

Hope that helps.

Impossible to say specifically what is causing it, but IE6 has a number of whitespace bugs i.e. it inserts space between elements inappropriately. It also has some rounding errors that cause it to get div widths wrong by a pixel under some circumastances.

Hopefully TinaS's suggestion will at least make the consequences less obvious.

Thanks for the suggestions. The space still won't go though. I used the same design with 1.2.7 and it doesn't happen so it seems there might be something in the css that might be causing this. I just cant figure it out.

This thin line just wont go away. I've done all kinds of debugging with no positive results. I figure it must be in the css.

Without seeing the site, it's impossible to comment further. Do you have a URL that we can see?

My site with the trouble in IE http://worldofwirelessllc.com/. The thin line under the header image should not be there and is not there in FF.

So now that I have post the site does anyone have a clue of what is causing this space.

If the site had been constructed using DIVs, IMGs and CSS then I have a whole battery of possible solutions. However, you've actually used nested tables with HTML attributes. The site also has 91 validation errors.

I'm afraid that the number of good designers still using these approaches and therefore having the knowledge to help with this type of problem is getting smaller each day.

It was happening with the divs before and so I tried the tables to rid the problem. Since the same error occurs I assume there must be some thing in the css or the coding that I need to adjust.

I am still open the 'battery' of solutions, so please do post them.

I've researched many places on the web and can't find a solution for this. I may have to attempt a re-write of the css to solve this. I figured someone must have experienced the same problem and found a fix.

I am with kurio on this, you still have the nested tables and if this is what you desire then there is a shrinking group of people that can address this or have experience with it.

If you rid it of the tables then there is a widening group that can address this problem using the things that we have direct experience with.

the -1px margin should fix this if you use

#headerWrapper{
bottom-margin: -1px;
}

maxima:

I may have to attempt a re-write of the css to solve this.Bit unfair to blame your CSS for this. It looks fine and the site works perfectly in Firefox and Opera. This seems to be about IE's distaste for tables with nothing but images and right next to each other. I'm afraid that this isn't going away, the problem still manifests in IE7.

Possible solutions

1. as per dbltoe's suggestion: negative margin though would need to be more than -1px for IE7
2. why have two tables at all (the problem is the gap between them), but these rows of images could be constructed as two rows of the same table
3. making the cell in the header table empty (other than a  ) and putting the image as a background
4. I know you've tried it already, but dropping the table stuff altogether

As stated earlier, I don't work with tables like this so I can't vouch for 1-3, but they're the things I would try if I did.

Nice job clearing up your HTML. The errors that are left are because HTML doesn't like "&" on its own. Should be "&". Shame about the header change - I really liked the old one (it was the main reason I didn't take one look, say tables, and run away!)

Just a thought on this ....

explicitly setting cellspacing and cellpadding to 0 frequently helps with unexpected white space around table cells.

W

distanceDemon,

Great point and one that was already accounted for with the code from the site:

<table id="headtable" border="0" cellpadding="0" cellspacing="0" width="100%">