I thought I had seen a post on this issue, but now I can't find it. As I recall, though, in that post it was IE that was adding the space. Anyway, Firefox is adding several px of spcae below the image in the <cleft> divs, but not in the <cright> ones. IE does not do so. There are several rows of these "buttons" but I just posted the code for one row.
.cbox {
margin: 0 auto;
position: relative;
text-align: left;
}
.cleft {
text-align: left;
float: left;
}
.cright {
float: right;
text-align: left;
clear: right;
}
.cright img {
display: block;
}
<div class='cbox' style='width:395px;'>
<div class='cright' style='width:223px; margin-top:12px;'>
<a href='http://www.webdeveloper.com/forum/archive/index.php/index.php?Pass=1'><img src='http://www.webdeveloper.com/forum/archive/index.php/images/mnu_pass.gif'></a>
</div>
<div class='cleft' style='width:138px; margin-top:12px;'>
<a href='http://www.webdeveloper.com/forum/archive/index.php/../timecard/s_viewcard.php'><img src='http://www.webdeveloper.com/forum/archive/index.php/images/mnu_time.gif'></a>
</div>
</div>
This is another case of knowing that Firefox is doing something right, but not knowing why. You guys are really good at pointing out why.Add to .cbox clear:both;As usual, Fang, you have solved my problem. Thay line up nicely. But Firefox is now adding the space below the image in both <divs> and IE is not. So the alignment is fine, but why is Firefox adding the space?Looks the same in the code snippet. Do you have a live example?Try adding img{vertical-align:bottom;}Putting a red border arounfd the two interior divs and a blue one around "cbox" (after adding "clear:both" per Fang's direction) shows this (<!-- m --><a class="postlink" href="http://sonora-sw.com/screen.gif">http://sonora-sw.com/screen.gif</a><!-- m -->).cbox img {
display: block;
}
or soccer362001's solutionYep, things now look the way one (I) would expect them to. But...
Why is the "block" needed when the images is in a div inside the cbox?An image is displayed inline the same as text. The baseline is not at the bottom of the container. This link (<!-- m --><a class="postlink" href="http://web.archive.org/web/20040202073255/http://devedge.netscape.com/viewsource/2002/img-table/">http://web.archive.org/web/200402020732 ... img-table/</a><!-- m -->) explains it very well.Learning all the time. Thanks for the ref.
.cbox {
margin: 0 auto;
position: relative;
text-align: left;
}
.cleft {
text-align: left;
float: left;
}
.cright {
float: right;
text-align: left;
clear: right;
}
.cright img {
display: block;
}
<div class='cbox' style='width:395px;'>
<div class='cright' style='width:223px; margin-top:12px;'>
<a href='http://www.webdeveloper.com/forum/archive/index.php/index.php?Pass=1'><img src='http://www.webdeveloper.com/forum/archive/index.php/images/mnu_pass.gif'></a>
</div>
<div class='cleft' style='width:138px; margin-top:12px;'>
<a href='http://www.webdeveloper.com/forum/archive/index.php/../timecard/s_viewcard.php'><img src='http://www.webdeveloper.com/forum/archive/index.php/images/mnu_time.gif'></a>
</div>
</div>
This is another case of knowing that Firefox is doing something right, but not knowing why. You guys are really good at pointing out why.Add to .cbox clear:both;As usual, Fang, you have solved my problem. Thay line up nicely. But Firefox is now adding the space below the image in both <divs> and IE is not. So the alignment is fine, but why is Firefox adding the space?Looks the same in the code snippet. Do you have a live example?Try adding img{vertical-align:bottom;}Putting a red border arounfd the two interior divs and a blue one around "cbox" (after adding "clear:both" per Fang's direction) shows this (<!-- m --><a class="postlink" href="http://sonora-sw.com/screen.gif">http://sonora-sw.com/screen.gif</a><!-- m -->).cbox img {
display: block;
}
or soccer362001's solutionYep, things now look the way one (I) would expect them to. But...
Why is the "block" needed when the images is in a div inside the cbox?An image is displayed inline the same as text. The baseline is not at the bottom of the container. This link (<!-- m --><a class="postlink" href="http://web.archive.org/web/20040202073255/http://devedge.netscape.com/viewsource/2002/img-table/">http://web.archive.org/web/200402020732 ... img-table/</a><!-- m -->) explains it very well.Learning all the time. Thanks for the ref.