The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Wordpress/ComicPress/ComicEasel adding a space at bottom of table column
Bill_the_Builder
post Apr 1 2020, 01:24 AM
Post #1





Group: Members
Posts: 2
Joined: 31-March 20
Member No.: 27,259



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 1 2020, 04:39 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,462
Joined: 10-August 06
Member No.: 7



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>
....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Bill_the_Builder
post Apr 1 2020, 12:34 PM
Post #3





Group: Members
Posts: 2
Joined: 31-March 20
Member No.: 27,259



QUOTE(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>
....



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 6th July 2020 - 08:26 AM