What could be the reason for the presence of three pixels of white space below this particular table

My table is supposed to have a fixed height of 146px, but there seems to be an extra row of three pixels at the bottom. I've tried various methods to remove any unwanted spacing or padding, but nothing has worked so far. The only solution I found was changing the DOCTYPE from <!doctype html> to 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Can anyone help me figure out why the table is not displaying at the correct height (it should match the height of the two images inside)?

<table style="width: 100%;padding: 0;margin: 0;border: 0;border-collapse: collapse;" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding: 0 0px 0 0;margin: 0;border: 0;" width="50%" bgcolor="#000000"></td>
    <td style="padding: 0 0px 0 0;margin: 0;border: 0;" width="263"><img src="images/application_logo.jpg" width="263" height="146" border="0"></td>
    <td style="padding: 0 0px 0 0;margin: 0;border: 0;" width="443" bgcolor="#000000">

      <table width="443" cellpadding="0" cellspacing="0" border="0">

        <tr>
          <td valign="middle">

            <font class="bodyfont" style="font-weight: bold; color: #FFFFFF">APPLICATION...</font><br>
            <font class="bodyfont" style="font-weight: bold; color: #BFDFFF">SAMPLE</font>

          </td>
        </tr>

      </table>

    </td>
    <td style="padding: 0 0px 0 0;margin: 0;border: 0;" width="274"><img src="images/application_fern.jpg" width="274" height="146" border="0"></td>
    <td style="padding: 0 0px 0 0;margin: 0;border: 0;" width="50%" background="images/application_right_bg.jpg"></td>
  </tr>
</table>

htmlcss

Answer №1

To resolve the problem, simply add the following CSS code to your stylesheet.

img {
  display: block;
}

