I'm creating a header intended for mobile navigation. I decided to use a table, as this site has a responsive layout, and the last item in the table needs to have a dynamic width (and a table worked splendid for this).
However I have run into one last issue. For the first "home button" in the table (60x60), if I insert a 60x60 image into it, the height of the table increases from its set value of 60px, to something around 65~66px. When inspecting the table in a browser I cannot find what causes the extra height (no padding/margin/border/etc).
I've set up a fiddle that shows the behavior: http://jsfiddle.net/4QC8S/3/
HTML:
<div class="table">
<div class="myimg"><img src="http://i.imgur.com/oxRzF30.png"></div>
<div class="tablecell"><img src="twitter.png"></div>
<div class="tablecell"><img src="youtube.png"></div>
<div class="tablecell"><img src="apple.png"></div>
<div class="tablecell"><img src="email.png"></div>
</div>
CSS:
.table {
display:table;
margin-right:auto;
margin-left:auto;
width:100%;
height: 60px;
}
.tablecell {
display:table-cell;
text-align:center;
border: 1px solid black;
}
.myimg {
display:table-cell;
text-align:center;
border: 1px solid black;
width: 60px;
}
If you change the first HTML table cell to have an invalid image like the other cells, the table will return to a height of 60px. The second you give it a valid image with a height of 60px, the table height expands.
Any ideas? I've read some things about tables possibly handling images oddly. Are there any workarounds? Any ways that I can force the table height to remain at 60px? I've tried embedding a block div in the cell that contained the image, and I tried changing the img properties in CSS to display:block with no dice. Thanks in advance for your time