white space around image buttons html

StackOverflow https://stackoverflow.com/questions/17961351

سؤال

I have this webpage with a fixed navigation bar at the botton; I am using image buttons. White space continues to appear around the buttons and I cannot eliminate it: 

<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
    </script>
    <style>
        img {
        border: none;
        display: block;
        float:left;
        }
    </style>
</head>
<body>   
<div id="ider" data-position="fixed" data-role="navbar" class="ui-navbar" role="navigation">
    <ul class="ui-grid-b">
        <li class="ui-block-a">
            <a href="index.html"><img style="width:100%; height:100%" src="icon1.png"></a>
        </li>
        <li class="ui-block-b">
            <a href="index.html"><img style="width:100%; height:100%" src="icon2.png"></a>
        </li>
        <li class="ui-block-c">
            <a href="index.html"><img style="width:100%; height:100%" src="icon3.png"></a>
        </li>
</ul>
</div>       
</body>

Here are the images: enter image description here

enter image description here

enter image description here

هل كانت مفيدة؟

المحلول

Okay, so I'm not entirely sure on your question, but I did find the problem with your code causing the white space.

The problem:

The white space was caused by the script: http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js

What it's doing is, it's creating two different span tags inside the active links around the images. And that's the white space!

<span class="ui-btn-inner"><span class="ui-btn-text"><img style="width:100%; height:100%" src="icon2.png"></span></span>

You can view this for yourself by right-clicking on the webpage in Chrome and clicking "Inspect Element." These spans are causing the image to appear to have a white space around it. (I assume the active link is of the span, not the link, so it appears the image itself has white space.)

The solution:

You have to remove http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js if you want this to display as intended on non-mobile devices. There are various ways to try and detect whether or not a mobile browser is being used.

If you must run that script, a possible workaround may be to have a div with a background color that matches the images. It may be possible to manipulate the spans with CSS, though having bother scripts running may cause problems (and possibly not even work as intended) as well.

StackOverflow question regarding mobile-only script loading.

نصائح أخرى

Use CSS to resolve it:

img{
border: none;
}

Image is treated as a character. Simply set the CSS property display to block to properly fill up 100% width/height.

img { display: block; }

Use this css to resolve this error - 

img{
   display: block;
   float:left;
 }
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top