This repository was archived by the owner on Oct 8, 2021. It is now read-only.
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
IE7 : in some cases, li element text does not show until mouseover #2058
Description
IE7 seems to have a problem with list items text: in some cases the text only shows if one moves the mouse over the elements.
The fiddle shows 2 li's appended after pagecreate, and then 2 more li's are created after a keyup event.
The last 2 li's have the problem: the text only appears when one moves the mouse over the li elements.
I have managed to create a minimum of code for the fiddle from my app: http://jsfiddle.net/b7czf/1
Note:
- removing the anchor markup in the li, allows the text to be displayed.
Hope someone has a brainwave, as, although the web app I have made is for mobile, it is also viewed internally with the IE 7 that is used at the company: I hate having to explain one just has to move the mouse over the elements ...
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#appPage').live('pagecreate',function(){
$('#listView').append('<li><a href="">one</a></li><li><a href="">one</a></li>');
$('#listView').listview('refresh');
$('#search').live('keyup', function(event){
$('#listView').append('<li><a href="">one</a></li><li><a href="">one</a></li>');
$('#listView').listview('refresh');
});
});
});
</script>
</head>
<body>
<div data-role="page" id="appPage" >
<div data-role="content">
Shows on start, 2 li items.<p>
Input something in search, and 2 more li are appended<p>
The second pair of li text do not show in IE7, only after moving mouse over will the text appear<p>
<center>
<input type="search" name="search" id="search" data-linkType="search">
</center>
<ul data-role="listview" data-inset="true" id="listView">
<!-- listview area -->
</ul>
</div>
</div>
</body>
</html>