CODEWITHSUNDEEP
cssjspcross-browserstylesheetstyles
Caroline
Caroline

Reputation: 969

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

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

Upvotes: 2

Views: 4883

Answers (4)

AJStacy
AJStacy

Reputation: 5233

The spacing problem is most likely caused by your improperly closed tag ("") as well as using both display: none; and visibility: hidden;

Visibility will cause the element to still take up space so you need to get rid of that style.

If you make those adjustments it should work unless you have other issues not seen in the code provided (for example: your parent container to .hidden having a misspelled class name).

Tips: Never create space with < br/ > tags. They're only used for breaking text. Get rid of display: inline; and position: relative; on your other < div > as it doesn't make sense to have it there (relative positioning is default). Lowercase all of your tags. Uppercase tags are a thing of the distant past and not ideal.

Upvotes: 1

klaasens
klaasens

Reputation: 113

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.

Upvotes: 0

jimyi
jimyi

Reputation: 31191

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.

Upvotes: 0

Evernoob
Evernoob

Reputation: 5561

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.

Upvotes: 0

Related Questions