So, I'm working on a clients page that's hosted with BigCommerce and it appears that all of the custom styles I wrote are not being recognized by internet explorer. It works fine in all other browsers.
It's strange because IE sees the .css file, but when you click into the stylesheet in developer tools, none of code populates.
I don't have more than 31 stylesheets so that's not the issue. I'm at my wits end and any help would be greatly appreciated.
The website is www.bangsshoes.com.
The stylesheet is .../bangs.css
Just a thought, but you could:
a) try combining the styles into another style sheet which is being successfully incorporated or,
b) since this is just a reset, try another reset? or a modenizr? http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js
Another test would be to comment out the other style sheets and see if that makes a difference-- it's possible another style sheet is interfering (though unlikely!)
Related
I googled the heck out of this and could not word my search properly to find the answer. I'm working on a Wordpress site that is letting me edit the stylesheet (style.css) via the Editor, but the changes aren't appearing on the website, the old css is still being shown for some reason. I have cleared my browser cache to no avail.
Anyway....
Using Chrome's dev tools show the old styles are being pulled from things like style.css:90, style.css:400, style.css:9, etc...
What does that mean? Where are those numbers coming from?
Are the numbers the line numbers from your CSS file? As in the code/style declaration on line 90 and line 400 from your style.css file.
I have seem a lot of videos in which developers are changing CSS on the fly in chrome. I tried the same thing but chrome did not allow me to change the code. I can't write on the style sheet.
Is there any specific setting to do this? Kindly help.
EDIT: To edit the CSS, I right click on an element, select inspect element. It will open the console. I select the id of the element and go to style.css in Resources and try to change the CSS. It does not allow me to write there.
You are doing it wrong... the resources panel is not there for live edit, if you want to change the css associated with an HTML element, right click on that element and then in the right panel you will see the css styles associated with the selected element. You can edit that rules and you will see the changes in real time.
Maybe you can check some videos to learn some basics about the Chrome Developer Tools, and after that if you want to learn more, you can check this question:
Chrome Developer Tools: Best resource for learning advanced features?
Here is a great tool for Google Chrome called Stylebot.
In this you can change the style sheet and save your own styles to any website for your own custom website theme!
Here is the link for Stylebot
Check it out and to put the icing on the cake, it's free!
This should not be used to work on your own website projects since the CSS file saves local on your browser!
In Chrome, clicking on something like "all.css:1" in the Styles pane of the Elements tab of DevTools takes one to the Sources tab of DevTools. If you're looking at code on remote server, the CSS rules in this source view are not live-editable (unlike the live-editing Style Editor tab of Firefox*) unless you're:
viewing the "inspector-stylesheet" -- a temporary stylesheet containing new style rules you created with the "+" button in the Styles pane of the Elements tab. Clicking on a new rule's "inpector-stylesheet:1" link will take you to the editable source of the temporary rules you've created.
viewing a persistent local workspace. Setting this up takes a few extra steps, described here: "Set Up Persistence with DevTools Workspaces" .
Basically, you make a local folder on your machine where you can save local copies that you direct Chrome to use in in lieu of the version on the internet. See the instructions at that link. Note that, as it says there, "If you are mapping files from a remote server instead of a local server, when you refresh the page, Chrome reloads the page from the remote server. Your changes still persist to disk and are reapplied if you continue editing in Workspaces." (So just type a space character into the source local CSS file to see your alterations applied again, if you've refreshed or navigated to a different page that uses the same stylesheet.)
* In Firefox, if you right-click on an element on a remote webpage, select Inspect Element, then in the Rules pane of the Inspector tab, click on a link on the right like "all.css:1", you are taken to a "Style Editor" tab where you can immediately live-edit, in contrast to Chrome's requirement of making you map to a local file. This may cause some people some confusion, if they expect the same behavior from Chrome's DevTools.
Another Chrome extension that is similar to Stylebot is Code Cola. It has an inspector that allows selecting elements, and a visual editor which does not require typing the CSS by hand. To see the generated CSS code click the curly brackets icon in the toolbar.
I have a Spring App with ThymeLeaf and Dojo that is causing me a problem. The CSS files are showing up aborted in Firebug when I reference them from my HTML file. However, when I go directly to the file by putting a copy of the CSS URL in the address bar, it works. In addition, the Dojo code works, but it fails when it gets to the CSS file. So, I have tried a CSS link only and with Dojo and both fail. I have searched this one for hours, but I cannot find anyone else having this problem.
Thanks in advance,
Joe
Figured out the issue. I turned on debug on the server and tested a JS and CSS file. They both behaved the same from the server perspective and it looked like the CSS file was being sent correctly. So, I tried IE and it worked fine. After reinstalling Firefox, the software works as expected. Wish I had figured out this issue earlier
I'm using Google Chrome developer tools to try different CSS values on a localhost site e.g. changing "border-width: 1px" to "border-width: 2px".
For some reason I am unable to edit. If I click on "1px", I can type in a new value e.g. "2px" but as soon as I hit return, the value returns back to "1px".
For some reason, it is only affecting one site - all other sites I can edit fine.
Any ideas what the problem might be?
Earlier on, I saw a "paused in debugger" notification at the top and the page greyed. Might this have something to do with the problem?
I discovered that the problem was the use #import in the site's style sheet, specifically:
#import url('http://fonts.googleapis.com/css?family=Open+Sans');
Once this was commented out, I was able to edit the CSS again.
We've reached the end of our tether here trying to overcome a nasty and intermittent FOUC in Firefox 3.5.x+ for a new release we're working on.
We've tried:
Disabling Javascript in FF
Using Quirks mode rendering by removing the DOCTYPE
Moving from #import for additional CSS to <link>
Switching concatenation on and off
Removing CSS files from the concat, one at a time
Switching the local cache off in Firefox
etc
Our previous release never exhibited any FOUC issues, so it's something we've done to this release. Changes we've made so far include:
Using Base64 encoded images over Data URIs for all decorative imagery, served via CSS.
Separating 'framework'-related CSS files from page-specific CSS and bundling them as two separate CSS files
To recreate the problem... use Firefox 3.5.x or 3.6.x, then:
Head on over to: http://my.publisher-subdomain.env.yola.net/
Login with username: 'stack#yola.com' and password: 'stackoverflow'
Once logged-in, you should be at http://my.publisher-subdomain.env.yola.net/sites/
Click the Account link in the main nav.
The Account page should load, and you should see a FOUC. If the FOUC does not occur, clear your cache and reload the page.
Your help would be greatly appreciated! :)
UPDATE:
The dev environment is still exhibiting the FOUC, but only if FireFox is running low on memory or has a lot of extensions installed. Latency and rendering speed definitely affect the visibility of this FOUC.
Although this is a very old question, I found it when I was searching for a solution to the same problem. So, I wanted to post the solution for future reference. I just needed to move the reference to my CSS files above the references to external Javascript that needed to be in my header.
I can be wrong, but this could be a concurrent connections issue. According to my Firebug's "Net" tab
the HTML page simply takes a lot of time to load - maybe also because it is on a development server? - and the style sheet gets loaded after the HTML page.
I can't claim to entirely understand what's happening here, but I would try putting the style sheet onto a different domain as a first measure. That should make Firefox establish a connection straight away.
It would probably also be a good idea to go back to normal images instead of data: URIs - that would reduce the size of the style sheet, and data: URIs won't work at all in IE < 8.