Firefox, Safari, Opera Doesn’t Load CSS Stylesheets?
Are you having issues viewing various web pages from time to time where css style sheets don’t load?
Solution might be simpler than you thought. One of the reasons why it can happen is due to AdBlock. In case you are blocking ads on the web page, unblock them all and try now.
It worked for me.
About (Author Profile)
Vygantas is a former web designer whose projects are used by companies such as AMD, NVIDIA and departed Westood Studios. Being passionate about software, Vygantas began his journalism career back in 2007 when he founded FavBrowser.com. Having said that, he is also an adrenaline junkie who enjoys good books, fitness activities and Forex trading.
Subscribe
If you enjoyed this article, subscribe to receive more just like it.
It dint work for me. In my application the header and footer come from a different server. Though they are getting loaded, the CSS related to them is not getting loaded. The body looks good. The header and footer look like skeletons!!! Please help.
Also have the problem with Safari loading my homepage, excite.com. It always says that it is loading the last item forever and never loads the entire page – parts are missing. This did not used to happen. I had no problem with Safari up until recently with the updates. Should I try an older version of Safari? Can this problem not be corrected by the Safari people? Has anybody else had this same probme? Would love to hear from someone.
Help!!!!!!!!!
I’m developing a website for our local school district. Right now, I’ve used images for links in order to avoid problems viewing the site between a PC and MAC.
If you want to skip past my ranting, ignore the next paragraph and please look at the code and link below. There’s a big cyber hug and kiss to anyone willing to help me get this resolved! I’ll also make sure to give credit to the person who helps me fix this.
Now, I’m trying to create it using CSS. It looks fabulous (if I do say so myself…) when I view it from my PC. When the school’s superintendent views it from her MAC, the links at the top and on the left side are not “white and Arial” but “blue and Default.” She’s not happy and I’ve been up for three nights working… NOT COOL!
I’d really like to get rid of the image buttons and use CSS instead for several reasons. One of those is just the principle of the darn thing – I should be able to do this! I’ve been designing since 1997! Another is because the school employees insist on editing their own content and keep screwing up the layout. Anyway, another couple of reasons is page load speed and not having to wait for the blurry, space hogging image buttons to load…
Enough ranting. Please look at my CSS code below. I have this linked to the following page: http://www.fairfieldcityschools.com/Athletics/index.shtml
/* Global Styles */
body {
background-color: #FFFFFF;
}
scrollbars {
scrollbar-arrow-color:#00000;
scrollbar-track-color:#ac0304;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#c0c0c0;
scrollbar-3dlight-color:#9c9c9c;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#333333;
}
#breadcrumbs {
font-family: Arial;
font-size: xx-small;
color: #000000;
}
#breadcrumbs a:link {
color: #AC0304;
font: Arial;
font-size: xx-small;
}
#breadcrumbs a:visited {
color: #AC0304;
font: Arial;
font-size: xx-small;
}
#breadcrumbs a:hover {
color: #AC0304;
font: Arial;
font-size: xx-small;
text-decoration: UNDERLINE;
}
#breadcrumbs a:active {
color: #AC0304;
font: Arial;
font-size: xx-small;
}
#breadcrumbs a.hidden {
color: #000000;
font: Arial;
font-size: xx-small;
}
#breadcrumbs a.hidden:visited {
color: #000000;
font: Arial;
font-size: xx-small;
}
#breadcrumbs a.hidden:hover {
color: #0000CC;
font: Arial;
font-size: xx-small;
}
#breadcrumbs a.hidden:active {
color: #000000;
font: Arial;
font-size: xx-small;
}
#sportsticker {
font-family: Arial;
font-size: x-small;
color: #FFFFFF;
font-weight: bold;
/* ID Styles */
#bodytext {
font-family: Arial;
font-size: 14px;
color: #000000;
}
#bodytext a {
font-family: Arial;
font-size: 14px;
color: #AC0304;
}
#bodytext a:visited {
font-family: Arial;
font-size: 14px;
color: #AC0304;
}
#bodytext a:hover {
font-family: Arial;
font-size: 14px;
color: #808080;
}
#bodytext a:active {
font-family: Arial;
font-size: 14px;
color: #AC0304;
}
#topnavigation td {
border-bottom: 1px solid #AC0304;
}
#topnavigation {
font-family: Arial;
font-size: x-small;
color: #FFFFFF;
font-weight: bold;
}
#topnavigation a {
font-family: Arial;
font-size: xx-small;
line-height:2px;
letter-spacing:.025em;
text-decoration: none;
display:block;
padding:-1px 1px -1px -1px;
color: #FFFFFF;
font-weight: bold;
}
#topnavigation a:visited {
font-family: Arial;
font-size: xx-small;
color: #FFFFFF;
font-weight: bold;
}
#topnavigation a:hover {
font-family: Arial;
font-size: xx-small;
color: #808080;
font-weight: bold;
}
#topnavigation a:active {
font-family: Arial;
font-size: xx-small;
color: #FFFFFF;
font-weight: bold;
}
#leftnavigation td {
border-bottom: 1px solid #AC0304;
}
#leftnavigation {
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
#leftnavigation a {
font-family: Arial;
font-size: 14px;
line-height:4px;
letter-spacing:.1em;
text-decoration: none;
display:block;
padding:.05px .05px .05px .05px;
color: #FFFFFF;
font-weight: bold;
}
#leftnavigation a:visited {
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
#leftnavigation a:hover {
font-family: Arial;
font-size: 14px;
color: #808080;
font-weight: bold;
}
#leftnavigation a:active {
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
#rightcomingevents {
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
}
.rightcomingevents1 {
color: #FFFFFF;
font-family: Arial;
font-size: 14px;
}
.rightcomingevents2 {
font-size: 18px;
}
.rightcomingevents3 {
color: #FFFFFF;
font-family: Arial;
font-size: 18px;
}
.rightcomingevents4 {
font-family:
Arial; color: #FFFFFF;
}
#logo {
font:24px Tahoma;
color: #000000;
letter-spacing:.2em;
line-height:30px;
}
#tagline {
font:11px ;
color: #000000;
letter-spacing:.4em;
line-height:18px;
}
#monthformat {
border-bottom: 1px dashed #000000;
}
#dateformat {
font:11px ;
color: #000000;
letter-spacing:.2em;
}
#dateformat a {
font:11px ;
color: #000000;
font-weight:bold;
letter-spacing:.1em;
text-decoration:none;
}
#dateformat a:hover {
color: #808080;
letter-spacing:.1em;
}
#bottomnav {
font-family: Arial;
font-size: xx-small;
color: #000000;
}
#designcredits {
font-family: Arial;
font-size: x-small;
color: #000080;
}
/* Class Styles */
.bodytext {
font-family: Arial;
font-size: 14px;
color: #000000;
}
.bodytext a {
font-family: Arial;
font-size: 14px;
color: #AC0304;
}
.bodytext a:visited {
font-family: Arial;
font-size: 14px;
color: #AC0304;
}
.bodytext a:hover {
font-family: Arial;
font-size: 14px;
color: #808080;
}
.bodytext a:active {
font-family: Arial;
font-size: 14px;
color: #AC0304;
}
.topnavtext a {
font-family: Arial;
font-size: xx-small;
color: #FFFFFF;
}
.topnavtext a:visited {
font-family: Arial;
font-size: xx-small;
color: #FFFFFF;
}
.topnavtext a:hover {
font-family: Arial;
font-size: xx-small;
color: #808080;
}
.topnavtext a:active {
font-family: Arial;
font-size: xx-small;
color: #FFFFFF;
}
.leftnavtext a {
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
}
.leftnavtext a:visited {
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
}
.leftnavtext a:hover {
font-family: Arial;
font-size: 14px;
color: #808080;
}
.leftnavtext a:active {
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
}
.pageName{
font: 16px Arial;
color: #FFFFFF;
font-weight: bold;
line-height:20px;
}
.subHeader {
font:bold 11px Tahoma;
color: #000000;
line-height:22px;
letter-spacing:.2em;
}
.quote {
font: 20px ;
color: #808080;
line-height:30px;
}
.smallText {
font: 10px Tahoma;
color: #000000;
line-height: 22px;
}
.credittext {
font-family: Arial;
font-size: x-small;
color: #000000;
}
.sportsticker {
font-family: Arial;
font-size: x-small;
color: #FFFFFF;
font-weight: bold;
}
#contentbody {
font-family: Arial;
font-size: 14px;
color: #000000;
}
Hi,
Why do you include css more than once?
Few things for you to fix in css
Replace
font: Arial;
with
font-family: Arial, Verdana, Tahoma;
scrollbars {
scrollbar-arrow-color:#00000;
Make it 000 or 000000
#sportsticker {
font-family: Arial;
font-size: x-small;
color: #FFFFFF;
font-weight: bold;
You forgot to close it with }
Let me know once you fixed those.
Thanks for taking a look at this! I made the changes you suggested. Another thing I did was add the following to the actual web page:
Is there something I can add to either the external CSS page or the actual web page that will “prompt” firefox, opera, netscape, etc., to recognize the CSS as it is supposed to look and as it does in fact look when viewed in IE?
THANKS!
The code I added to the top of the web page isn’t posting on this forum. Basically, I added “doctype” to the page…
scrollbars {
scrollbar-arrow-color:#00000;
scrollbar-track-color:#ac0304;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#c0c0c0;
scrollbar-3dlight-color:#9c9c9c;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#333333;
}
This is not CSS stuff. It is a non-standard proprietary extension from Microsoft. Other browsers will ignore it.
font:11px ;
should be font-size:11px;
Remove 1st line or replace it with CSS comment /* as now it’s HTML comment code.
#contentbody {
is not closed
It shows fine now on Opera as well, once you fix those other issues, it will probably work on Firefox, Safari as well.
I can’t thank you enough!!! I have fixed those issues and will put a shout out to you in the credits for your help. I hope that anyone else having a similar issue can find this online and not go through the frustration I did. Thanks again!!!
No problem :-) Happy to help you.
Another issue:
.smallText {
font-size:Arial;
font-size: 10px;
should be family on the 1st one, also suggest you to remove (2nd one). No need to repat it twice. FF3 still shows all white, no red color.
For over 6 months I’ve had this problem with Safari not loading my stylesheets. Today I finally sat down and began changing some things around with at random. I had something like this at the top of my main stylesheet.
@media print{
@page{
size:landscape;
}
}
I moved it to the very bottom and everything looks perfect as it should now. I really hope this helps anyone out there.
Isaac
I am having issues with my CSS template displaying correctly in Firefox and Safari web-browsers. My website looks grand in IE and Avant, but it looks terrible in Firefox and Safari. It seems as if the CSS template is not loading correctly. I have taken the website down, but will put it back up to show the issue I am having. Please help… I am new to website development!!
Thanks alot, had exactly the same problem!