Firefox not displaying CSS on webpages

I have seen this problem on multiple systems running recent versions of Firefox (26, 27, etc.) on Windows 7. All of a sudden, Firefox will not render the CSS formatting on most websites, basically leaving an unusable page. The only thing that seems to fix the problem is restarting the computer. There doesn't seem to be any rhyme or reason to when it happens. I've seen it happen after the system has only been up for a few minutes and also on systems that have been running for months.

Can you attach a screenshot?
*http://en.wikipedia.org/wiki/Screenshot
*https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
Use a compressed image type like PNG or JPG to save the screenshot.
See:
*http://kb.mozillazine.org/Websites_look_wrong
Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
*Do NOT click the Reset button on the Safe Mode start window.
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
Make sure that you haven't enabled a High Contrast theme in the Windows/Mac Accessibility settings.
Make sure that you allow pages to choose their own colors.
*Tools > Options > Content : Fonts & Colors > Colors : [X] "Allow pages to choose their own colors, instead of my selections above"
Note that these settings affect background images.
See also:
*http://kb.mozillazine.org/Website_colors_are_wrong

Similar Messages

Firefox not displaying buttons and boxes when allow other pages to use their fonts instead of my selection is selected

Firefox not displaying buttons and boxes when allow other pages to use their fonts instead of my selection is not selected. The irritating thing is that Firefox used to display pages until FF 31. Please fix this
Thanks
Randy

The missing icons are supplied by a font that is downloaded from the server (@font-face) as you can probably see by little boxes that show the hex code of the characters.
You will have to make sure that you allow pages to choose their own fonts to see such an icon font.
*Tools > Options > Content : Fonts & Colors > Advanced: [X] "Allow pages to choose their own fonts, instead of my selections above"

Firefox not displaying corectly in remote desktop

This issue has existed with firefox for as long as I can remember. If I start up firefox on any computer then log into that computer from another using remote desktop the firefox window displays as nothing by a big black box. There are not controls, menus, or even an x to close it. It can be closed by right clicking on the taskbar and choosing close window. Now if I start firefox while logged in from remote desktop it works just fine. Even if I disconnect and reconnect it will still display correctly. The problem only occurs if firefox is launched from the computer then I remote in. The open webpages, tabs, ect do not matter as I can restore the previous session just fine. Some of the computer have no addons installed so that rules those out as a possible cause.
Is there any solution to this? It's usually not a big deal as it usually only involves one computer but occasionally like today I had to reboot every system on my network and load up firefox to do some stuff then remote into those systems just now only to have to restart firefox on every one.

hello FUBAR-BDHR, that may well be an issue with hardware acceleration - please try to disable hardware acceleration in the firefox ''menu ≡ > options > advanced > general'' (that setting will take a restart of the browser to take effect) & see if the situation changes...

Firefox not displaying swfs with their proper dimensions

Some instances of Firefox are not displaying swf files with their proper dimensions. When the same .html and .swf combo is loaded on another domain, different dimensions are displayed. I'm not using swfobject or any other DOM manipulator to get the swf on the page. I'm using the standard wrapper that Flex generates with object/embed tags.
The dimensions are 950x700. I wonder if the large size is part of the problem. I'm not going for any full screen effect.
I've tested with and without css declarations. I've tried using swfobject. I've created a brand new project empty project and when I publish that, the dimensions are still off.
== URL of affected sites ==
http://www.webwebwebsite.com/badfit/BadFit.html

