FF not picking up font or gradient

FF won't show the imported font or the gradient & border-radius on some of the divs, but I'm really not sure why.

Here's the site, where the fonts for headings should be Arial Rounded MT Bold, the midle h2 gradients don't show, the right & left nav divs and titles should be with a border-radius of 5px and the Twitter speech bubbles don't show correctly.

If someone could perhaps compare to Chrome it'd be great as that's how it should look.

Here's the CSS for the fonts:

@font-face {font-family:'Arial Rounded MT Bold';src: url("/Fonts/ArialRoundedBold.ttf") format('truetype');}
@font-face {font-family:'Arial Rounded MT Light';src: url("/Fonts/ArialRoundedLight.ttf") format('truetype');}

Open in new window

The H2 Middle gradients that aren't showing:

#middle h2 {margin-bottom:5px;color:#293346;font-size:22px;padding:3px 2.3%;background:-webkit-gradient(linear, left top, left bottom, from(#EBEBEC), to(lightGrey));background: -moz-linear-gradient(top,  #EBEBEC,  #lightGrey);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EBEBEC', endColorstr='#dcdcdc');border:1px solid #d5d5d5;-webkit-border-top-right-radius: 10px;-webkit-border-top-left-radius: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;}

Open in new window

The top-left nav heading for 'Directory' for example that should have a border-radius:

#left-nav .quickjump h2 {border:1px solid #4D535C;padding:2px 0;background:#676E79;color:#fff;text-shadow:0 1px 0 #5d5e80;font-size:14px;border-top-right-radius:0;border-top-left-radius:0;-webkit-border-top-right-radius: 5px;-webkit-border-top-left-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-topleft: 5px;text-indent:10px;-webkit-gradient(linear, left top, left bottom, from(#808792), to(#727A86));background: -moz-linear-gradient(top,  #808792,  #727A86);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#808792', endColorstr='#727A86');}

Open in new window

And the right-nav speech bubbles, where the 'speech' bit isn't showing right:

.twtr-tweet {
    background-color: #Ffffff !important;
    border-radius: 5px;
    box-shadow: 0 0 6px #777777;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;float: left; !important;

.twtr-tweet::before {
    background-color: #Ffffff;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
#tweet-id-1 {float: left;margin: 5px 10%;}
#tweet-id-1::before {box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );left: -9px;}
#tweet-id-2 {float: right;margin: 5px 10%;}
#tweet-id-2::before {box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );right: -9px;}
#tweet-id-3 {float: left;margin:5px 10%;}
#tweet-id-3::before {box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );left: -9px;}
#tweet-id-4 {float: right;margin: 5px 10%;}
#tweet-id-4::before {box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );right: -9px;}

Open in new window

Any help is much appreciated.
Who is Participating?
GaryConnect With a Mentor Commented:

The requested page was not found

Check the path of the font
UName10Author Commented:
I'm testing in IE9 btw.
btw looks the same in Chrome as FF and IE except the rounded corners are only working Chrome
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

UName10Author Commented:
Thanks - yeah I just saw that.  Not sure why it works with Chrome and IE though?  The files is there, but I names it wrong - it has spaces between the words, but when I try to change it it doesn't work..

Any ideas as to why or the others would be great,
There are so many probles with the CSS, that rather than goin through them , you need to look your self. So in firefox clear the error console and load the page, and then look at the 70 or 80 messages in the error console.  

I suggest that you start by validating the CSS.  The round corners are not there in ff because it does not need -moz prefix it has support border-radius since day 1.

Also if the version of firefox is back to vers10 or earlier, the media queries will screw it up, an will run into conflicts with some addons.

Doesn't work in the others so you must have a cache of it already.
UName10Author Commented:
Just fixed it... that's really strange as on my Chrome it's perfect.  I'm using 21.0.1180.83...

Do you know why the others?  The boredr-radius never works in IE either without the border  bg color making square corners even with a border-radius.

Having the worst day ever! Many thanks.
UName10Author Commented:
Hi COBOLdinosaur - many thanks & will do..

The only problem I have with using border-radius for FF is because the boredr-radius never works in IE on certain divs, without the border background color making square corners, even with a border-radius.

I'll go through everything now, but I guess a suggestion on how to ensure IE makes round corners whilst not 'squaring them off' with a background-color would be great, as I've had trouble understanding why & how to make it work...

Many thanks for the help.
UName10Author Commented:
Thanks Gary, I'll download that now for the older ones for sure.
UName10Author Commented:
Great.. Gonna go through it all now and hopefully get it fixed finally!  Many thanks for the help..
UName10Author Commented:
Ok I just changed the header area and you can see what I mean there in IE... Really can't understand it - but it seems only to apply when I individually style the corners with the border-radius, ie top-left.

Here's the CSS for example for the header,& perhaps let me know if you spot what I could be doing wrong.. (fine in Chrome & FF)

#header-wrapper {position:relative;width:98.2%;margin:0 0.8%;overflow: hidden;height:100px;border-top-right-radius:8px;border-top-left-radius:8px;-webkit-border-top-right-radius: 8px;-webkit-border-top-left-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-topleft: 8px;border:1px solid #333441;border-bottom:0;background:-webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#E4E4E4));background: -moz-linear-gradient(top,  #f6f6f6,  #e4e4e4);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e4e4e4');}

Open in new window

I don't know why you are using -moz and -webkit prefixes.  border-radius is supported in ie9, chrome since vers 10 and FF since vers 4.
I have no trouble getting correctly shaped corners in IE9 with just border-radius. it will even do circles and ovals just fine: http://coboldinosaur.com/pages/script-detail.html?typ=c&num=1

UName10Author Commented:
Yeah it's really odd, it seems to work ok on the divs where all the corners have a border-radius, but when I specify either top-left or top-right, it seems to break it.. I'll keep having a check though and maybe open a separate one as you guys helped with the others!

Thanks again.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.