Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Web Site Functionality _ Wordpress/ComicPress/ComicEasel adding a space at bottom of table column
Posted by: Bill_the_Builder Apr 1 2020, 01:24 AM
Here's a test I ran to show my code working outside of the Wordpress/ComicPress/ComicEasel environment -
https://tinyurl.com/wcjtuv5
And here's the same code pasted into an html widget in Wordpress/ComicPress/ComicEasel -
https://tinyurl.com/uqxj45a
Something in Wordpress/ComicPress/ComicEasel is adding a space at the bottom of my images. I've set the background color of the table to red so the extra space sticks out. The red bars shouldn't be there.
Here's my code -
<head>
<style>
img {
border:0px;
border-collapse: collapse;
border-bottom: 0px;
}
table {
border-collapse: collapse;
}
td { border-bottom: 0px;
border-collapse: collapse; }
</style>
</head>
<body>
<table
cellspacing="0" cellpadding="0" border="0" bordercolor = red>
<tr>
<td bgcolor="red" >
<img src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />
</td>
</tr>
<tr>
<td bgcolor="red" >
<img src="//www.html.am/images/image-codes/milford_sound_t.jpg" width="225" height="151" alt="Photo of Milford Sound in New Zealand" />
</td>
</tr>
</table>
</body>
</html>
Any ideas? I wanted to break up a long sidebar image into 4 pieces, but if I can't figure this out I'll redo the art and make it four separate images.
Posted by: Christian J Apr 1 2020, 04:39 AM
Wordpress/ComicPress/ComicEasel are probably not causing this. It happens because IMG elements are normally treated the same as inline text, where a little "descender space" is provided for characters that need it (like "y", "j" or "p"). To fix it you might style the IMG elements as "display: block". See also https://developer.mozilla.org/en-US/docs/Archive/Misc_top_level/Images,_Tables,_and_Mysterious_Gaps
What's odd is that the gaps appear even though your code examples use no Doctype, none of my browsers show any gaps without it. However you should always use a Doctype at the top of all web pages to ensure correct CSS rendering:
<html>
....
Posted by: Bill_the_Builder Apr 1 2020, 12:34 PM
Wordpress/ComicPress/ComicEasel are probably not causing this. It happens because IMG elements are normally treated the same as inline text, where a little "descender space" is provided for characters that need it (like "y", "j" or "p"). To fix it you might style the IMG elements as "display: block". See also https://developer.mozilla.org/en-US/docs/Archive/Misc_top_level/Images,_Tables,_and_Mysterious_Gaps
What's odd is that the gaps appear even though your code examples use no Doctype, none of my browsers show any gaps without it. However you should always use a Doctype at the top of all web pages to ensure correct CSS rendering:
<html>
....
Thank you! I knew it was going to be something like that, but I spent hours trying to track the problem down, to no avail. "Display: block" was what I needed.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)