Fonts and transparency for all browsers

Hello,

I'm relatively new to HTML and CSS, i'm an artist and as a project I decided a while back to build my own website from scratch with no short-cuts, in order to give it a truly retro look as my web page writing skills are not amazing. This (http://www.pixelocracy.co.uk) is the website at the moment.

I'm trying to re-write a menu system into the main page and the problem i'm having is with two different aspects of CSS, font embedding and transparency.

Here (http://pixelocracy.co.uk/website%20in%20google%20chrome.png) is a picture of my current design in google chrome g

And this (http://pixelocracy.co.uk/website%20in%20IE.png) is it in internet explorer


As you'll notice the menu backgrounds are not transparent and the embedded font is not recognised and for some reason this is all shifted around.

I've used CSS @fontface format to embed a true type font file which I understand will not currently work on many browsers at all! But through extensive google searches I fail to find any other viable alternatives to embed fonts for all web browsers.

Secondly the transparency issue I think it might be the way in which I've laid out the code but here is a sample of it =

//div#mainmenu {

padding: 0px;
margin-top: 150px;
margin-bottom: 20px;
width: 800px;
height: 20px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-color: #444444;
background: filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
font-family: "SF Intermosaic B", Lucida Console, Trebuchet MS Bold;
font-size: 14px;
color: #000;
text-align: center;
}//

I borrowed the code for transparency but I couldn't get it to work as a class so i inserted it into the div id for the menu which seemed to work for google chrome but not for internet explorer.

Any help with these two issues would be much appreciated.

Thanks

Francis

Fonts for IE should be in the EOT format; you can also use WOFF for browsers that support it.
Older versions of IE don't have support for CSS opacity. For all modern browsers, you should be using only the opacity property, not the proprietary ones you are now. Opacity in IE can be achieved through the nonstandard filter property.

I have tried using the .eot file extension before but this did still not allow the font to be embedded using the CSS @fontface attribute, i assumed there must be an older way of embedding fonts?

And about the transparency issue, I am using the non standard filter property along with others -->

filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;


but i'm using them in a div id which i think might be the problem I've tried using them as a class but i couldn't get that to work either. The transparency in the div id shows up on most other browsers just not IE.

Actually I got the transparency working in IE, it was simply an error on my part

I'd left it as

background: filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;

rather than what i posted above which does work.

But I still can't figure out how to embed fonts for multiple browsers this is what I have in style sheet --->

@font-face {
font-family: "SF Intermosaic B";
font-style: normal;
font-weight: normal;
src:url("http://www.pixelocracy.co.uk/fonts/SF Intermosaic B.ttf");
}

and then i just reference the font-family in the div id as "SF Intermosaic B" which only seems to work for Google chrome and nothing else

At first I would remove the whitespaces from the file names. I get eye cancer when I see that and it could lead to problems in one or another application.
Then look into the bulletproof font face syntax (http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/) by Paul Irish on how to implement embedded fonts across all browsers. Basically you need your font in several different formats. For easy conversion there is the Font Face Generator (http://www.fontsquirrel.com/fontface/generator) by Fontsquirrel.

Did you just change .ttf to .eot? Because that doesn't change the file format, only the extension.

that really is bulletproof. sorry for the eye cancer

I'm not completely devoid of brain cells, I wasn't just changing the the file name thinking that it had magically converted itself!

I got it working perfectly in all browsers using the bullet proof @fontface piece of code. I don't know why I couldn't find that gem sooner.

Thanks Stephan

*Actually i've just tested it on a mac + safari and it still doesn't seem to be loading the font : (

ok, so far i've still not got it to work across all browsers! sooo close, IE and Google chrome on windows seem to read the embedded font. but not safari on mac's

@font-face {
font-family: 'sfintermosaicb';
src: url('sfintermosaicb-webfont.eot');
src: local('☺'), url('sfintermosaicb-webfont.woff') format('woff'),url('sfintermosaicb-webfont.ttf') format('truetype'), url('sfintermosaicb-webfont.svg#webfonthCxLMstV') format('svg');
font-weight: normal;
font-style: normal;
}

Would you be able to show us a live example?

I've updated the main menu page now for the website which is here (http://www.pixelocracy.co.uk)

you can view the source code to see what i might be doing wrong, I don't want to post it in a thread incase i make someones eyes bleed, there are probably a few inefficient scraps laying around like an untidy room

any ideas how to fix the fontface problem, would be much appreciated

thanks

Google Chrome?! Oh jezus! Not another browser - please!!! I can't even cope with the differences between Firefox and IE. I can't keep up with this...

Safari show the font perfectly fine for me.
However, although it’s not specifically stated anywhere in the W3C specifications I would still rather put the @font-face rule at the top of the stylesheet since this will probably load the font faster as the browser doesn’t have to download all CSS before the actual font comes to sight.

Google Chrome?! Oh jezus! Not another browser - please!!! I can't even cope with the differences between Firefox and IE. I can't keep up with this...

:confused: Have you been hiding in a cave for the last couple of years that you haven’t noticed the advent of Google Chrome? But apart from that: Chrome uses the same rendering engine as Safari (that is, Webkit) so you don’t have to worry all that much about another browser to test in. Generally you can say if it works in one browser then it works in the other one, too (provided they use the same version of the rendering engine).

It is traditional to include at-rules at the beginning of the stylesheet. At least it looks a bit cleaner, if it doesn't avoid any compatibility issues (: