The problem
I just found a very strange issue with background-images in Firefox and Opera: the rule simply doesn't get computed.
The rule doesn't get shown in the inspector list, the images in background doesn't get even loaded in network monitors. But everything is ok in the css file being loaded, tough... the rule, the selector, everything just fine.
The same page works ok in all other browsers, except these two.
Wonder if anyone had this experience earlier. Thanks.
Examples
I could manage to reproduce the error in jsfiddle.net as suggested by Vucko and monkey. I got two fiddles: one working and one crashing. The crashing one is more closer to what I have here in context. Hope it helps.
PS.: Just note that the crashing one actually works in browsers other than Opera and Firefox.
Just remove the last line in your CSS code.
#myprojectname > #page1 > .beginning:after > h2 > div.
Tested in opera and mozilla.
Did you supply a relative URI like in background-image: url(img/picture.jpg)? Relative URIs are always resolved with the CSS file as the root.
Means, if you have the following file layout:
/css/style.css
/img/picture.jpg
/index.html
You have to write background-image: url(../img/picture.jpg) instead.
Setting the base tag <base href="/" /> won't help you, since the setting does not transfer.
Related
Last night my Firefox just got updated to version 63 without notice, the image in my website that used to be displayed correctly just got broken.
The image that I put on the web, I used css content class
/*Chrome*/
.pswFilled{
content:url("psw_filled.png");
}
/*Firefox*/
.pswFilled::after{
content:url("psw_filled.png");
}
Before updated, this worked correctly. If chrome is detected, the non-pseudo is applied. Also Firefox uses the pseudo one. However after updated, if both are put like this, Firefox will pick the non-pseudo to use first and vanish the image.
If I remove the non-pseudo line, Firefox picks the pseudo one and the image will display correctly but disappear in chrome.
Anyone experienced this? Please help
Thanks to all those trying to help. I found the problem and already solved.
The problem happened because I put the class into the img element
I thought it should work same way to the div tag. Actually it used to be working before the firefox update to 63.
Before, I wrote this way.
<img id='pwdBox' class='pswFilled'/>
It worked in both Chrome and Firefox (before 63)
but in 63, I have to change it to this
<div id='pwdBox' class='pswFilled'></div>
Thanks to extempl whose enlightened me with jsfiddle
I have a problem with content from CSS on IE11.
.icon-ok:before{content:"\f113"}
IE11 is computing this to .icon-ok::before{content: normal}
I can see that there is .icon-ok::before{content: "\f113"} but it is crossed.
So I didn't get the right icons there. - Ofc it is working on all other browsers.
I thought that's because of the ::before pseudo-class, but it is computed by IE, in the source css file it is written as :before.
Can somebody tell me whats wrong there?
Edit:
I figured out that the IE is changing the icon-font id's.
When I use "\f118" in IE it is working properly there.
How can it be?
This can happen because different browsers needs different formats of the font.
So this isn't basically a CSS problem rather a problem which format of the font is used.
I am having a hard time with making Firefox to display my custom cursor the way I want. It work's like a charm in Chrome (not at all in IE...), but in Firefox it looks like really bad gif image. Have to be said, that it's transparent .cur. I will be glad for any help.
Chrome:
Firefox:
Here is a CSS code for it:
#productImg TD IMG:hover {cursor: url('images/cursor.cur') 16 16, auto;}
Sorry, this isn't an answer but I don't have sufficient kudos to post to the comments section. Could you show what CSS you used to get the .png to work and also your file structure (i.e. is the file relative to the .css file or the source element?). I can't get either a .cur or a .png to work in FF although they work fine in other browsers. I've been following the advice in this post which seems fine for other browsers except FF.
http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/
FYI I'm trying to apply this to the BODY tag (not that this should matter). FF recognises the CSS in both Firebug and the Inspector although the Inspector reports that the value is Auto. When I manually set the property to a test Div/Class, FF just drops the property. Current code below.
cursor: url(img/cursors/tinyGreen.cur), url(../img/cursors/tinyGreen.png), url(../img/cursors/tinyGreen.cur), default;
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.
I need to prepare print css style for some page. It's possible to have footer on every printed page?
I tried the code, I've found on the web:
display:block;position:fixed; bottom:0px;
but it works only in Firefox.
I can try to fix it with table, but in Q. here: CSS: Repeat table headers in print mode is info, that it doesn't work in IE5 (maybe I made some error, but it seems, that it doesn't work even in IE7).
Does anybody fixed problem with printing footer on every page in IE? Doesn't matter if with tables or without them.
Thanks for help.
I do not think it is possible to print headers and footer using IE current, since Even in IE8 it is compliance to CSS 2.1. But there are other tweaks to get around the problem. Hope this URL will help: http://msdn.microsoft.com/en-us/library/dd433064(VS.85).aspx.
PS: The URL you referenced, on the bottom of the page specifically said works only on safari.