I wanted to raise the following issue with you. The following code looks fine on most browsers, but the alignment of the text is strange on the latest version of Chrome on a PC. ("Phone" is aligned under "Mr Smith", not under "Name".) It is fine on Chrome on a Mac, and on IE on a PC.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<style type="text/css">
.detail { display: block; }
.detail .fieldname { font-weight: bold; float: left; }
</style>
<div class='detail'>
<div class='fieldname'>Name:</div><div>Mr Smith</div>
<div class='fieldname'>Phone:</div><div>xxx-xxxx</div>
</div>
</body>
</html>
It seems to be an interplay of the bold formatting and jquery mobile - if you remove either of these things, it works.
I have a workaround - you can replace font-weight: bold with font-weight: 600.
Am I doing something wrong or is this a bug?
Thanks.
Arty