Global fix alters the problem slightly, but Safari still displays the link tag lower.
The link spacing is in fact related to the positioning of the elements preceding it.
I've now gone to work, where I've tweaked for windows. So it may look wildly off on a mac. Any help there would be great.
The code below is ok on IE6, 7, Firefox and Opera, but needs fiddling for Safari Win.
I've bundled up the css & html into one file, and deleted 7/8 of the html ... : )
cheers
CT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>shortchange</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{
margin: 0px;
padding: 0px;
}
body {background:#444; padding:36px 0 0 0; font-size:13px}
.row {margin:0 0 18px 36px; float:left; clear:both}
.node {margin:0 12px 0 0; float:left; height:4.8em; width:6.4em;}
.hex, .mov {position:relative;
font:bold 1.5em/0.3em courier new, bitstream vera sans mono, monospace; letter-spacing:-0.3em; }
.hex {z-index:12; color:black;}
.mov {z-index:11; color:#b13; top:-1.9em}
/* .mov top is too big for Safari WIN, and not checked on mac */
/* NB, both classes visible for testing: .mov hidden during script application */
a.hexname {position:relative; top:-3.7em; font:0.76em arial verdana, sans-serif; color:white; text-decoration:none; overflow:visible;}
/* top dimension is for Safari, but is not currently tested on mac */
a.hexname:hover {background:black;}
a.hexname {position:relative; top:-3.7em; #}
/* for not-Safari browsers: not tested on mac */
/* javascript colours: .a, .b {color:#e10} moving: {color:#d02} */
</style>
</head><body>
<div class="row eight">
<div class="node _81">
<div class="hex A A A A A A" id="h01">
<p class="a8 _6">-------<p />
<p class="a8 _5">-------<p />
<p class="a8 _4">-------<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M M M M" id="m01">
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Heaven</a></div>
<div class="node _82">
<div class="hex A A A A B B" id="h34">
<p class="b8 _6">--- ---<p />
<p class="b8 _5">--- ---<p />
<p class="a8 _4">-------<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M M N N" id="m34">
<p class="m">--- ---<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Great Power</a></div>
<div class="node _83">
<div class="hex A A A B A B" id="h05">
<p class="b8 _6">--- ---<p />
<p class="a8 _5">-------<p />
<p class="b8 _4">--- ---<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M N M N" id="m05">
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Waiting</a></div>
<div class="node _84">
<div class="hex A A A B B A" id="h26">
<p class="a8 _6">-------<p />
<p class="b8 _5">--- ---<p />
<p class="b8 _4">--- ---<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M N N M" id="m26">
<p class="m">-------<p />
<p class="m">--- ---<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Great Increment</a></div>
<div class="node _85">
<div class="hex A A A B B B" id="h11">
<p class="b8 _6">--- ---<p />
<p class="b8 _5">--- ---<p />
<p class="b8 _4">--- ---<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M N N N" id="m11">
<p class="m">--- ---<p />
<p class="m">--- ---<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Peace</a></div>
<div class="node _86">
<div class="hex A A A B A A" id="h09">
<p class="a8 _6">-------<p />
<p class="a8 _5">-------<p />
<p class="b8 _4">--- ---<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M N M M" id="m09">
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Little Increment</a></div>
<div class="node _87">
<div class="hex A A A A B A" id="h14">
<p class="a8 _6">-------<p />
<p class="b8 _5">--- ---<p />
<p class="a8 _4">-------<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M M N M" id="m14">
<p class="m">-------<p />
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Great Possession</a></div>
<div class="node _88">
<div class="hex A A A A A B" id="h43">
<p class="b8 _6">--- ---<p />
<p class="a8 _5">-------<p />
<p class="a8 _4">-------<p />
<p class="a8 _3">-------<p />
<p class="a8 _2">-------<p />
<p class="a8 _1">-------<p /></div>
<div class="mov M M M M M N" id="m43">
<p class="m">--- ---<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p />
<p class="m">-------<p /></div>
<a class="hexname" href="">Resolution</a></div>
</div><!-- row eight -->
</body></html>
13
