Jquery Mobile - Using image as link - Blue line below image

Question

I'm attempting to use thumbnail images as buttons in JQM. I'm aware that JQM adds some formatting and styles.

I have the image buttons looking and behaving exactly as I want them except for one thing -- on my phone a blue underline is added to all images that are being used as links.

Some info:
-My phone is a Samsung Galaxy SII Skyrocket - Android version 2.3.5
-The blue line does not appear in the most recent versions of Firefox, Google Chrome, IE, or Safari.
-The functionality appears to work exactly as expected.

Here is the code:

<a data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true" href="/path/to/link"><img src="path_to_img" alt="Picture" /></a>  

Does anyone know why this blue line is appearing below the thumbnail/buttons?

EDIT:
Here is a screenshot of the blue line that I'm talking about:
http://i41.tinypic.com/2rhtvz8.png

Solution 1

Figured it out. This rule removes the blue line added by JQM:

.ui-li:last-child, .ui-li.ui-field-contain:last-child {
border-bottom: none !important;
}

Solution 2

Add this on your <a> tag:

style="text-decoration:none;"

Solution 3

Have you tried setting CSS like

border: 0;

specifically on the IMG tag?

EDIT: I just had a similar experience: A single white border added to an image. See this jsFiddle.

My workaround (commented out in the code example on jsFiddle) was to remove the border from the .ui-btn-inner class.

Comments

[user1091949]

I really don't think so. The only CSS that has been modified from the JQM CSS is removing the padding for the .ui-btn-inner class. I've tried with and without the CSS change and it didn't fix it -- blue line was still there.

[max]

have you tested eliminating any possible user agent styles? like a.ui-btn-inner img { border: none !important }

[user1091949]

I have tried that, and it did not work. I tried rules to remove the border from the image, and basically every CSS class that gets added by JQM. No luck on any.

[user1091949]

I tried a whole bunch of them (including the one you just posted) and none of them seemed to do the trick. I went through all of the CSS rules through Firebug and none of them seemed to do it.

[Ryan]

Updated my answer - maybe it helps.