Excessive Empty Area beneath <td>

I'm currently working on creating an e-book and I have encountered a concerning issue. The <figure> and <figcaption> elements are appearing as unknown tags in Sigil. To work around this problem, I decided to use a <table> for displaying images with captions. However, this solution has resulted in a large gap between the image and caption, as shown in the picture below.

Here is the HTML code:

<table class="imgtable" style="border: 1px solid black;">
<tr>
  <td class="imgs" style="border: 1px solid black;"><img alt="2b - 69" src="../Images/2b_-_69.jpg" width="100%" /></td>
</tr>

<tr>
  <td class="caption">A 1795 photograph of some stalwarts under the famous banyan tree “…all sentiment…” and a mute witness to the growth of cricket in Calcutta.</td>
</tr>

Below is the CSS code:

    table.imgtable {
  width: 100% !important;
  margin-left: "auto" !important;
  margin-right: "auto" !important;
  text-align: "center" !important;
}
table.imgtable td.caption {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-right: 3px solid #262626 !important;
  border-top: 1px solid #262626 !important;
  border-bottom: 3px solid #262626 !important;
  border-left: 1px solid #262626 !important;
  font-family: "EB Garamond 08" !important;
  text-align: center !important;
  font-size: 80% !important;
  background-color: white !important;
  border-radius: 3px !important;
  width:"auto" !important;  
}
table.imgtable td.imgs {
  padding-top: 7px !important;
  padding-bottom: 0 !important;
  width:100%;
}
img {
  width: "auto" !important;
}

htmlcssepub

Answer №1

To create spacing between table elements, utilize the border-spacing property and set it to 0.

Check out this JSFiddle demo.

Below is the HTML code:

<table class="imgtable" style="border: 1px solid black;">
<tbody>
    <tr>
      <td class="imgs" style="border: 1px solid black;">
          <img alt="2b - 69" src="../Images/2b_-_69.jpg" width="100%" />
        </td>
    </tr>
    <tr>
      <td class="caption">A 1795 photograph of some stalwarts under the famous banyan tree “…all sentiment…” and a mute witness to the growth of cricket in Calcutta.</td>
    </tr
</table>

CSS styling for the table:

table.imgtable {
    border-spacing: 0;
    width: 100% !important;
    margin-left: "auto" !important;
    margin-right: "auto" !important;
    text-align: "center" !important;
}

table.imgtable td.caption {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-right: 3px solid #262626 !important;
    border-top: 1px solid #262626 !important;
    border-bottom: 3px solid #262626 !important;
    border-left: 1px solid #262626 !important;
    font-family: "EB Garamond 08" !important;
    text-align: center !important;
    font-size: 80% !important;
    background-color: white !important;
    border-radius: 3px !important;
    width: auto !important;  
}

table.imgtable td.imgs {
    padding-top: 7px !important;
    padding-bottom: 0 !important;
    width: 100%;
}

img {
    width: auto !important;
}

Answer №2

Opt for the 'block' function in CSS over utilizing 'td' tags in HTML.

Answer №3

Avoid using tables and steer clear of using the !important declaration ()

.figure {
    border-spacing: 0;
    width: 100%;
    margin-left: "auto";
    margin-right: "auto";
    text-align: "center";
}

.figure .caption {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 10px;
    padding-right: 10px;
    border-right: 3px solid #262626;
    border-top: 1px solid #262626;
    border-bottom: 3px solid #262626;
    border-left: 1px solid #262626;
    font-family: "EB Garamond 08";
    text-align: center;
    font-size: 80% ;
    background-color: white;
    border-radius: 3px;
    width:"auto"; 
    margin-top:5px; /*Adjust this as needed*/
}

.figure img {
    padding-top: 7px;
    padding-bottom: 0;
    width:100%;
    display:block;
}
<div class="figure">
  <img src="http://placehold.it/500x500" >
  <div class="caption">A 1795 photograph capturing stalwarts under the famous banyan tree, witnessing the growth of cricket in Calcutta.</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimizing User Addition in Python Using Selenium

