Tag Archives: chrome

Alignment problem with jquerymobile and bold text – only on PC with Chrome

The following html and css works fine on most browsers, but try it on Chrome 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>xxxx-xxxx</div>
	</div>
</body>
</html>

There is an alignment problem on Chrome on a PC.  Not on Chrome on a Mac, and not on IE on a PC – just Chrome on a PC.  You’ll see the word Phone starts under Mr Smith, instead of under Name.  (I am using the latest version of Chrome as I write this, 23.0.1271.64 m.)

This seems to be a strange interplay between the the bold text and jquery mobile. If you switch off either of these things, it works fine.

In fact there is a simple work-around: change font-weight: bold to font-weight: 600.  It won’t be quite as bold (which is weight 700), but hopefully it will be close enough.

All very mysterious!