I have an application that I have not changed a line of code in since the last time I ran it. I know this because I was having trouble with some changes I made on another machine and I wanted to make sure the application ran as expected before I updated the code from source control. When I load the page from the same local server in Firefox it displays correctly.
I am using Bootstrap 3 and for some reason Chrome is not loading the css that controls the grid columns. The following css classes appear in Firebug tools:
and are completely absent from Chrome dev tools styles listing resulting the this display in Chrome
instead of the correct display which appears in Firefox
Can anyone think of anything that might cause this?
Here is the html:
and the computed styles:
and here is the complete html as requested
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 have an online test which includes 24 questions, each with 4 possible answers. I have set up the CSS so that these answers are radio buttons with labels and a hover effect.
Here's a picture of how it looks in Chrome, Firefox, IE 10, Opera, iPad, Android - everything except IE 9:
Yet in IE 9 it looks like this for question 1:
By the time the user gets to question 13 it looks like this, where the CSS starts working on the 51st element that the styling is applied to:
And then every question after that looks correct.
Here's a link to the test where you can see the code embedded in an iframe:
http://improvedemployees.com/softskills/soft-skills-test/
Here's a link to the raw test code (it behaves the same):
http://api.improvedemployees.com/soft-skills/softskills-test2.aspx?v=4&companyid=10812&testid=1&campaign=
To see this problem in action, enter a couple of characters for the name it asks and click next a couple of times to get to question 1.
Why is Internet Explorer 9 refusing to display the CSS for the first 50 elements? Note: there are fewer than 200 elements on this test so I don't believe there should be any limit problem.
The reason was to do with the following command being applied to the .radiolabel class:
behavior: url(/css/border-radius.htc);
I'd added that to make the rounded border effect backwards compatible.
Removing that line, now all the effects are there as expected.
This also explains why it was working in my development environment but not my production environment - it was referring to /css/border-radius.htc whereas to pick up the file in my dev environment I should have been using a relative path or /web/css/...
Thanks to #Zeta for pointing out about the transparency effect. Took me a while to find this, but the code in that .htc file was the culprit. I'd appreciate knowing what tool you used to discover that?
This has also removed the SCRIPT87 errors - they were being caused by some dodgy code inside the .htc file too.
You can see it working finally here:
http://api.improvedemployees.com/soft-skills/softskills-test2.aspx?v=4&companyid=10812&testid=1&campaign=
Thanks to all who helped.
For me its working fine in IE 10
i press f12 and set the Browser Mode to IE 9
then it was not working and as i turn off the compatibility by selecting Browser Mode = E10 and its works fine as shown in figure.
so check at your end make css compatible with IE9 or change your JS
i have observed that some inline css is overriding the css so kindly check that too
I'm having some trouble with our precious Internet Explorer 8. We are working on a CMS for hotels and everything was just fine until awhile back, when IE8 stopped rendering the frontend properly. This is the public website demo and the top navigation as well as the menustrip are messed up in IE8. Same with the "Payment methods" in the right side of the footer, where small icons for accepted payment methods should have been shown.
The thing is, we do have a special CSS file dealing with IE issues and it's loaded on the website, but it's not being applied to elements by IE. Also, on my local machine other CSS files (not conditional) are being loaded in IE, but the browser doesn't apply the styles.
It's like this:
the CSS file is loaded
the classes are applied to the tags
but the styles are not applied to those classes (!)
Now this behaviour happens on some pages and doesn't happen on others (very few). For example, on this page the menustrip is ok. I read about similar issues in IE isn't rendering the CSS and js dom injected elements don't pick up CSS styling in IE. The thing is this behaviour has been reproduced on other PC's in the office, as well as at home. I'm quite baffled by this.
Has anyone else experienced similar issues? If so, did you fix it? How did you manage to fix it? Thanks to all!
basically a majority of the CSS styles defined for my website are not displayed when opening the page in IE8. This is not only happening for my custom styles (which I load separately through a custom css file), but also for the built-in features of Rockettheme IONOSPHERE template, for example the box1/2/3/4/5/6 module styles. Also, the rounded style is not rendered, and all modules are shown with sharp corners instead.
I am also using a custom css file (called ralph_golfanatics.css), which I load inside the index.php as follows:
$gantry->addStyles(array('template.css','joomla.css', 'ralph_golfanatics.css'));
All custom styles of this file are displayed fine in IE9, but the most important styles are not shown in IE8. Simply adding these css-styles manually in the file template_ie8.css (that file comes with the Ionosphere template package) did not change anything.
Looking forward to receive any help in this matter. The webpage is http://www.golfanatics.de
Thank you all in advance for your hints.
Ralph
Unfortunately, the link you've included isn't working so it's difficult to pin down exactly what the problem is.
If you're referring to rounded borders displaying with sharp corners this is because border-radius is a CSS3 property which is not supported in IE8.
See this link for border-radius browser support.
There are many CSS3 properties which don't work in older browsers; this is expected behavior and most web developers work around this by using either 'progressive enhancement' or 'graceful degradation'. See this link for more information.
Most websites using CSS3 techniques will never look the same in every browser.
If you want to look at the CSS of other people's websites (to steal learn from them), Firebug lets you inspect the prettified CSS:
But in Chrome 16, you only get the minified CSS as it was served out:
Is there a way to get Chrome to prettify the CSS?
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
The Developer's console shows the file as served. If you want a human-readable version, copy-paste the code to http://www.codebeautifier.com/.
If you use the Elements tab, the applied CSS properties are also shown per element.
I recommend Quick Source Viewer, which is an extension to chrome and requires no human copy-pasting (acts sort of like an extra chrome dev-tool).
It can show you the source of the current page formatted and colour coded.
It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).
You may want to checkout Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en
After installing, when you view a minified CSS or JS file, it will appear (after a moment) un-minified.