Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 3, 2015 at 12:42 am #453438
    graceelizabeth

    Hello there,

    I’ve got the Amatic SC font popped into some quick CSS for the Menu at the top of my page….however it never seems to load up properly in other browsers besides mine! (I’m using chrome). I realize this is probably because I have the font actually installed on my laptop…..I managed to make my code a little better and now it doesn’t look AS BAD and generally the font loads up properly for other browers (as in, it’s Amatic SC) but still….when I test it on browser compatibility sites, the menu font is often overlapping the Logo which is one the left.

    Here’s the link to my site: http://moderncreativesresource.com/

    here’s the code I’m using:

    .main_menu ul:first-child>li>a {
    font-size: 30px;
    }
    .header_color .main_menu ul:first-child > li > a { color: DarkGray ; font-weight: 500; font-family: ‘AmaticSC-Regular’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; }
    .header_color .main_menu ul:first-child > li > a:hover { color: LightSkyBlue ; }
    .header_color .main_menu ul:first-child > li.current_page_item > a { color: LightSkyBlue ; }

    Can somebody please help me out, I’ve had several comments about how unprofessional it looks…..

    many thanks

    Grace.

    June 3, 2015 at 1:46 am #453469
    Josue

    Hey Grace!

    Can you please link one of those ‘browser compatibility sites’ so we can test it and check what’s wrong?

    Cheers!
    Josue

    June 3, 2015 at 1:59 am #453477
    graceelizabeth

    Hey Josue,
    Here’s the one I used though you may not be able to test my url on it again for a few hours as it’s a free to use site…http://browsershots.org/

    How does the menu font look in your own browser?

    Thank you :)

    June 3, 2015 at 2:05 am #453480
    Josue

    Like this – http://a.pomf.se/msupqg.png, i can’t test your site there as it says it has exceeded the daily quota.

    Cheers!
    Josue

    June 3, 2015 at 2:09 am #453483
    graceelizabeth

    Thanks Josue, it looks perfectly fine there…I still don’t know what to do about it though…

    June 3, 2015 at 2:21 am #453487
    Josue

    Try changing your font declaration code to the following:

    .header_color .main_menu ul:first-child > li > a { 
    color: DarkGray; 
    font: 500 14px sans-serif;
    font: 500 30px 'AmaticSC-Regular';
}

    That way the font-size value will be bound to the font-family so if ‘AmaticSC-Regular’ is available it will be 30px, otherwise 14px.

    Cheers!
    Josue

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.