The fonts look the same to me here in IE and FF. Font's are not controlled so much by css as by the fonts available to and configured for the browser that is viewing the page. You may specify any font you like in css, but if it isn't available to the browser, or if the browser is configured to override it, a default font (often set in the browser's configuration) of one sort or another will be used.
What you can do is use the closest generic font as a fall back in your style, but even that can be (though not technically, in practice) overridden by the browser's settings.
For example:
Code:
.fonce {color: $bgcolor; font: bold 10pt; font-family: $font;}
resolves as:
Code:
.fonce {
color: #FFFFFF;
font: bold 10pt;
font-family: Arial;
}
Perhaps not all browsers have Arial, but that's hard to imagine. You could change it to:
Code:
.fonce {color: $bgcolor; font: bold 10pt; font-family: $font, sans-serif;}
Thus insuring that if the browser didn't have Arial, it would use its default sans-serif font, which is usually something akin to Arial, but is not required to be, so ultimately could end up looking like anything in any given browser.
And, you have other styles you didn't mention (your ddsmoothmenu.css file):
Code:
.ddsmoothmenu {
-x-system-font:none;
background:#4776C4 none repeat scroll 0 0;
font-family:Verdana;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
width:100%;
z-index:100;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #4776C4; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #FFFFFF;
color: #white;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: white;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
Verdana should also be backed up with ,sans-serif as a fall back (sans-serif is also close to Verdana). But as I say, if the browser is configured to do otherwise, anything may show up.
There are two main ways a browser may override your selected font:
- By being set to use its own fonts for all pages.
- By being set to have different default fonts than generally expected for those times when the font you've specified is unavailable.
Either or both of these may be set in the particular version of FF you are using to view the page. Also, font sizes specified as pixels will not change size in IE in the same way that they can in FF, if it is a matter of font size, just adjust to the proper size in the browser's view menu.
How to make my Css compatible with Firefox ?
Reply With Quote
Bookmarks