?
Solved

FF not picking up font or gradient

Posted on 2012-08-25
15
Medium Priority
?
554 Views
Last Modified: 2012-08-25
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;
    width:60%;}

.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.
0
Comment
Question by:UName10
  • 8
  • 5
  • 2
15 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 38332703
http://www.inside-guides.co.uk/Fonts/ArialRoundedBold.ttf

The requested page was not found

Check the path of the font
0
 

Author Comment

by:UName10
ID: 38332706
I'm testing in IE9 btw.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332707
btw looks the same in Chrome as FF and IE except the rounded corners are only working Chrome
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:UName10
ID: 38332721
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,
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38332724
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.

Cd&
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332726
Doesn't work in the others so you must have a cache of it already.
0
 

Author Comment

by:UName10
ID: 38332735
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332743
0
 

Author Comment

by:UName10
ID: 38332747
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.
0
 

Author Comment

by:UName10
ID: 38332749
Thanks Gary, I'll download that now for the older ones for sure.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38332757
0
 

Author Comment

by:UName10
ID: 38332759
Great.. Gonna go through it all now and hopefully get it fixed finally!  Many thanks for the help..
0
 

Author Comment

by:UName10
ID: 38332766
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

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38332779
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


Cd&
0
 

Author Comment

by:UName10
ID: 38332798
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.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question