Very simple table with images - height not 'shrinking'.

Hello,

Please see the code below - it's relatively simple (although from what I've learnt from previous questions this doesn't appear to make a difference with web standards!). The width of things is working perfectly, although the same can't be said of the height... The height is funnily enough the exact height of what a line of text would be, yet there isn't even a breaking space present - let alone a sentence. So, where is this height coming from?

Thanks,
Uni
LVL 3
Unimatrix_001Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Umar Topia.Net Full Stack DeveloperCommented:
try taking "DIV" inside the td. Then give dimensions to that div as well as image.
Unimatrix_001Author Commented:
try taking "DIV" inside the td. Then give dimensions to that div as well  as image.

I'm not understanding how using a DIV would help?
Unimatrix_001Author Commented:
Code added... Whoops.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Unimatrix_001Author Commented:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

	<head>
		<title>Logo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style>
			body{
				border:0px;
				padding:5px;
				margin:0px;
			}
			table{
				padding:0px;
				border:0px;
				border-collapse:collapse; /*For the benefit of IE.*/
				border-spacing:0px;
				empty-cells:show;
			}
			tr{
				padding:0px;
				border:0px;
			}
			td{
				padding:0px;
				border:0px;
			}
		</style>
	</head>
	
	<body>
	
		<table style="background-color:black;" width="100%">
			<tr>
				<td style="background-color:red;"><img src="../transparentpixel.png" width="5px" height="5px"></img></td>
				<td style="background-color:blue;"><img src="../transparentpixel.png" width="20px" height="5px"></img></td>
				<td style="background-color:green;"><img src="../transparentpixel.png" height="5px"></img></td>
				<td style="background-color:blue;"><img src="../transparentpixel.png" width="20px" height="5px"></img></td>
				<td style="background-color:red;"><img src="../transparentpixel.png" width="5px" height="5px"></img></td>
				<td style="width:100%"></td>
			</tr>
		</table>
		
	</body>	
	
</html>

Open in new window

HicanCommented:
What exactly is your question, because I can't seem to get it? Do you mean why this table has the height it currently has / gets? The height it gives is the height that comes from the content sentence. I think by default it gets a 12px font-size. Therefore the table (or other element) it is in, will get a height which matches the 12px font-size. And if one part 'expands' other 'matching' parts will do the same.
Unimatrix_001Author Commented:
Do you mean why this table has the height it currently has / gets?

Yes.

The height it gives is the height that comes from the content sentence.

That's the thing, there isn't any content other than a stretched image in each cell.


Thanks,
Uni
HicanCommented:
Ah, with this code I better understand it :) I used / looked at your code from your previous post. You now want to know where the height comes from in the tables / td where you didn't even specify a height... if I am not mistaken. Well, the following applies:

If you don't specify the font-size then the height will be whatever the font height is (this can vary from browser to browser). Therefore it is smart to always specify a font-size, even though it isn't advisable. Next to that the line-height property is also from influence on the height of the table / cells. I hope this information helps :)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HicanCommented:
Sorry for the spam :) But try this for example:


td{
                                padding:0px;
                                border:0px;
																line-height: 0px;
                        }

Open in new window

Unimatrix_001Author Commented:
Ah, with this code I better understand it :) I used / looked at your  code from your previous post.

Yeah, very sorry - seems to be happening a little too often not clicking "attach code" - it'd be nice if they stop changing things like that.

If you don't specify the font-size then the height will be  whatever the font height is (this can vary from browser to browser).  Therefore it is smart to always specify a font-size, even though it  isn't advisable.

Wonderful. :) I've just set the body to have a font size of 0px - from there I'll just specify the font size where it is needed. Why exactly isn't it advisable?

Thanks,
Uni
Unimatrix_001Author Commented:
Brilliant. :)
Unimatrix_001Author Commented:
But try this for example:

Yep, that's working a treat also. :)
HicanCommented:
Glad this helped :)

Why exactly isn't it advisable?
I ment here that it isn't advisable to set it for every object / element. It's better to specify it on a general place, like you did on the body 'element' and if you need different settings on other elements then you specify it on those elements. Hope it is clear what I try to say with this :) Check out the 'best practices' from W3C, it says a thing or two about this subject as well.
Unimatrix_001Author Commented:
Hope it is clear what I try to say with this :)
Crystal. Thank you. :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.