1

I have a simple problem where I dispay a picture above a div of text. In Internet explorer only there is a gap between the picture & the div of text when there should be no gap(like in Firefox where theres no gap).

Can you help me figure out how to remove the gap tween the 1st picture & the below div?

    <html>
<head>
    <style type="text/css">
    <!--
        .pageBox        { width: 873px; }
        .pageBoxContent { background-color: blue; padding: auto; margin: auto; /*background: url("images/pageBoxMid.png") repeat-y;*/
                          padding-right: 50px; padding-left: 50px; margin-top: 0px; background-color: blue; }

        .pageBoxTop     { background-color: red; }
        .pageBoxBottom  { background-color: red; }
    -->
    </style>
</head>

<body>

    <div id="container">

        <div class="pageBox">
            <img class="pageBoxTop" src="images/pageBoxTop.png" alt=""/>
            <!-- Gap appears here on display -->
            <div class="pageBoxContent">
                It was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the SeleuIt was founded in the mid-3rd century BC by Arsaces I. Mithradates I greatly expanded the empire by seizing Media and Mesopotamia from the Seleu
            </div>
            <img class="pageBoxBottom" src="images/pageBoxBottom.png" alt=""/>
        </div>

    </div>

</body>
</html>
4
  • Have you tried setting padding 0 instead of auto? Have you tried setting padding/margin of .pageBoxTop to 0?
    – nnnnnn
    Jul 12, 2011 at 5:56
  • @nnnnnn: padding: 0; margin: 0; doesn;t work either
    – Mack
    Jul 12, 2011 at 5:57
  • 2
    Maybe one of the solutions from this question: stackoverflow.com/questions/1207541/… will help? Try display:block on the img.
    – nnnnnn
    Jul 12, 2011 at 6:09
  • @nnnnnn: Thanks that did it :) You should post as an answer so I can select it
    – Mack
    Jul 12, 2011 at 6:17

4 Answers 4

0

Try adding padding-top: 0px to .pageBoxContent - does that fix the spacing problem?

0
0

the problem is the new line and some spaces. I had the same damn issue where in all browsers looked good but in IE there were spaces between my divs that were breaking my layout and the reason was i manually aligned the source code and there was a space somewhere that IE intrerpreted as &nbsp. try that. remove all white spaces between the end of your img and the start of your div tag. remove the comment as well

0

IE (and occasionally some other browsers) like to make believe that there is a line of text along with images and that sometimes introduces spacing between images and other things as it tries to align the images to the baseline of the (phantom) text. You can usually make it go away by setting the font-size: 0 on the div that contains the images using CSS or style directives on the tag.

In your case, that div also contains your text so you may need to surround your images by a div and set that div to font-size: 0;

You can see that fix in action here: http://jsfiddle.net/jfriend00/83hJU/.

0

Try setting display: block on the img element. Without it IE may be trying to line up the bottom of the img with the baseline of the text and leaving space for "dangling" letters like "g" or "y".

Further info in the answers to this question: Strange gap between <div> elements in IE, not in FF or Opera

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.