Cant have a link on an image

What steps will reproduce the problem?
1.
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>QH</title>
        <script src="http://cubiq.org/dropbox/iscroll/iscroll.js?v=3.0a3" 
type="text/javascript"></script>
        <meta name="viewport" content="width=320; initial-scale=1.0; 
maximum-scale=1.0; user-scalable=0;"/>
        <style type="text/css" media="screen">@import 
"css/main.css";</style>
        <script type="application/x-javascript" 
src="js/main.js"></script>

        <style type="text/css" media="all"> 

* {
     -webkit-touch-callout: none;
}

body {
    padding:0;
    margin:0;
    font-size:12px;
    -webkit-user-select:none;
    -webkit-touch-callout: none;
}

body > ul > li {
    font-size: 14px;
}

body > ul > li > a {
    padding-left: 5px;
    padding-right: 40px;
    min-height: 34px;
}

h2 {
    margin: 10px;
    color: slateblue;
}

p {
    margin: 5px;
}

div {
    text-align:left;
}

.bigger {
    font-size:1.2em;
}

#header {
    width:320px;
    padding:10px 0;
}

#wrapper {
    position:relative;  /* needed */
    z-index:1;          /* needed and important */
    width:320px;
    height:380px;       /* needed */
    overflow:hidden;    /* suggested */
}

#scroller {
/*  -webkit-touch-callout:none;*/
/*  -webkit-tap-highlight-color:rgba(0,0,0,0);*/
/*  position:absolute;  /* optional. Seems to work with absolute, 
relative and without it */
/*  top:0;              /* optional */
/*  -webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);*/

    float:left;
    width:320px;
    padding:0;
    color:#FFFFFF
}

.col {
    width:300px;
    float:left;
    padding:0 3px 5px 3px;
}

#scroller strong {
    font-size:200%;
}

</style> 

<script type="text/javascript"> 
var myScroll;

function loaded() {
    setTimeout( function() {
        document.addEventListener('touchmove', function(e){ 
e.preventDefault(); }, false);
        myScroll = new iScroll(document.getElementById('scroller'));
    }, 100);
}

window.addEventListener('load', loaded, true);
</script> 
</head>
<body>

    <div id="header" class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
        <a class="button" href="#searchForm">Search</a>
    </div>
<ul title="QH" selected="true">
<div id="wrapper"> 
    <div id="scroller">
        <div class="col"> 
            <a href="hello.php"><img 
src="upload/43307eb0bbb15409d35de50e41b5274c37875b07.jpg" 
width="100" height="100"></a>
        </div> 

    </div> 
</div> 

</ul>

<form id="searchForm" name="searchForm" class="dialog" method="get" 
action="search.php">
        <fieldset>
            <h1>Music Search</h1>
            <a class="button leftButton" type="cancel">Cancel</a>
            <label>Song:</label>
            <input type="text" name="songsearch"/>
            <input type="submit" name="submit" class="button blueButton" 
value="Search">
        </fieldset>
</form> 
<div id="footer">Footer</div> 

        <?
/*print $_GET['uid'];*/
?>
        </div>
    </body>
</html>

2. Load the page in iPhone
3. click image and instead of sliding to the next window, it show the page 
and no toolbar etc.

What is the expected output? What do you see instead?
Just like a normal link when you want it to slide to the next page

What version of the product are you using? On what operating system?

Please provide any additional information below.
Original issue reported on code.google.com by russell....@gmail.com on 18 Feb 2010 at 11:46
olbers / iui

Cant have a link on an image #225
