1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Rep Power

    @font-face is not working

    I'm using a dw template (from adobe) to setup a new website I've been working on. I'm having difficulty changing the font for the navigation (formerly spry) I don't need the dropdown so i've removed all the js etc for that. All this has worked but the css for the navigation is not recognizing the @font-face that I've added. The font is available in the dw site so is there something i'm doing wrong with the css changes?? please review and advise - thanks!! I've pasted only the font area of the css file provided, let me know if more needs to be known to assist.

    /* Menu items are a light gray block with padding and no text decoration */

    @font-face {
    font-family: 'Trading Post Bold';
    src: url('fonts/Trading Post Bold-webfont.eot');
    src: local('∫'), url('fonts/Trading Post Bold.woff') format('woff'), url('fonts/Trading Post Bold.ttf') format('truetype'), url('fonts/Trading Post Bold-webfont.svg#webfontHNAi9IoX') format('svg');
    font-weight: normal;
    font-style: normal;
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.9em 0.75em;
    color: white;
    font-size: 100%;
    font-weight: normal;
    font-family: 'Trading Post Bold', helvetica, sans-serif;
    text-decoration: none;
    color: white;

    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #192BF4;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text
    ul.MenuBarHorizontal a.MenuBarItemHover,
    color: #FFF;
    } */

    I checked the w3c for validation and it failed. I could use some help understanding why THANKS!!

    the validator says this is where the problem lies...

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter: alpha (opacity: 0.1); (attempt to find semi colon before property name. add it), (parse error 0.1),
    } (parse error })

    UPDATE - I have all the errors correct except one - Parse Error opacity=10) Yes, I changed the number to a non-decimal in hopes that would fix it. Anyone??
    Last edited by webangel2b; November 11th, 2013 at 10:02 AM. Reason: links and help me validate please

IMN logo majestic logo threadwatch logo seochat tools logo