On a mac, the ':after' styling works fine in safari and opera; however, firefox will not honour 'position:relative; top:0.4em'; nor 'margin-top:0.4em' (nor padding) and the ':after' text is 0.4em above where it ought to be.
There may also be problems with windows browsers, which I can test during the work week, although I've usually found that each browser is pretty consistent across the two platforms.
Any help appreciated. Here's the essential code:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>FFQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
* {
margin:0px; border:0px; padding:0px; list-style:none }
html {
overflow:hidden }
body {
font:normal 16px 'bitstream vera sans',verdana,geneva,sans-serif;
background:#161a1f }
#HEX1 {
position:absolute; right:1.8em; top:2.2em; z-index:22; color:white }
.hex {
width:2.9em; height:2.8em; float:right;
font:bold 1.64em/0.36em 'courier new', 'nimbus mono l',
'bitstream vera sans mono', 'lucida console', monospace }
.L:after {
position:relative; top:0.4em; margin:0 0 0 -0.4em;
font-size:80%; font-weight:normal; color:#f11;
content: " ." }
.hexnum0 {
position:relative; top:0.90em; margin-left:1.95em;
font:bold 0.40em verdana,'bitstream vera sans', sans-serif }
/* safari hacks */
body:first-of-type .hex {
height:2.95em;
font-size:1.58em; line-height:0.24em }
</style>
<script type="text/javascript>
//
</script>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="HEX1">
<p class="hex" id="H01">
<span class="L _6">___</span><br>
<span class="L _5">___</span><br>
<span class="L _4">___</span><br>
<span class="L _3">___</span><br>
<span class="L _2">___</span><br>
<span class="L _1">___</span><br>
<span class="hexnum0" id="N01">1</span>
</p>
</div></body></html>