That image doesn't seem to be working in Firefox 3 and 8 (works in Firefox 9 and later).
It works if I save it as 24 bit instead of 32 bit.
<pre><nowiki>data:image/x-icon;base64,
AAABAAEAEBAAAAEAGABoAwAAFgAAACgAAAAQAAAAIAAAAAEAGAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAACa5eqb5eqa5eqf7PGd6O2g7/VskpUxKypNWVtifoA4NjY2MzN+srWf7fKa5eqa5eqb5uub
5eqa4+hlhYeOzdKk9fppj5ExKilKVVeNy89BRUYzLy54pqmg7vSb5eqa5eqb5+ye7PGOztI1MTFW
a2yk9flrkZQxKypFTU6U2t9LV1gxKypwmJuh8faa5Oma5epigIOi8veDu782MzM1MjGHwcV0oKMy
LSxBR0iT2N1PXV8zLy5KVVaY4OSc5+yb5eowKilrj5J5p6s1MzI0MTFeeXtznqEzLi4/QUGS1dlU
aGk2MzIzLi1znqGh8PWa5epNXF01MjFFTU05OTk5ODg7PDxMWVo4Nzc7OzyOzNFbdHUzLy9FS0xM
WVqX3+Sc5+yFvcE3NTU3NTU5Ojo+QEE5ODg3NjU5Ojk4NjaJxcljgYQwKSlXbW5LWFl4qKuf7vOf
7vNdd3kzLy82MzNddXdTZGU1MzI6Ojo2MzODur5tk5YwKShUaGlkg4VYbW+g7vOe6u+Q0tY/Q0My
LCxjgIJ/s7Y1MTE5OTk1MTF7qq5znqExKypKVld+sbVETEyW3OGa5eqg7/V2oqUtIyNcdHak9fpb
dHYzLi00MDBznqF4p6ozLi1ARkaMy89FTU2Dur6a5eqb5uud6e9skZN4qKyh8PaU2d5KVVYwKShp
jI5+sbU1MTE5ODiLyc1ZcHJqjZCb5eqa5Omb5uuf7vOd6u+a5Omf7vOMy884NjZed3mFvsI2MzM1
MTF/tLhynJ9VaGma5eqb5eqa5eqb5eqa5eqa5eqa5eqf7fKBt7qEvcGNzdE7PDwzLi1ynJ+Du79N
Wlua5eqa5eqa5eqa5ema5eqa5eqa5eqa5eqf7PGf7vOW3OFFTE0yLCxjgYOLyM1LV1ia5eqa5eqa
5eqa5eqa5eqa5eqa5eqa5eqa5eqb5eqe6/BWamwxKypTZmeMys9MWFma5eqa5eqa5eqb5eqa5eqa
5eqa5eqa5eqa5eqa5eqg7/Rvl5oyLSxFTE19rrJKVVYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</nowiki></pre>

Firefox not displaying fonts and sizes properly

In firefox the fonts are not displaying properly they are either bold or small and bold some text is displayed normally but most is not most is either really small or bold. This is also the case for IE, im on windows 7 running latest versions. However Chrome, Opera and Safari all display correct fonts and sizes it is just firefox and IE that are affected. And yes everything from font size to page size is at default so please dont reply with zoom in and out thanks.

Hey thanks for the reply. Not sure which one of these worked nothing changed until I restarted firefox.
You can try different default fonts.
Tools > Options > Content : Fonts & Colors > Advanced
[ ] "Allow pages to choose their own fonts, instead of my selections above"
You can also try to disable hardware acceleration.
Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"
But it is back to how it was thank you very much!

How can I make Firefox not-display images?

About 20 years ago I could configure Mosaic to not-display images. I browse with lynx usually now, but have to use something else when I need Javascript. Sometimes I want to not-display images. I can't find a setting in Firefox for this.

Note that you can control this via the <b>permissions.default.image</b> pref on the <b>about:config</b>
The default is 1 to allow all images, a value of 2 will block images.
*http://kb.mozillazine.org/permissions.default.image
**1: Allow all images to load, regardless of origin. (Default)
**2: Block all images from loading.
**3: Prevent third-party images from loading.

Firefox not displaying web page icons properly unless in safe-mode

Hi. We are developing a website at the moment and unless I have FF in safe-mode some of the icons do not display properly. All other browsers work fine and it used to display in FF with no issues. The website is www.livingonmars.com and the icons are the 2 arrows in the top right hand corner of the slideshow. When in safe-mode I see both of the arrows. When started in normal mode I see the bottom half of the left arrow and the top half of the right arrow.

