CSS: IE7 Blank area of <div> takes space

I have a page with some divs that have a width of 800px and margin: 0 auto to center them.

One of the divs contains an image and the rest of the div is empty, in IE8+ it looks as well as all other browsers, but in IE7 the empty area of the div takes space and throws other elements off their place,

is there a quick solution for making the em开发者_JAVA百科pty area of the div not take space?

the reason I have to keep the blank area is that the fixed with and margin: 0 auto make the picture align with the other divs that have the same width.

thx in advance!

Try setting line-height:0 and font-size:0 for that element.

It should make the element occupy no space..

just wanted to tell anyone reading this post, what I did in the end is put an Internet Explorer conditional comment as nothing seemed to solve the problem.

another thing that is possible is to make one of the DIVs' position absolute and then it's outside the normal flow, but I couldn't find a way to make the empty part of the DIV not take space in the normal flow.

Yes it does...just put ; after them

I just had the same problem on IE7 and used the answer

line-height:0; 
font-size:0; 

in the CSS corresponding to that div