Firefox does not seem to be completing every aspect of the stylesheet for the site (nsfw text) www.theshandy.com
Firefox seems to have implemented the body styling but none of the class or id styles. Every other browser seems to be having no trouble at all.
After doing some research I have tried fixing problems other people have found. The sheet is directly linked (not called by php). The type is definitely text/css. And I believe it has the correct utf-8 character set.
I am really at a loss.
Thank you very much.
EDIT SOLVED:
It was a rogue apostrophe in one of the early ID styles. Apparently chrome and safari will ignore is and firefox won't and it then refused to load the rest of the stylesheet (creating the idea that the body styles were loading but not others.
Thank you for trying to help!
Check your paths.. you might be using /css/style.css instead of css/style.css.
This could generate this problem.
Related
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
I have a search bar plugin (Wordpress) which I have modified by CSS to suit my design. The thing is that it gets displayed ok in my latest version of Chrome, but it doesn't in other versions of it or Internet Explorer.
Here is how it should be everywhere: http://i.imgur.com/eTpHgK2.png
Here is how it is displayed in iExplorer and some other cases: http://i.imgur.com/1WKwYWc.png
The URL is: impresionados.net
The CSS: http://pastebin.com/bjpLS3DM
After having a look it seems like the custom styles are being applied in the first situation, but not on the second one. I have looked for missing semi-colons or closing curly braces, but I haven't seen anyone missmatching.
Where could the problem be or which tools could help me identify the problem? Thanks!
You wrapped almost all your code in media-queries, that can only be interpreted by some browsers. You might want to think about implementing http://modernizr.com/ to create fallbacks for that scenario.
Have a look at http://caniuse.com/#search=media to check to what extend you can use certain CSS selectors.
I'm doing a website for a client and for some strange reason when loading the page in IE/Firefox/Opera, the stylesheet doesn't load properly.
When loading the site in WebKit (Chrome, Safari, Mobile Chrome, Mobile Safari) the page loads fine.
I've check that the doctype is fine, the links don't have any typos, they all link up correctly in the source.
I cant for the life of me figure out why it doesn't work!
Please help!
http://almostinspired.net
and
http://almostinspired.net/wp-content/themes/almostinspired/style.css
What's happening is that your CSS file is, in fact, being loaded by every browser, but is only being partially processed by some browsers. This might be because of an improperly formatted stylesheet.
I've determined that these browsers reach line 115, but don't quite make it to 161. I'd try removing selectors in between there until you determine which one is causing problems.
And this is what I did to figure this out:
I opened up your site in Firefox and went to 'Inspect Element.' It was clear to me that the most obvious thing that was getting messed up was your #wrapper div. This thing was styled at around line 160 in your stylesheet, which gave me a line number that it wasn't getting to. I looked around on different elements to find the lowest number it was getting to, and the lowest I found was 115. And that's what I used to infer this solution.
I have a custom cursor that is using an image. My original code:
cursor:url(../images/drag_mini_bg.png);
I then discovered that Firefox requires you to define a default backup in case the image is not found, and changed it to:
cursor:url(../images/drag_mini_bg.png), default;
This worked for Firefox and Chrome, but not IE. I read that IE uses a different source for the path than other browsers and implemented this solution:
cursor:url(../images/drag_mini_bg.png),url(/images/drag_mini_bg.png),default;
(The second url is relative to the html file rather than the css file that this code is included in.)
This didn't seem to help, so I found out about this bug and changed the image to a .cur file:
cursor:url(../images/drag_mini_bg.cur),url(/images/drag_mini_bg.cur),default;
However, it is still not showing up in IE. Anything else I can try?
Most of what you've read is correct, but I'll make a few amendments:
Firefox does indeed require the additional parameter to be added. My understanding is that the ideal value for this is auto. But if default works for you, use it.
As you've been told, IE can only display cursors of the .cur file type. PNGs and GIFs do not work.
However, I've never heard anything about IE using a different path; the same path has always worked fine for me in all browsers (when using a CUR file, of course). You might want to provide a reference to where you heard this, but I'd suggest that dropping the second URL may solve your problems.
There's a good site called Quirksmode that has a lot of browser compatibility tables. In particular, they have a very thorough table covering CSS cursors, which shows exactly how to format it to make it work in all browsers, with examples and notes about the quirks.
Hope that helps.
If you're still trying to figure this out 8 years later...I'll add that some browsers have a maximum image size, so maybe yours was too big. I believe you want to keep it under 32x32 pixels.
It's bizarre.
This site works perfectly in all browsers but IE7. In ie7 NOTHING works. Most of the css just doesn't even render. IE8? Fine. Ie9 Perfect. Firefox and Chrome, of course.
Want to hear something weirder? this is a template site i have worked with before. Other sites built on essentially the same template DO work in ie7.
This is why i think whatever it is is simple.
I don't want to paste the code here - it's massive. But i'll give you a link to the site and to the css
site: http://canadianrecovery.ca
css http://canadianrecovery.ca/css/screen.css
Thing is, i have document standard set to ie9 It works fine in ie7 mode with doc standards set to ie9
But i have noticed that most IE browsers don't display default doc standards... this is obviously some sort of issue with IE itself. But it's frustrating.. most end users have no clue how to fix this.
Thanks in advance.
ella
I think I may have found the reason. In your body-style (line 13), you have the following:
font-family: "Times New Roman;
See that unclosed quote? Seems like Chrome, FF, IE9 etc can fix that error, whereas earlier versions of IE read the rest of the CSS as your font-family declaration.
Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Thanks everyone. I actually found a solution. Look for a js script called ie7.js and include it with conditional comments.. it solves a LOT of ie7 issues