Geek asks and answers

JQuery misalignment when using font-face

I am making a simple menu, but I do not know why it does not align correctly on the right when I use fonts other than serifs.

Of course, this is embedded in some other source code, so it’s useless to just tell me: “Why are you using all these things to just make a list of right-aligned?”

  

    <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 that I assume), it is no longer aligned.

Any key / fix?

Thanks in advance

Source: adaptation of this tutorial

EDIT after the first answer: Okay, so I think he solves this for Arial. The problem is that I am 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') ('woff'), url ('Quicksand_Light-webfont.ttf') ('truetype'), url ('Quicksand_Light-webfont.svg # QuicksandLight') format ('svg'); font-weight: normal; font-style: normal; }

, : "QuicksandLight"; ul # .

? :)

+3
1

, outerWidth(), , .

, .css() outerWidth(), , , Javascript , CSS.

@font-face , jQuery. jQuery $(window).load $(document).ready, , script.

+1

More articles:


All Articles