2

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

Improve this question
4
  • why would you specify both "visibility: hidden" and "display: none"? Visibility:hidden without display:none still takes the space the element would otherwise take if it were visible. display:none removes the element from the document flow Perhaps try switching the two statements: {visibility:hidden; display:none;} (just a guess as to why IE might be messing up) Commented Sep 24, 2009 at 16:19
  • I used both because either on their own didn't seem to work. Commented Sep 24, 2009 at 16:26
  • Just a note: Your h1 tag is closed with a h2 tag. Commented Sep 24, 2009 at 17:17
  • Hmm, could be a problem with white-space in your source code. Are there any elements that are siblings (before or after) this element? Commented Dec 9, 2011 at 8:43

4 Answers 4

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

2 Comments

I have absolutely no idea why that second div was there but it is gone now, so are the capital letters. Your suggestion about display:blocked actually fixed the first part of my issue. I had display:none on the class and later down the ID of the element had display:block and that obviously took precedence. Now all I need it to get the p and the img displaying inline. Thanks
A couple of notes: <p> is a block element by default, so he doesn't need to display: block (unless he overrode it somewhere, which it sounds like he might have). Also, applying a float will automatically convert that element to a block and float it.
0

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.

Improve this answer

1 Comment

I did that but the two elements are still not on the same line. I want to get the text to the left and the picture to the right.
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.