If you prefer, you can modify it to use a class (.) or an ID (#) instead of directly targeting the tag (img).

This adjustment should address the issue with excess whitespace on your page.

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

Is receiving an error message about a "stray start tag footer" in your HTML validator?

I am perplexed by the error message I am receiving: Stray start tag footer. All I have included here is the tags: <!doctype html> <head> <title>title</title> <meta charset="UTF-8"> <meta name="keywords" cont ...

htmlcssvalidation

How come my navigation item isn't positioned at the top of the window?

I'm facing an issue while trying to add a navbar with a navbar-brand to my website. It seems like the image I have included is causing the nav-items to not align properly at the top of the window. Here is a snapshot of the problem: https://i.sstatic.n ...

htmlcssbootstrap-4

What is the best way to reference a div link from a different PHP file?

Struggling to access a page div from another php file, I've tried calling it using (found online) admin.php#changepass Here's an example of my HTML code: <div id="changepass" class="w3-container city" style="display:none"> <form name ...

javascriptphpjqueryhtmlcss

Guide on creating my inaugural HTML embeddable widget?

A client recently requested me to create a JavaScript (MooTools)/HTML/CSS/PHP based game as a deployable widget. This will be my first time developing a widget, so I am seeking advice and insights to help me navigate any potential challenges from experie ...

phpjavascripthtmlcsswidget

Issue with toggling JS checkboxes selection

Seeking assistance in expanding my knowledge of Javascript. I have a form with checkboxes and a JavaScript function that allows toggling between selecting and deselecting all the boxes. Everything is functioning as intended so far. The challenge arises f ...

javascripthtmlforms

Alert: The index named "namaunit" is not defined

As a beginner in programming, I am facing an issue where my code is not working for a particular input form. Oddly enough, the same code works perfectly fine for another input form with similar structure. It's puzzling to me why it's not function ...

phphtmlmysql

Adjust the size of the buttons based on the width of the screen

I have successfully implemented a dropdown menu with both text and an icon. However, I am now faced with the challenge of removing the text while retaining the icon when the screen width is reduced to a maximum of 768px. Is it possible to modify the conten ...

htmlcsswidthscreen-size

Relocate the preview division below the button in the Kartik File Input Widget

There are two input file buttons that allow users to upload an image on each button. Upon selecting an image, a preview of the image will be displayed above the button. The current layout is shown here: When images of different sizes are uploaded, the but ...

javascriptjquerycssfile-uploadwidget

The default margin of an HTML element is set to fill the width of its containing div and cannot be overridden

As a budding web developer, I'm encountering a basic issue that has me scratching my head. Any assistance would be highly appreciated: Regardless of the width I specify for elements within a particular div container, both Safari and Chrome seem to au ...

htmlcsspositionmarginmargins

Exploring the concept of overflow and minmax behavior in CSS grid

Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS grid-template-columns: repeat(16, minmax(0,1fr)); Within the element called container, there are two main elements - summary-wrapper and stats-wrapper The gri ...

htmlcsscss-grid

How to enable drag-and-drop functionality for an iframe?

I've successfully made a chat widget draggable using react-draggable. However, the chat widget is also consumed by an iframe created entirely with HTML. I need the iframe to be draggable as well, but react-draggable doesn't support this. Are ther ...

javascripthtmljqueryreactjsiframe

Tips for creating a dynamic system to continuously add more HTML tables in PHP

I am working with an HTML table where the data is retrieved from a database. I need to add new rows to enter additional data, but the numbering does not continue from the last number. My question is how can I increase the numbering in the table. Please ref ...

javascriptphpjqueryhtml

Shuffle contents of a Div randomly

I'm currently in the process of developing a new website and I need to randomly move the news feed. To achieve this, I have created an array containing the list of news items. The array is then shuffled and placed within the news feed section. Althou ...

javascriptjqueryhtmlcss

Exploring jQuery: Choosing all li elements starting from a specific index to the end

Is there a way to select the last item, li:eq('+(lastItemIndex)+')', and all subsequent items until the end? Check out this JSFiddle demo for an example of changing elements in li from 3 onwards. ...

javascriptjqueryhtmljquery-selectors

Leveraging JQueryUI for an audio Seek feature, and dynamically connecting a fresh slider to the <audio> element whenever a song is swapped out

Thanks for taking a look at my question. The code snippet can be found HERE. I'm in the process of creating an audio player to handle multiple songs on a single page using JQueryUI Slider and HTML5 Audio, with one Audio element and several sliders. ...

javascriptjqueryhtmljquery-uihtml5-audio

Enhance the functionality of the Bootstrap navbar by enabling the slideUp and slideDown effects

I can't get jQuery's slideUp and slideDown methods to smoothly animate the Bootstrap navbar. When I tried using the slideUp method, the navbar only slid up a little before disappearing completely, and the same issue occurred with the slideDown me ...

javascriptjqueryhtmlcsstwitter-bootstrap

The output from the Compute function is not showing up in the TextBox as expected

I'm currently working on an HTML page that contains two textboxes and a button. I've created a Compute function to display the result in one of the textboxes, but unfortunately, it's not functioning as expected. No alerts are appearing on th ...

javascripthtml

The class is failing to be applied to the parent div that holds an id starting with the letter x

I have been attempting to assign a class to the parent container when the child element has the 'hidden' class. If not, then a different class should be added. function tagMissions() { if ($('span[id^="mission_participant_new"]').h ...

javascriptjqueryhtmlcss

Retrieve the next element in android studio that shares the same class name as jsoup

i am trying to access the next element with the same class name in HTML. The HTML tag structure looks like this: HTML: <section class="post"> <img class="pecintakomik" src="/images/top/op.jpg" alt="pecintakomik.com" /> <div class=" ...

javaandroidhtmljsoup

Ways to expand a Bootstrap input field by clicking on it:

I have successfully created a search bar in my navbar, but I am looking to add functionality that allows the input field to expand to its normal size when clicked. I believe this will require some JavaScript implementation, however, I am unsure how to proc ...

javascripthtmltwitter-bootstrap