Image in header div throwing off buttons (jquery mobile)
SOLVED - wasn't linking to the most recent release of jQuery's js files. Silly me!
I know what is causing this problem, but I don't know how to fix it or why it is doing this.
On my mobile site m.incrediblebats.com I have an image in the header. The problem is when I use the native Android browser(haven't tried on other browser apps yet) the button I touch does go to the right page, but the highlight that is supposed to be around the button when you touch it is on the button below it.
Here are the methods I have tried with the same result:
- img in header div
- div wrapped img header div
- div with background-img and height styles applied in css file
For the last method if I set the height to something smaller than my image size like 10px I don't have this issue.
I'm thinking that the header div can only be so big? Maybe it doesn't like height to exceed a certain size?
Anyway here is my current code for the body section.
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<img src="images/header.jpg" alt="Incredible Bats" />
</div>
<div data-role="content"> <a href="about.html" data-role="button" data-theme="a" data-transition="fade">开发者_如何学CAbout Us</a>
<a href="batshows.html" data-role="button" data-theme="a">Live Bat Shows</a>
<a href="ourbats.html" data-role="button" data-theme="a">Our Bats</a>
<a href="contact.html" data-role="button" data-theme="a">Contact Information</a>
<img src="images/bg.gif" id="bg-img" alt="bats emerging" />
</div>
<div class="footer">
<p>Copyright © 1998-2011 AFTAGC | <a href="www.incrediblebats.com/">Full Site</a>
</p>
</div>
</div>
</body>
IMO I would not load a image if you can do it with text for a mobile site. This is just an example of what you could do
Live Example:
- http://jsfiddle.net/G4KLe/14/
HTML:
<div id="image">
<img src="http://m.incrediblebats.com/images/header.jpg" alt="Incredible Bats"/>
</div>
<br />
<div id="css">
<div id="ib">INCREDIBLE BATS</div>
</div>
CSS:
#ib {
font-size:30px;
font-weight:bolder;
font-family:"Times New Roman",Georgia,Serif;
font:arial, helvetica;
color: #7b8ec9;
background-color:#000;
text-align: center;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
加载中,请稍侯......
精彩评论