[css-d] Table Cells Filled with Images
When I fill table cells with colors and set cellspacing=0, cellpadding=0, border=0, I can get the cells to butt right up against one another both vertically and horizontally. However, when I fill the same cells with an image I can't get them to butt up against one another vertically although they do butt up against one another horizontally. Does anyone know why that is and what I can do about it? I know that I can use div elements. I just want to know why this doesn't work. Thanks for any input. BTW here's some test code I have been playing with: !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 headtitletd test/title/head body table cellspacing=0 cellpadding=0 border=0 tr td img src=images/bg1.gif height=100 width=100 alt=[Image] / /td /tr tr td img src=images/bg1.gif height=100 width=100 alt=[Image] / /td /tr /table /body /html ... doug __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table Cells Filled with Images
On 2008-11-23 12:00, Doug Jolley wrote:
When I fill table cells with colors and set cellspacing=0,
cellpadding=0, border=0, I can get the cells to butt right up against
one another both vertically and horizontally. However, when I fill
the same cells with an image I can't get them to butt up against one
another vertically although they do butt up against one another
horizontally. Does anyone know why that is and what I can do about
it? I know that I can use div elements. I just want to know why this
doesn't work. Thanks for any input.
Images are by default display:inline. They sit on the baseline, which
leaves space below for descenders. if you add
td img {display:block}
it should work.
BTW here's some test code I have
been playing with:
!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
headtitletd test/title/head
body
table cellspacing=0 cellpadding=0 border=0
tr
td
img src=images/bg1.gif height=100 width=100 alt=[Image] /
/td
/tr
tr
td
img src=images/bg1.gif height=100 width=100 alt=[Image] /
/td
/tr
/table
/body
/html
... doug
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Curtis Clark http://www.csupomona.edu/~jcclark/
Director, IIT Web Development +1 909 979 6371
University Web Coordinator, Cal Poly Pomona
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table Cells Filled with Images
if you add
td img {display:block}
it should work.
It did work. Thanks very much.
Now that I understand the basis of the problem, I was inclined to try:
td img {vertical-align: bottom}
That also seemed to work. I'm curious as to whether you see that as
being an acceptable alternative solution.
Thanks.
... doug
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table Cells Filled with Images
On 2008-11-23 14:59, Doug Jolley wrote:
Now that I understand the basis of the problem, I was inclined to try:
td img {vertical-align: bottom}
That also seemed to work. I'm curious as to whether you see that as
being an acceptable alternative solution.
In some cases, that might be superior, since you could put more that one
image side-by-side in a cell without floating them.
--
Curtis Clark http://www.csupomona.edu/~jcclark/
Director, IIT Web Development +1 909 979 6371
University Web Coordinator, Cal Poly Pomona
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
