Jquery mobile remove formatting on image

Question

I use jQuery mobile and have an image at the top of my site for linking to the home page.

However, setting a link on this image forces Jquery mobile to format the image on the button.

I looked around but can't find a way to stop this. Does anyone have any ideas?

Example with a link: http://jsfiddle.net/wDYt6/

Example without a link: http://jsfiddle.net/ewn7T/

Answer 1

Add height to your data-role div header and remove the BR.

<div data-role="page" id="page1" data-theme="a"> <div data-role="header" style="background-color:#414141; background-image:none;height:80px"> <a href="index.html"><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" width="100%" id="headerImage"/></a> </div> </div> 

When you add a link around the image, Jquery mobile adds several classes (ui-btn-left ui-btn ui-btn-corner-all ui-shadow ui-btn-up-a) to this anchor tag.

Answer 2

Found the best answer here: How can I stop jQuery mobile to apply styles to my specific form elements

jQuery Mobile will ignore elements whose data role attributes are set to none. Therefore, you can simply add these attributes to your markup:

 <a href="/" data-role="none"><img src=""></a> 

Answer 3

I use data-role="none" , which worked for me!

Answer 4

Just replace data-role="header" with something else.