I'm making a simple menu, but I don't know why it is not properly aligned to the right when I'm using fonts other than serif.
Of course this is embedded into some other source code, so it is useless to just tell me "why are you using all those things to just make a list of right-aligned links ?"
<style type="text/css">
html, body {
overflow-x:visible;
}
body {
margin:0;
padding:0;
background:#111;
}
ul#menu {
margin-top: 30px;
padding: 0px;
list-style: none;
font-size: 1.1em;
clear: both;
float: right;
width: 150px;
padding-right:20px;
}
ul#menu li {
margin: 0;
padding: 0;
overflow: hidden;
float: right;
height:40px;
}
ul#menu a, ul#menu span {
padding: 10px 20px;
float: left;
text-decoration: none;
text-transform: none;
clear:none;
position:relative;
height: 20px;
line-height: 20px;
}
ul#menu a {
padding-right:20px;
border-bottom:0;
margin-right:-300px;
color: #a40800;
}
ul#menu span {
display:block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#menu li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
$("#menu li").each( function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
var width = $(this).find("a").outerWidth();//Find the width of the link
$(this).find("span, a").css({
'left' : '-'+width+'px',
'color' : '#a0c0f0',
'font-family' : 'serif'
});
}
);
});
</script>
</head>
<body>
<ul id="menu">
<li>
<a href="#item1">asdqwe</a>
</li>
<li>
<a href="#item2">asdqaesd</a>
</li>
<li>
<a href="#item3">xcvsd</a>
</li>
<li>
<a href="#item4">qweasd</a>
</li>
<li>
<a href="#item5">ddfgdfgrwe</a>
</li>
</body>
If you change 'font-family' : 'serif' to 'font-family' : 'Arial' (or any other font I guess), it is not aligned anymore.
Any clue/fix ?
Thanks in advance
Source : adaptation of this tutorial
EDIT after the first answer : Ok so I guess it solves it for Arial. The problem is that I'm using @font-face :
@font-face { font-family: 'QuicksandLight'; src: url('Quicksand_Light-webfont.eot'); src: url('Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'), url('Quicksand_Light-webfont.woff') format('woff'), url('Quicksand_Light-webfont.ttf') format('truetype'), url('Quicksand_Light-webfont.svg#QuicksandLight') format('svg'); font-weight: normal; font-style: normal; }
And now, adding font-family : 'QuicksandLight'; to the ul#menu doesn't fix the problem anymore.
What should be the next step ? Thanks anyway for your answer :)