Hi!
I'm in the process of building a mobile website, and today I spent hours trying to solve a problem.
At the top of the homepage I have a set of image buttons. It's very important that they all rescale up and down according to the viewframe of the mobile device. Although I'm new to CSS, I found a solution that seems to work ok, except for one thing: it leaves some small space gaps at the top of the buttons.
This happens on my desktop computer, under Opera Mobile Emulator AND Chrome. I even spotted the problem under FireFox, although not as frequent. But it does happen in FireFox too!
I built a small testing page so you can see what I'm talking about.
There you can see 20 images, all next to each other. Please note that they all use the same image file. This PNG image has a 1px black border around it and is a png image that is 150 x 50px and named test.png
Now, the problem... some of the images seem to be shrinked in their height, leaving a space gap at their top. Through that gap, you can see the yellow background of the page.
If I open the page below in Chrome and resize the browser window, both horizontally, and vertically and I can notice the gaps at the top:
Remember, the 20 images use the same graphic file. Therefore, I'm assuming that the browser should rescale them all at the same height, not at different heights.
The CSS and test html code I'm using is shown below. Its main purpose is to rescale the images for various mobile viewports. The images should always cover 100% of the viewport (horizontally), and rescale their height accordingly.
If you have any idea on how I can eliminate those gaps, I would appreciate if you could please let me know. I would very much prefer to stick to this CSS code, if possible. Thank you very much!
Alex
------------------ CSS CODE ------------------
<html>
<head>
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=1">
<style type="text/css">
body { background-color: yellow; margin: 0px; }
div.table { width: 100%; display: table; }
div.tr { display: table-row; }
div.td { display: table-cell; border: 0px solid yellow; }
img { width:100%; }
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
<div class="td"><img src="test.png" style="img"></div>
</div>
</div>
</body>
</html>
[edited by: not2easy at 10:43 pm (utc) on Jan 24, 2015]
[edit reason] Edited to comply with Charter [/edit]
