I made a web page with HTML and PHP and design it with CSS. When I open this webpage in Mozill aFirefox, it works as I designed but when I open it in Internet Explorer, the design of page does not according to the settings I designed in CSS file. How to fix it?
You can fix it by either add CSS to your current css file to correct it. Or make a new css specifically for each browser. That happens because each web browser displays it a little differently. IE that handles CSS and HTML differently more so than all the others.
Cross browser css has been difficult for years! But there is a framework that tries to make it easier.
http://sass-lang.com/ Sass compiles your code and generates cross-browser css. There is a ruby gem that will 'watch' your files for you and generate the css on the fly.
Good Luck!
Related
I am working on changing the styling of pages within a learning platform. The platform allows for the user (me) to use my own CSS to change the styling of pages I myself have created. The problem is that the platform uses som predefined (and unknown to me) CSS before appending their CSS with my CSS. I don't have access to the actual HTML.
Here is the problem: I would like to use web fonts in my CSS. I have therefore been trying to use #import at the start of my CSS. My CSS is appended too late to the predefined CSS for #import to take effect. The only code I can give the system is my own CSS so I can't directly edit the html head to link to the web fonts.
Is there any other way to add web fonts to my CSS with said CSS being the only code I can write? Is it possible within CSS to append links to the html head? The support team of the platform consider this is a bug but don't offer a workaround. It would be nice not to have to wait for an update if possible.
I'm developing a rails application and I've issue when run site on IE9. All of sass files not working on IE. If I want the site run on IE9, I've sort sass files in application.scss.
I don't know why. I have been work with other rails applications in the past, this is the first time sass files require sorted.
So, is there anyone like me? Please help me.
Detail about my application:
Rails 4
Sass 3.2
Foundation framework latest version 5.2
Slim template
Ps: I've added respond.js and html5shiv.js into layout/application.
It not SASS that is not working in IE but rather the rules that you created through it. You should check for what CSS rules are supportet by IE. A good source is http://caniuse.com/
IE9 still has CSS limits. If your application.css has more than 31 import links or more than 4095 rules, that's probably why you're experiencing this. If that's the case, you should definitely refactor your stylesheets.
You do have gems like CSS Splitter to deal with this, but honestly if you're running into those limits it's probably a good time to reorganize your assets.
As #Severin has suggested, SASS isn't the problem - it's your CSS:
Sass is completely compatible with all versions of CSS. We take this
compatibility seriously, so that you can seamlessly use any available
CSS libraries
SASS is basically another way to write CSS - it's precompiled on deploy and basically renders "pure" CSS for use in the browser
Your case with IE is not likely to do with your SASS - it's probably an issue with your CSS. Can you post your application.css?
I'm using jQuery mobile to create a list menu.
I use a 'slide' effect, when you click an element to show the next page.
I was using a css style sheet which had too many design elements.
So I went ahead and removed the stylesheet and instead added the required styling in the html document.
But now the slide effect doesn't work if I click the elements.
If I include the css style sheet, then it starts working again.
Here is the http://jsfiddle.net/r24XY/ code.
The whole reason why you see those cool looking animations is because of that CSS file.
You must have both JQuery Mobile .js and .css library files in order for things to move.
Ripping certain elements out of the library CSS files just to build your own is a bad idea, very bad idea. What if you miss something ? Even if you don't.. what if they release an update tomorrow? You're going to have to maintain a lot of code.
CSS animations (or transitions / transforms) are used in jQuery Mobile and other mobile web frameworks since these are hardware accelerated on certain devices (namely iOS). Thus, removing the CSS file of course removes the animations.
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.
Is there any solution that allows you to design a webpage (with, say, a wysiwyg editor) and then automatically compile the design as one or several css file(s) compatible across multiple browsers?
Typically, using a WYSIWYG editor will generate superfluous entries to your HTML mark-up and create inefficient stylesheets that don't make use of CSS shorthand.
The best way to create stylesheets that are compatible across multiple browers sadly just comes with experience. By knowing the quirks of IE6 and IE7 you automatically cater for them as you create the stylesheet.
A good reset stylesheet will help to erradicate any default differences between browsers, such as line height, body padding, etc.
The exact solution you're after doesn't exist (yet).
I really don't think so. There are some CSS frameworks trying to deal with this issue, the more popular one I know is called YAML. Some JavaScript libraries are dealing with cross browser CSS issues, too (don't know a particular example at the moment though).
You may want to use PHP to write the content of a .CSS file.