IE Problem: Gap between div & img
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 expande开发者_JS百科d 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>
Try adding padding-top: 0px to .pageBoxContent - does that fix the spacing problem?
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  . try that. remove all white spaces between the end of your img and the start of your div tag. remove the comment as well
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/.
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
加载中,请稍侯......
精彩评论