Geek Answers Handbook

JQuery Mobile - Using the image as a link - The blue line below the image

I am trying to use thumbnails as buttons in JQM. I know that JQM adds some formatting and styles.

I have image buttons that look and behave exactly the way I want them, except for one - on my phone a blue underline is added to all images that are used as links.

Some information:
-My phone - Samsung Galaxy SII Skyrocket - version for Android 2.3.5
The blue line does not appear in recent versions of Firefox, Google Chrome, IE, or Safari.
- Functionality works 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 appears under the thumbnails / buttons?

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

+1
jquery formatting image mobile hyperlink
source share
6 answers

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; }
+3
source share

You tried to set CSS as

 border: 0;

in particular in the IMG tag?

EDIT : I just had the same experience: added one white frame. See jsFiddle .

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

+1
source share

Add this to your <a> tag:

style="text-decoration:none;"

+1
source share

Could there be a user-agent style sheet property that is not standardized?

0
source share

I saw this question and had to stop to give the correct answer, and relieved the pain that I went over a year ago trying to find a standard way to resolve CSS formatting conflicts with JQM styles. I hope this saves you all from some of the hair that I lost, and then figured it out.

The solution lies in CSS specificity. All you have to do with any formatting conflict in JQM is to first apply the identifier to the element that you want to override JQM formatting with your own CSS.

Then, in your own CSS, indicate that the class applies to the id container.

 #img_button_1 .ui-btn-inner {border: none !important;}

It is so simple.

Another important thing, and this is that the loading order of external CSS files is significant, and you will want to load your CSS after JQM CSS.

I developed a working Ryans jsFiddle example to show a slight difference with its solution, which was at least on the right track here in this post.

http://jsfiddle.net/Z8Xnx/14/

Another advantage of this approach is that you don’t have to change JQM CSS at all and leave it alone. I have successfully used this approach to resolve every JQM CSS conflict I encountered, starting with clarifying this specification requirements issue. Hope this helps everyone with the easy solution to their JQM-style puzzles.

** UPDATE **

It was noted that this method does not work with the latest version of JQM (1.3.0b1), and this is not true. I researched and discovered that this is a problem with embedding this version of JQM in jsFiddle. To prove this, I provided an example page in my own space with the same code as in the jsFiddle example. This means that in my writing, you really cannot trust anything in jsFiddle using the latest version of JQM from the options. Just a head, and you can find a working implementation in ...

jQuery Mobile CSS Override Example

0
source share

First of all, with all the JQM style issues, set the data role to "none".

 <a data-role="none" href="/path/to/link"><img src="path_to_img" alt="Picture" /></a>

This should prevent JQM from trying to add most pre-formatted styles to the element, either fix your problem or allow you to erase it from scratch and avoid

0
source share

More articles:


All Articles