My site acro.batcave.net shows up differently on IE (Windows 7, IE 11.x) and FF (Windows 7, FF 37.x). Chrome has the same behavior as FF. The CSS is located at acro.batcave.net/css/index.css. Initially I thought I might have used non-standard CSS (the intent is to use CSS3). But I did not find any using the CSS validator at W3C. What am I doing wrong and how do I make FF (and Chrome) to display this similar to IE?
I don't know how that's happening but when your site loads in Chrome the CSS returned is all gibberish. That's why its not getting applied.
Check out the screenshot below:
http://screencast.com/t/tCYGkUnAxO
You have saved the HTML code as UTF-16 with a byte order mark, and I suspect that you have saved the CSS code the same way. Firefox and Chrome fail to decode the CSS file to text because of the encoding.
Most browsers doesn't support UTF-16 for data files unless you specify it in the link tag or the header. Instead save the files (the HTML too) as UTF-8, without a byte order mark.
Related
I have a really strange issue that has me pulling my hair out. When I load a web page in IE9 the CSS renders perfectly fine. The page also renders fine in firefox and chrome.
However when I try to render the page in IE11 using a document mode of 9 several CSS files are not being applied. This is also the case if the document mode is 10 but it works fine using "Edge"
I have monitored the network traffic and can confirm that the CSS files are being pulled down.
Any ideas what might be causing this?
Eventually during a discussion with a colleague it was discovered that this issue was being caused by SharePoint and not IE11. The problem was that the file was UTF-8 encoded and needed to be ANSI encoded and subsequently was not being served correctly for whatever reason.
For me the answer was to add this with my existing conditional comments...
<!--[if !IE]><!--><script type="text/javascript">if(/*#cc_on!#*/false){document.documentElement.className += 'ie10';}</script><!--<![endif]-->
Why it only works when I add that I'm not sure, currently using a HTML5 doctype and no additional styling is given with the class ie10, it's literally there for feature detection purposes only.
I had tried giving the CSS a different encoding (ANSI & UTF-8) like other answers have said, also tried using a XHTML 4.0 doctype incase it was caused by the HTML5 doctype but nope.
Also ensured the IIS 7.0 server did accept the text/css MIME.
I have a web site that looks OK in browsers chrome, firefox and IE above 8.
in IE8 down it doesn't look good. Is there a tool out there to check if my css file is valid for IE8 ?
I would prefer one that will indicate me which lines in my CSS file not valid for IE8 and how to fix them.
Use IE Tester Application.
You can render to different IE Versions. if its not supporting create separate Css for version and target to that version.
http://ietester.en.softonic.com/
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.
Playing around with shjs in order to display line numbers, line breaks and spaces, i came across this: Using Pseudo-Elements for the ›hidden‹ characters it behaves just as expected (in Firefox): no line numbers, spaces or line endings get copied to clipboard.
As IE8 displays everything well, I was surprised it behaves different with copy+paste.
Copy+pasting a line from FF looks like so (which is fine):
config = ({
While the same, copied from IE8 reads:
14·config· =· ({¶
The same with Opera, btw.
Does anyone know which behaviour is the correct one, and if there is a way to teach the browser the desired behaviour?
Thanks in advance
Opera and IE are correct: There is no rule which forbids copying generated content. Mozilla’s behavior is btw one of the many reasons why you can’t use the <q> element …
Unfortunately, you can’t bring all browsers in line. Generated content is not part of the DOM and therefor not accessible per Javascript.