HTMLHelp Forums > Wordpress/ComicPress/ComicEasel adding a space at bottom of table column

Full Version: Wordpress/ComicPress/ComicEasel adding a space at bottom of table column

HTMLHelp Forums > Web Authoring > Web Site Functionality

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 -

Image Link One

And here's the same code pasted into an html widget in Wordpress/ComicPress/ComicEasel -

Image Link Two

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 -

QUOTE

<html>
<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.

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/Ar...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:

CODE

<!doctype html>
<html>
....

Bill_the_Builder

Apr 1 2020, 12:34 PM

QUOTE(Christian J @ Apr 1 2020, 04:39 AM)

CODE

<!doctype html>
<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.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.