Currently, I am developing test cases to populate a new web app account with multiple users simultaneously. Here is the script I am using: driver.find_element_by_css_selector("input.ss-med.small").clear() driver.find_element_by_css_selector("input ...

pythonhtmlselenium

The style of the button label does not persist when onChange occurs

Encountered an interesting issue here. There is a button designed for selection purposes, similar to a select item. Here's the code snippet: <button class="btn btn-primary dropdown-toggle" style="width: 166%;" type="button" id="dropdownMe ...

javascriptjqueryhtmlcssstyles

Craft a Unique Responsive Background Design

I'm eager to create a background like this, but I'm struggling to figure out the best approach. My attempt with transform: skewY(-6deg) ended up skewing my entire page instead of just the background. Could someone please assist me in finding th ...

htmlcssbackground

Content below divs that are fixed and absolutely positioned

I have a design layout similar to this (a small snippet) and I am facing an issue where the text within .content is not clickable. The positioning of #gradient is fixed due to the background image, and #empty has an absolute position to cover the entire bo ...

css

Anchor elements and other inline elements not triggering MouseLeave event

Take a look at this CodePen link, particularly in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event doesn't trigger when a user quickly moves the mouse over multiple images. This results in some images still having t ...

htmlcssreactjs

Transitioning the Background Image is a common design technique

After spending hours trying to figure out how to make my background "jumbotron" change images smoothly with a transition, I am still stuck. I have tried both internal scripts and JavaScript, but nothing seems to work. Is there any way to achieve this witho ...

javascripthtmlcssbootstrap-5

Position a form in the center of a container and showcase an additional div on the right with an indentation

My goal is to center a form within a div and have another div on the right that is slightly indented, but I'm struggling to align the elements properly. How can I achieve this layout using CSS? Additionally, is there a way to center the right-hand d ...

htmlcss

How do I switch the background-image on li hover and revert it back when I move off the li element?

Looking to update the background image of a div upon hovering over a li element? Check out this example here. So far, I've got that part working fine. But now I want the background picture to revert back to its original CSS when I move away from the l ...

javascriptjqueryhtmlcssbackground-image

Organize the structure of a JSON object in AngularJS to generate a hierarchical unordered list

Greetings! I am working with a RESTful API that returns a JSON object structured like this: { data: [ { id: 4, name: "Naranja", cant_portion: 2, portion_name: "Piezas", foodgroup_name: "Frutas" } ...

htmlangularjslaravel

Can one utilize HTML's .querySelector() method to target elements by xlink attribute within an SVG document?

Here is the scenario: <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="url"></a> </svg> </body> Now, can you utilize the HTML DOM's .querySe ...

javascripthtmldomsvgxlink

Leveraging property values in Angular 2 to dynamically generate HTML elements as tag names

Is it feasible to use a property as an HTML tag name? For instance, something along the lines of: <{{property.name}}>Hello world</{{property.name}}> ...

htmlangular

Emphasizing sections using a specific class for paragraph highlighting

Is it possible to dynamically change the style of paragraphs based on certain classes? Let's say we have a text with a list of p elements and we want to modify the styles of paragraphs that come after specific classes, such as 'alert' or &ap ...

javascripthtmlcss

When hovering, apply style 1 to all elements with the same id, and style 2 to the hovered element

I'm working with some user-generated divs that I want to dynamically highlight when hovered over, while simultaneously blurring the other divs. My challenge is figuring out how to change the style of the hovered div separately from all the others. Th ...

javascriptcss

Unable to disable background color for droppable element

For my project, I am working with two div boxes. My goal is to make it so that when I drag and drop box002 into another div box001, the background color of box001 should change to none. I have attempted to achieve this functionality using jQuery without s ...

javascriptjqueryhtmlcss

Having trouble with Vue image source file paths?

Having an issue with loading an image via file_path on Vue. When using a hardcoded path, it works fine. Refer to the sample code below: JavaScript function getRestaurantsbyId(id) { var restaurants = { "1" : { "name": "xxxx", ...

javascripthtmlvue.js

Utilize the :not() and :hover selectors in Less when styling with CSS

Some of my elements have a specific class called .option, while others also have an additional class named .selected. I want to add some style definition for the :hover state on the .option elements, but only for those without the .selected class. I' ...

cssless

Images Centerfold Team

I am facing a challenge in creating a group of images for an album. There seems to be a significant gap on the right side, which cannot be resolved without using padding. However, adding padding only works for my current PC resolution and creates a larger ...

htmlcsstwitter-bootstrap-3

The impact of adjusting the article's margin-top on the margin-top of

I want these two divs to have different positioning. The sidebar should remain fixed at the top. Why is the sidebar aligned with the article div instead of sticking to the top? body{ margin: 0; padding: 0; } div#sidebar{ background-color: yel ...

htmlcss

Pass the code from the webpage to the PHP script

On my website, I have implemented a feature using JavaScript that dynamically changes the page content. Now, I am looking for a way to send this updated content to a PHP script. How can I achieve this functionality? ...

phpjavascripthtml

Utilize AJAX, PHP, and MySQL to create a search functionality that retrieves data from a MySQL database based on a dynamically generated variable

I'm in the process of creating a custom part builder and am working on implementing a search function within MySQL Database based on the Part Number generated. The goal is to display the price in a table cell. However, I'm encountering difficulty ...

phpjqueryhtmlmysqlajax