How do I get images to size properly in responsive design for mobile devices?

Question

I am working on a number of mobile web sites. I want them to look good on standard display devices 320 x 480 and on retina display devices 640 x 960. So I created the images to look good on a 640 x 960 display and I am using responsive css to size the images. I am making progress and have the header portion of the site very close: view mobile page

The only problem is there is 1 to 2 pixels of dead space to the right. Note: this is more obvious on a mobile device than it is in a resized web browser.

Here is the html:

<ul id="header">
    <li id="full-site-link"><a href="index.html"><img src="/images-mobile/btn_head-full.png" alt="btn_head-full" /></a></li>
    <li id="mobile-logo"><a href="/"><img src="/images-mobile/btn_head-logo.png" alt="btn_head-logo" /></a></li>
    <li id="mobile-search"><a href="/mobile/search"><img src="/images-mobile/btn_head-search.png" alt="btn_head-search" /></a></li>
</ul>

Here is the css:

#wrapper            { max-width: 480px; }

ul#header           { width: 100%; margin:0; padding:0; }
ul#header li        { display: inline; margin: 0; padding: 0; }
ul#header li a      { float:left; margin-bottom: -3px; padding:0; }

ul#header li#full-site-link a   { width: 21.71875%; }  /* 139 / 640 */
ul#header li#mobile-logo a      { width: 56.5625%;  }  /* 362 / 640 */
ul#header li#mobile-search a    { width: 21.71875%; }  /* 139 / 640 */

ul#header li a img      { max-width:100%; margin: 0; padding: 0; border: none; }

If I can just get rid of the nasty line to the right of the search, I will be in good shape.

Thanks!

Answer 1

You're going about this the wrong way, in my opinion. Your button images and logo should be transparent and the background gradient should be applied via CSS or a separate 1px × 139px image, depending on your requirements for browser support.

This will allow you to create a more fluid layout, not constrained by pixel widths, that would still work even if the screen had a strange resolution (like a portable games console).