removing space between vertical divs

Question

i have three vertical aligned divs on top of each other. the top and bottom are just showing an image on top and bottom of the player.hence coordination becomes like this

<div>
 <img>top</img>
<div>
<div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
 <img>bottom</img>
</div>

now there is white line/space between the middle div on its top and bottom. However i explicitly set the margins and pendings and borders to zero but still no solution.

This problem is not occuring in IE6/IE7/IE8 etc but all other browsers.

Thanks bobince, its working on top image side by making vertical-align:bottom but not working for the bottom image. whom i trying to place on top.

ok here is the detail code

<div id="top" >
    <img alt="topimage" style="vertical-align:bottom">
      <xsl:attribute name="src">
        <xsl:value-of select="TopImage"/>
      </xsl:attribute>
    </img>
  </div>
  <div id="container" style="clear:both;display:block;margin: 0 0 0 0;padding: 0 0 0 0;text-align:left;border:0 none;">
    <div id="left" style="margin: 0 0 0 0;padding: 0 0 0 0;float: left;">
      <img alt="left image"  style="margin: 0 0 0 0;padding: 0 0 0 0;vertical-align:bottom">
        <xsl:attribute name="src">
          <xsl:value-of select="LeftImage"/>
        </xsl:attribute>
      </img>
    </div>

    <div id="flashde260252-c874-4c67-b1aa-64ebe80bb701"  style="margin: 0 0 0 0;padding: 0 0 0 0;float:left;border:0;vertical-align:bottom">
      <embed id="flashde260252-c874-4c67-b1aa-64ebe80bb7010" height="308" width="512" allowfullscreen="true" wmode="transparent" quality="high" bgcolor="#ffffff" name="flashde260252-c874-4c67-b1aa-64ebe80bb7010" style="margin: 0 0 0 0;padding: 0 0 0 0;"  type="application/x-shockwave-flash">
        <xsl:attribute name="src">
          <xsl:value-of select="Movie"/>
          <xsl:text>?flvfile=</xsl:text>
          <xsl:value-of select ="Destination"/>
          <xsl:text >&amp;lang=e&amp;environment=PROD</xsl:text>
        </xsl:attribute>
      </embed>
    </div>

    <div id="rightimage" style="margin: 0 0 0 0;padding: 0 0 0 0;float:left;">
      <img alt="rightimage"  style="vertical-align:bottom">
        <xsl:attribute name="src">
          <xsl:value-of select="RightImage"/>
        </xsl:attribute>
      </img>
    </div>
  </div>
  <!-- <div id="bcontainer" style="margin: 0 0 0 0;padding: 0 0 0 0;text-align:left;border-left:0;border-right:0;border-top:0;border-bottom:0px;border:none;">-->
  <div id="bottom" style="clear:both;display:block;margin: 0 0 0 0;padding: 0 0 0 0;vertical-align:top;text-align:left;border:0 none">
    <img alt="subscribe" src="IRBBottom.jpg" usemap="#promomap" border="0" style="vertical-align:top">
      <xsl:attribute name="src">
        <xsl:value-of select="BottomImage"/>
      </xsl:attribute>
    </img>
  </div>
  <!-- </div> -->
  <div id="toc" style="clear:both;display:block;text-align:left;">
    <ol style="list-style:none;font-size:small;font-weight:bold">
      <li>* Includes all matches from main pitch, plus selected matches from pitch 2 - see FAQ for details.</li>
      <li>** Includes all matches on Finals Day, March 7th from main pitch - see FAQ for details.</li>
      <li>*** All matches on main pitch will be live and matches on pitch 2 will be on demand - see FAQ for details.</li>
    </ol>
  </div>
  <map name="promomap">
    <area shape="rect" coords="229,46,350,137" href="index.html" alt="Subscribe or Login" title="Subscribe or Login"/>
    <area shape="rect" coords="410,47,528,137" href="XXX.html" alt="R Video" title="Ro"/>
  </map>
  <script type="text/javascript">
    <xsl:text disable-output-escaping="yes">
  function showMovie(player,movie,endthumb,destination){
    var so = new SWFObject(player+'?flvfile='+movie+'&amp;endthumb='+endthumb +'&amp;endlink='+destination,'flashde260252-c874-4c67-b1aa-64ebe80bb7010','512','308','8', '#ffffff', 'high','');
    so.addParam('wmode', 'transparent');so.addParam('allowfullscreen', 'true');so.write('flashde260252-c874-4c67-b1aa-64ebe80bb701');
  }
  </xsl:text>
    <xsl:text> showMovie('</xsl:text>
    <xsl:value-of select="Player"/>
    <xsl:text>','</xsl:text>
    <xsl:value-of select="Movie"></xsl:value-of>
    <xsl:text>','</xsl:text>
    <xsl:value-of select="EndThumb"/>
    <xsl:text>','</xsl:text>
    <xsl:value-of select="Destination"/>
    <xsl:text>');</xsl:text>
  </script>
</div>

:) now its working in all except IE's lol, after setting up the line-height

Answer 1

Simply set the line-height property of your top and bottom divs to 0 .

Example code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
        #top {
            background-color: #f00;
            line-height: 0px;
        }
        #middle {
            background-color: #0f0;
        }
        #bottom {
            background-color: #00f;
            line-height: 0px;
        }
    </style>
</head>
<body>
    <div id="top">
        <img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png"
            alt="Stackoverflow" />
    </div>
    <div id="middle">
        <div>This is the first middle div child.</div>
        <div>This is the second middle div child.</div>
        <div>This is the third middle div child.</div>
    </div>
    <div id="bottom">
        <img src="http://www.gravatar.com/avatar/ae3e50c947379163d74b6de6fa01d509?s=32&amp;d=identicon&amp;r=PG"
            alt="Gripsoft avatar" />
    </div>
</body>

Answer 2

If it's working in all except IE, there is an IE bug that occurs if there is whitespace after an image tag. Try this:

<div>
    <img /></div>

instead of this:

<div>
    <img />
</div>

Answer 3

An image sits on the text baseline of an inline box. Add text to the left and right of your image to verify this. There is space below the text baseline to make room for letters' descenders ('g', 'y' etc.) as well as line spacing.

Set the image's CSS style 'vertical-align' to something like 'top' or 'bottom' (as appropriate) to make it align to the edge of a text line instead of the baseline.

Answer 4

You can give the image display: block . Alternatively you can follow the image with <br/> or wrap it in a div (make sure there's no white-space). In this case I would prefer to use display: block unless you needed to put 2 images together for some reason.