Ok, would someone help me figure out why the "test" li in the following code isn't visible? I inspected the live dom and the elements do seem to be getting processed:
<!DOCTYPE HTML>
<html>
<head>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script>
$(document).ready(function(){
$('<div data-role="content" class="content"><ul data-role="listview" data-inset="true"><li><a href="#im?at=animals">test</a></li></ul></div>').appendTo("#home").page();
$.mobile.changePage("#home", {transition: "none"});
});
</script>
</head>
<body>
<div id="home" data-role="page">
</div>
</body>
</html>
Thanks in advance.
The element below has
display
property set tonone
and it hides its siblings:The CSS rule: