Weird problem. I update the site CSS sheet and the changes show straight away in FireFox but don't show in IE. Using the Developer Toolbar in both apps the style changes are missing in IE. I've reset the browser cache but no dice.
Perhaps this related question might help you.
Related
I am working on some front end design, and while fiddling with some stuff in Chrome developer tools I added the following to the webpage I am working on:
Even after reloading (and emptying cache and hard reloading) this style persists, regardless of whether or not I have the developer tools open.
I am not sure where this style is coming from or why it refuses to quit!
Has anyone experience something similar and were able to figure out a solution?
EDIT: If it matters this is being applied to a table element
Only two options really: either you defined the width: 100% as an inline style or it's being added via JS as an inline style.
I tried with everything like proper style tags and all. but still site is not working in Firefox and IE
Link: http://webkurn.com/chrysler/index.html
Thanks a lot in advance
As per your CSS Statements they apply only on webkit-based browsers (Chrome, Safari, etc.). If you are pointing to a specific browser then you have to use webkit. Here you are making your queries to run on specific browser chrome or safari.
Try removing the webkit -webkit-min-device-pixel and check. Hope this help you
Most of the time, the problem is with the cache only if all the stylesheet tags are perfectly written. First try to remove your cache from your browsers of your website.Also, there are great tools like firebug(firefox) and inspect element tools(almost all browsers) which can be used to check the stylesheet file if it is updated or not.
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
Ive seen a lot of talk about box-shadow in IE9 - but when i try it out it does not work! (of course im not suprised ... sigh). Am i mistaken that these thing are supposed to work in ie9 or is mys css wrong or is there a mode in ie9? Heres the CSS code im using:
.jW{position:absolute;border-radius:8px;box-shadow:4px 4px 24px 4px #000000}
Same goes for border-radius. Ive even opened up CSS3 sites that have these attributes like http://css3please.com/ and they dont work in IE9 either. Actually: bugger IE!
OK - found the problem. Firstly thanks to sandeep for refering me to part of the problem. IE9 does not require any doctype for these styles to work. Whats causing the problem is "border-collapse:collapse" on tables - use cellspacing=0 then it works - still: bugger IE
It should work (as far as I know - will run some simulations later). In the meantime your can check out CSS3 PIE (http://css3pie.com) that enhances IE rendering of CSS3 properties (not really IE's rendering, but close enough).
According to CanIUse.com, IE9 does support box-shadow and border-radius.
I haven't tried it with box-shadow, but I can definitely vouch for it working with border-radius
The most likely reason for it not working is that you're actually running in IE8 compatibility mode (or even IE7 compat). This will make IE9 drop all the new features and pretend to be the older version.
The quickest way to check if this is the problem is to hit F12 to open the IE developer tools window. This will show the rendering mode in the top right hand corner.
If it is rendering in compatibility mode, then you can change it here. You can also add a meta tag to the top of your code to force your site to use the latest IE mode. If it's happening for every site then you may need to change your browser settings.
Hope that helps.
Ooops - im sorry but i wasnt entirely correct in my testing - it seems that doctype is essential for these things to work. But then everything else breaks down. I think next time ill write for IE first then the others - hey mabe thats microsofts strategy all along!
I also was experiencing the problem where the box shadow was not being displayed in IE9. In my case, IE9 was rendering the document in compatibility mode, even though I had a valid DOCTYPE. I was debugging locally, and IE has a setting "Display intranet sites in Compatibility View" which was enabled, apparently by default. After disabling this, everything works as expected. This can be found under Tools -> Compatibility View settings.
The reason box shadow does not work is that IE automatically runs in quirks mode which does not support this.
If you set internet explorer to run in standards mode it will display box-shadow correctly
you can force ie to run in standards mode by following this post: How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?
If you can't edit http headers then use: <meta http-equiv="X-UA-Compatible" content="IE=edge">
(or <meta http-equiv="X-UA-Compatible" content="IE=edge" /> if you're using XHTML)
It should work fine if you do this
I've been editing CSS using Firebug in Firefox, but recently noticed that Chrome is rendering my pages much quicker (with scrolling, interactive elements etc) and wanted to switch to it.
I found Chrome shows the computed CSS and what attributes are overruled in the stack and I can alter them one-by-one but what I liked about Firebug was that I could just edit the entire stylesheet in a real-time text editor. Is this same feature somewhere in the Chrome developer panel, or is there a Chrome extension that lets me alter the stylesheets this way?
In current versions of Chrome (I'm running 16) you don't need any external add-ons.
Right click anywhere in your page, choose inspect element, then in the window that shows up click the Resources tab, then in the left panel select the stylesheet you want to edit. To begin editing you need to first double click, over the css text.
Try StyleBot. It can also save edited CSS.
You can edit any property or create a new property by double click on an entry or empty space in Elements panel's styles pane. There is no way to edit entire css file just as text at the moment.
I use live.js! As you edit your css file it shows you the results realtime in your browser without having to refresh. http://livejs.com/
I've spend countless hours testing almost every Chome extension i could find (including stylebot) to mimic the live CSS editing of Firebug in Firefox. None to date have that same workflow. Live.js is the closest.
Have you tried the Web Developer Toolbar extension's CSS->Edit CSS tool?
https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
Web Developer Toolbar for Chrome > CSS > Edit CSS
there's a semi-working firebug extension but it's not exactly perfect yet.
User Firebug Lite. It's also available as an extension to Chrome.
You are looking for this - Live Stylesheets
I wrote the LiveCSSEditor 4 years ago for exactly this reason. FireBug in Firefox would let me free-hand write CSS into the page, but nothing else in Chrome would.
I still use it today and have yet to find a better solution. It may work for you as well. :)