css - hidden div has large white space in its place in IE

Question

Hi,

Any ideas how I get rid of white space on my IE browser. It is caused by a hidden div. When I remove the div the white space goes. Works fine in FF.

Here is the DIV:

 <div class="hidden" id="popup">
 <div>
  <H1 class="center" id="popupTitle"></H2><br/><br/><br/>
  <div style="position:relative; display:inline;">
   <p id="popupText" style="float: left"></p>
   <img id="popupImage" style="float: right"></img>
  </div>
 </div>
</div>

Here are the styles associated with it:

.ofCommunications .hidden    { display:none; visibility: hidden; }

I am also trying to get the p and the img inside the third div to display on the same line but that doesn't seem to be working either.

Thanks in advance Caroline

Answer 1

A couple of comments. Once you clean this up it might help to resolve this and other future headaches:

Remove your inline styles and put them in a stylesheet.

What is that second div doing under the hidden div? It looks redundant and unnecessary to me. Remove it.

If you're floating elements then you'll need to clear them down the track. This could be why you have things floating in the wrong spots.

Have you display:block'ed the p element next to the image and given it a width? Otherwise it's not going to float anyway.

Your h1 should not be uppercase.

Hope those few suggestions help out a bit.

Answer 2

Try this to get the <p> and <img> lined up:

<div>
    <p id="popupText" style="float: left"></p>
    <p style="float: right"><img id="popupImage" /></p>
</div>

I removed the position: relative because it's not needed with the code you provided, and the display: inline because it doesn't make sense to make the div inline.

Answer 3

Have you checked the widths of the parent elements? If a width is set too small on a parent element there will not be enough space to render your paragraph and image on the same line. This could cause your paragraph and image to render on different lines.