In safe mode, hardware acceleration and add-ons are disabled. You may want to try to disable you add-ons one by one to see if that helps or you can disable hardware acceleration by performing the below:
Try disabling graphics hardware acceleration. Since this feature was added to Firefox, it has gradually improved, but there still are a few glitches.
You might need to restart Firefox in order for this to take effect, so save all work first (e.g., mail you are composing, online documents you're editing, etc.).
Then perform these steps:
*Click the orange Firefox button at the top left, then select the "Options" button, or, if there is no Firefox button at the top, go to Tools > Options.
*In the Firefox options window click the ''Advanced'' tab, then select "General".
*In the settings list, you should find the ''Use hardware acceleration when available'' checkbox. Uncheck this checkbox.
*Now, restart Firefox and see if the problems persist.
Additionally, please check for updates for your graphics driver by following the steps mentioned in the following Knowledge base articles:
* [[Troubleshoot extensions, themes and hardware acceleration issues to solve common Firefox problems]]
* [[Upgrade your graphics drivers to use hardware acceleration and WebGL]]

Firefox not displaying IWeb site correctly

Since the last two Firefox upgrades (I'm on the most current one now) on a Mac, my Iweb site is not displaying correctly.
There are circle graphics on the left side of the page (they fill the left side) and only a few show. When I click refresh different ones will show, but not the whole page.
It's not only on this page, but the other pages as well. Sometimes the masthead won't load or graphics in the portfolio won't load.
Also some of the links to CD Baby (Music Page) won't show and will say "Service Temporarily Unavailable". Sometimes if I refresh a few times those will show up.
Thanks for your help!

Are you referring to elements added by the iWeb scripts regarding the circles?
Can you add a screen to clarify what you mean?
"Clear the Cache": Firefox > Preferences > Advanced > Network > Offline Storage (Cache): "Clear Now"<br />
"Remove the Cookies" from sites that cause problems: Firefox > Preferences > Privacy > Cookies: "Show Cookies"<br />
Start Firefox in [[Safe Mode]] to check if one of your add-ons is causing your problem (switch to the DEFAULT theme: Tools > Add-ons > Themes).
See [[Troubleshooting extensions and themes]] and [[Troubleshooting plugins]]
Another good place to ask questions and advice about web development is at the MozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
See http://forums.mozillazine.org/viewforum.php?f=25

[Title] (fixed) Firefox not displaying buttons, bubbles, checkboxes, and input lines

So this isn't a question but I think it's very helpful, as I've had this problem ever since update 10 or so, even with resetting my Firefox profile so here's the fix
k so I use Stardock software's Windowsblinds on my x64 Win 7 laptop. I run Firefox with the "Awesomebar" disabled, I like my menus. Anyhow for the longest time I've had a problem where Firefox stops displaying my buttons, bubbles, checkboxes, and input lines along with some borders on a few pages, so today I finally figured out which options to check to make things work and look how it's supposed to
maybe your team could code some sort of detection for windowblinds and enable these options/settings automaticly
settings in about:config that I manually changed:
layersacceleration.draw.fps true
plugin.allow.asyncdrawing true
gfx.direct2d.disabled false
Not sure if all 3 are necessary or not but I fliped the 3 to the stated variables and Vwala I can see all my buttons, bubbles, checkboxes, and input lines
also add Windowblinds to the tags for future users ---->

@ cor-el I tried it in the options menu quite a few times with seems that it just wasn't writing to the config file even though it said it was enabled/disabled. so I went straight to the config file and changed it manually but thank you for the input anyhow

Firefox not displaying test file

I installed the strobe media player according to directions and browsed to the test file. Works fine in IE but does not display at all in firefox. Any ideas why this occurs?
Thanks.

Silviu,
thanks for your reply. Indeed it was my version of flash player. Updating has solved the problem. Thanks for your time.
Drew Rennick
Drew Rennick
Web Technical Support Specialist
Campus Technologies
Parkland College
>>> Silviu Vergoti <[email protected]> 9/14/2010 9:30 AM >>>
I still think it's something strange in your browser.
I understant if you can see other flash content in Firefox, but not SMP.
Do you have something like an ad blocker? Did you try to empty the browser cache?

Background images are not displayed (CSS, other images ok

I tried clearing cache, looked at about:config for weird configurations, did a private browser window and disabled all extensions. None of these had any effect.
Test pages: Amazon.com and https://developer.mozilla.org/samples/cssref/background-image.html - both of these pages have background images loaded by CSS. For example, Amazon's logo at the top left is a background loaded from a CSS page. The image itself can be viewed raw:
http://g-ecx.images-amazon.com/images/G/01/gno/sprites/global-sprite-v1._V339353059_.png
So can this image:
https://developer.mozilla.org/samples/cssref/images/starsolid.gif
But why, why why do these images display on their relevant webpage? I see Amazon, eBay, and many other websites without a full complement of images. Especially the ones used for menus and other important navigation buttons.
Here is what I see on the Mozilla page mentioned above: I see the text, but no repeating star image. This works in other browsers and on other computers in Firefox.
The page I am typing on right now has no blue background, the entry windows are not correct (like the search window is not a rounded gray box) and the search magnifying glass is missing. So this experience makes even simple pages impossible to use.
Firefox 32, Vista

You did make sure that there isn't a high contrast theme selected in Windows like I posted above?
*http://windows.microsoft.com/en-us/windows-vista/make-the-computer-easier-to-see-optimize-visual-display

I am not seeing placeholders for missing or corrupt images. Is there an option to turn these on or off, or does Firefox not display these by default?

I am a web designer. I use FF as my default browser for everything--including work. When viewing pages containing broken image links or corrupted images, no placeholders show to indicate the problem.
I have to use another browser to check my work. Placeholders are such basic elements that they should appear without having to switch browsers or search for options.
Thinking I may have accidentally unset an option for viewing image placeholders, I have looked everywhere in the options (including Web Dev tools) and have searched support. I have found absolutely nothing to solve my issue.
Firefox--whatever version I had installed prior to a computer reformat and browser reinstall--was doing the same, so please don't suggest a FF reinstall or reset as a possible solution.

In order to change your Firefox Configuration please do the following steps :
# In the [[Location bar autocomplete|Location bar]], type '''about:config''' and press '''Enter'''. The about:config "''This might void your warranty!''" warning page may appear.
# Click '''I'll be careful, I promise!''' to continue to the about:config page.
#Search for browser.display.show_image_placeholders and make sure it is set to true.
That was a configuration that was from a very early on version of Firefox, so if this does not make a change there is more:
What is interesting is that there is also a css that allows the styling of the broken images: [https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-force-broken-image-icon]
This was an inter sting hack for the personal profile in Firefox : [http://megashare.altervista.org/blog/2012/08/enable-broken-image-placeholders-in-firefox/]
Please post back with your results, thank you!

DW design view not displaying CSS correctly

Hello,
I am having a problem using the position:relative CSS. I've
created a simple page that has 3 div tags. Below is the code:
<body>
<div id="headerleft"><img src="/images/header.gif"
width="303" height="120" /></div>
<div id="headerright">Right Side</div>
<div id="toplinks">
<a href="www.google.com">Link 1</a> |
<a href="www.google.com">Link 2</a> |
<a href="www.google.com">Link 3</a> |
</div>
</body>
Below is my CSS code:
#headerleft {
position: relative;
z-index:2;
margin-bottom:-40px;
float:left;
#headerright {
float:right;
#toplinks {
position: relative;
z-index:3;
text-align:center;
clear:both;
What this page does is shows a image in the top left corner.
In the top right the phrase "Right Side". Then my third div
'toplinks' displays a bunch of links. Since my headerleft id has
margin-bottom:-40px, I need to use z-index and position:relative so
that my links are shown above the headerleft id.
I publish the page and view it in IE and everything works
fine. However, in Design View in DW my toplinks div is displayed
right under the rightheader id. For some reason it's not being
displayed under the left and right floats(headerleft and
headerright id's). Not sure why because I have 'clear:both' set for
that div's CSS.
I take the position:relative out of the toplinks id, and
everything looks fine in DW. My toplinks id then drops under the
both headerleft and headerright. However, when I view this is IE
then the links on the left are no longer active. I guess because
z-index needs position:relative to work?
Anybody have any suggestions?
Thanks

I'm not sure what you are trying to accomplish, but try this
much simpler
and less convoluted code -
<style type="text/css">

</style>
</head>
<body>
<div id="headerleft">
<div id="toplinks"> <a
href="www.google.com">Link 1</a> | <a
href="www.google.com">Link
2</a> | <a href="www.google.com">Link
3</a> | </div>
<div id="headerright">Right Side</div>
<img src="/images/header.gif" width="303" height="120"
/> </div>
</body>
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"esuweb" <[email protected]> wrote in
message
news:[email protected]...
> Hello,
> I am having a problem using the position:relative CSS.
I've created a
> simple
> page that has 3 div tags. Below is the code:
>
> <body>
> <div id="headerleft"><img
src="/images/header.gif" width="303"
> height="120"
> /></div>
> <div id="headerright">Right Side</div>
> <div id="toplinks">
> <a href="www.google.com">Link 1</a> |
> <a href="www.google.com">Link 2</a> |
> <a href="www.google.com">Link 3</a> |
> </div>
> </body>
>
> Below is my CSS code:
>
> #headerleft {
> position: relative;
> z-index:2;
> margin-bottom:-40px;
> float:left;
> }
>
> #headerright {
> float:right;
> }
>
> #toplinks {
> position: relative;
> z-index:3;
> text-align:center;
> clear:both;
> }
>
> What this page does is shows a image in the top left
corner. In the top
> right
> the phrase "Right Side". Then my third div 'toplinks'
displays a bunch of
> links. Since my headerleft id has margin-bottom:-40px, I
need to use
> z-index
> and position:relative so that my links are shown above
the headerleft id.
>
> I publish the page and view it in IE and everything
works fine. However,
> in
> Design View in DW my toplinks div is displayed right
under the rightheader
> id.
> For some reason it's not being displayed under the left
and right
> floats(headerleft and headerright id's). Not sure why
because I have
> 'clear:both' set for that div's CSS.
>
> I take the position:relative out of the toplinks id, and
everything looks
> fine
> in DW. My toplinks id then drops under the both
headerleft and
> headerright.
> However, when I view this is IE then the links on the
left are no longer
> active. I guess because z-index needs position:relative
to work?
>
> Anybody have any suggestions?
>
> Thanks
>

Firefox not displaying some images linked from Photobucket

Firefox 19.0 there is a website where they have a gallery of pictures all the images from the gallery are hosted on Photobucket, they use to show up as normal but now for some reason they don't, I tried clearing the cookies and the cache, I made sure the download images automatically is check and every other bit of advise I could find on the web to no avail.
One thing I notice though is if you right click the missing image to get to view image information you will see Location: the address of the image is correct (copy and paste in the address bar bring up the image)
Type: text/html (This is odd it should be img/jpeg)
Size: 0 kb (of course the image was not downloaded)
Dimension: 0 x 0 (again no image downloaded)
So if anybody has an idea how to fix this it would be greatly appreciated.
Thanks

The images on that page aren't links to real images, but at least currently link to an html page (page info > media shows type text/html).<br />
You can see that if you right-click an image and open the image in a new tab by middle clicking the View Image entry in the right-click context menu.<br />
Firefox seems to have a problem to display the image in this case.

Firefox not displaying certain symbols

I can't display certain symbols on Firefox.
Example: <code><span>&equiv;</span></code> does not show anything on the page I'm working on. However, a symbol like <code> <span>&rsaquo;</span> </code> would show.
I discovered a hack that displays the symbol by changing the tag. <code><h4>&equiv;</h4></code> with an h1, h2 tag and so on, it will display the symbol. This hack, however is semantically incorrect and I don't want it in my site just so the symbol can display on Firefox. My site already has the <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> just as this one.
Any suggestions?

Okay, so this is what I did: I took the whole source code of that page http://en.wikibooks.org/wiki/Unicode/Character_reference/2000-2FFF which displays all the symbols correctly, but as soon as I changed the symbol tag from td to span it vanished. So it looks that when wrapped on some tags, the symbols won't display.
A little more information, I'm working on a Wordpress theme, but I did a plain HTML page with the same results. The symbol displays on Safari, Chrome and Opera, I'm yet to try it on IE.

Firefox not displaying CSS on webpages

Similar Messages

Maybe you are looking for