3

I'm trying to get all of these images to line up in a table. For some reason it is adding extra space at the bottom of the cells. I've tried all of the different solutions that is suppose to fix this spacing issues.

What it's supposed to look like

What I'm Getting

Here's a look at my HTML5 code as well:

<!DOCTYPE html> <html>
<head>
    <title></title>
    <meta charset = "utf 8">
    <style>
        table{
            border-collapse : collapse;
            border-spacing : 0;
            border:0;
        }
        tr,td{ 
            border-collapse:collapse; 
            padding : 0; 
            border : 0;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td><img src="tableImages\ul.gif" alt ="1,1"></td>
            <td colspan = "2"><img src ="tableImages\top.gif" alt = "1,2"></td>
            <td><img src="tableImages\ur.gif"alt="2,2"></td>
        </tr>

        <tr>
            <td rowspan = "2"><img src="tableImages\left.gif"alt="2,1"></td>
            <td><img src="tableImages\1.gif"alt="2,1"></td>
            <td><img src="tableImages\2.gif"alt="2,1"></td>
            <td rowspan = "2"><img src="tableImages\right.gif"alt="2,1"></td>
        </tr>

        <tr>
            <td><img src="tableImages\3.gif"alt="2,1"></td>
            <td><img src="tableImages\4.gif"alt="2,1"></td>
        </tr>

        <tr>
            <td><img src="tableImages\ll.gif" alt ="1,1"></td>
            <td colspan = "2"><img src ="tableImages\bottom.gif" alt = "1,2"></td>
            <td><img src="tableImages\lr.gif"alt="2,2"></td>
        </tr>
    </table>
</body> </html>

I've come to the realization that the problem lies within HTML5, because if I remove <!DOCTYPE html> (meaning that the browser won't read it in 5) I don't have this problem.

If anyone could help me, Thank you very much!

Michel Floyd
  • 18,793
  • 4
  • 24
  • 39
Brian Meek
  • 33
  • 2
  • You have lots of HTML errors in your code. Pass it through a validator such as https://validator.w3.org/ and see what it comes up with. Notice there is also a CSS validator linked on that page. – kojow7 Nov 03 '15 at 18:23
  • I understand that this isn't going to be the prettiest code tha's 100% up to the W3 standards. I'm just doing a lab work for school. – Brian Meek Nov 04 '15 at 04:18
  • It's not pretty code I was recommending. It is correct code. If your code is not correct it can lead to various issues and things not showing correctly in different browsers. If you ever have trouble with your code working your first step is to fix any errors in it. In this case that wasn't causing your issues, but fixing your code now can help you prevent any future issues from occurring. Also, if the person marking your labs has a different browser even though your browser has no issue with the errors theirs may well have problems. – kojow7 Nov 04 '15 at 17:07

1 Answers1

1

So after some fiddling around to reproduce the problem, i found what is wrong (here a JSFiddle of the problem).

an image is by default displayed as a inline-block, this means that the height is calculated according to the font-size. It is expecting a font, so it has a font-size by default (see this answer for more info). There 2 ways of fixing this.

Make the image display as a block-element

Simply change the property display to block

img {
   display: block;
}

JSFiddle

Explicity note that there is no font inside the cell

Simply change the font-size to 0

td {
   font-size: 0;
}

JSFiddle

Note that i used the first <td> only as example, this should work with all of them

Community
  • 1
  • 1
nkmol
  • 8,025
  • 3
  • 30
  • 51
  • 1
    thank you very much. your solution worked perfectly. I don't think i would have ever come to that conclusion, so thank you again very much – Brian Meek Nov 04 '15 at 04:20