Removing space between vertical dividers

Question

I have three vertically aligned divs on top of each other. top and bottom only show the image above and below the player. After this, the coordination becomes:

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

now there is a white line / space between the middle div above and below. However, I explicitly set the fields and restrictions and boundaries to zero, but still do not solve.

This problem does not occur in IE6 / IE7 / IE8 etc., but all other browsers.

Thanks bobince, his work on the upper side of the image, doing a vertical alignment: bottom, but not working for the bottom image. which I am trying to place on top.

ok is the verbose 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 it works in all but IE lol after adjusting the line height

Answer 1

Just set the line-height your top and bottom divs to 0 .

Code example:

 <!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 works in all but IE, there is an IE error that occurs if there is a space after the image tag. Try the following:

 <div> <img /></div> 

instead of this:

 <div> <img /> </div> 

Answer 3

The image is on the source line of the text of the embedded block. To verify this, add text to the left and right of the image. There is space under the base text base to make room for letter delimiters ('g,' y, etc.), as well as line spacing.

Set the CSS style for CSS with vertical alignment to something like “top” or “bottom” (as needed) so that it aligns with the edge of the text line, not the baseline.

Answer 4

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