Relative Positioning Issue with IE7

Vertical Space is being left between two relative positioned DIV

[tqsi]

Hi,

First time poster.

I have some code that seems simple and works with FireFox but not with IE7. I am building a left navigation button control that will have variable numbers of buttons.

The problem seems to be that whereas FireFox will allow two DIV elements to be flush with each other; IE7 is insisting to put a space between them.

Here is the basic code:

<div id="left2" style="position:relative; left:0px; top:0px; z-index: 3; background-color:blue">
<img src="images/LeftLinesTile.jpg" width="195" height="34" border="0">
</div>

<div id="left3" style="position:relative; left:0px; top:0px; z-index:3;">
<img src="images/LeftLinesTile.jpg" width="195" height="34" border="0">
</div>

The blue background was added just to see what IE thought the "cell" looked like.

When this code is run by Firefox the two images are vertically flush; however, when run by IE7, a white space of something like 2-4 pixels in width separates the images. The blue background shows in the white space.

I have tried numerous CSS parameters to change this (eg, max-height, height, padding, margin, border) however, nothing seems to make any difference.

I am using relative positions as I do not know how many buttons and the relative DIV is a container for two absolute DIVs with more button code. The above DIV is actually just the background image.

I appreciate any suggestions.

Thanks,
john.

[birdbrain]

Hi there tqsi,

and a warm welcome to these forums. ;)

Your problem may be resolved by setting the images to display:block.

Further reading:-

• Eric A. Meyer article [devedge-temp.mozilla.org]

birdbrain

[tqsi]

Hi there,

Thanks for both the welcome and for the perfect fix! I appreciated the article as it explained the issue in depth. I do not think I would have picked up on that as the issue without a lot of searching.

This application did not use a DOCTYPE (my bad...), and I found that I needed a strict type to make IE7 do what I wanted. But that caused problems elsewhere with FF; however, using both seems to have solved the problem, at least for those two browsers. I may have to revisit the fixes as I review the rest of the pages in the app.

thanks again,

john.

[birdbrain]

No problem, you're welcome. ;)