Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Improve this question
Can some one provide me some good css example to create breadcrumbs for my asp.net application. Which should support IE 8.
I was trying this link http://www.red-team-design.com/css3-breadcrumbs but it is working in Crome not in IE8. Please someone help me.
Thanks
Gulrej
The code you're trying to use contains several features that are not supported by IE8.
border-radius
If you need rounded corners, this can be made to work using CSS3Pie
box-shadow
Also use CSS3Pie for this.
text-shadow
There is no good way to get this working in IE8. Sorry.
linear-gradient
Also use CSS3Pie for this.
rgba() colours
And again, CSS3Pie for this too, although there are some quirks to watch out for.
::before and ::after
Actually, :before and :after are supported in IE8, but need a single colon, not a double colon.
As you can see from my comments above, most of these features can be made to work with a bit of effort and a few hacks, but by default they are not supported by the browser.
In addition, some other browsers may need vendor prefixes for some of these features. In particular, the gradient styles should be provided with prefixes if you want to support all common browsers.
Your options:
Write your CSS in a way that allow sensible fall-backs -- eg a sensible plain colour background for IE8 that is overridden by the gradient for browsers that support it.
Use a library like CSS3Pie, which attempts to make IE8 more compatible with modern standards. But be aware that if you use it a lot, it has been known to slow IE8 down quite badly.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am taking over an application that has buttons with this css:
background-image: -moz-linear-gradient(center top , #049CDB, #0064CD);
it looks beautiful in firefox but looks like a mess in IE, etc
what is the best way to take these clearly firefox specific css and determine the best way to make it look the same on all browsers (just need IE8+)
This tool might be a useful tool for you.
Since this CSS attribute is still a working draft of CSS and has some legacy it will require a lot of markup to be fully supported for your current situation. The -moz- prefix is one such isntance of providing support. All other browsers will required either the standard, -ms-, -webkit-, -webkit-type or -o- prefix as well.
You should look out for other spots in the application you've taken over for code that hasn't been fully tested on other browsers.
LINK
http://www.colorzilla.com/gradient-editor/
This is a matter of opinion but there are tools online that will help you generate css for gradients that works across browsers. http://www.colorzilla.com/gradient-editor/ is an example.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
What is
-moz-border-radius:
I really have no idea what it is, and I can't find answers on stackoverflow, google, or anywhere. I'm new to web dev and I tried using this and opened up firefox, and there is no real difference. Nor if I open anything else. Also what about
-webkit-border-radius or anything that begins with -webkit
They are vendor prefixed properties, a type of vendor specific extension
They are used to implement experimental versions of features before they are standardised.
An initial dash or underscore is guaranteed never to be used in a
property or keyword by any current or future level of CSS. Thus
typical CSS implementations may not recognize such properties and may
ignore them according to the rules for handling parsing errors.
However, because the initial dash or underscore is part of the
grammar, CSS 2.1 implementers should always be able to use a
CSS-conforming parser, whether or not they support any vendor-specific
extensions.
Authors should avoid vendor-specific extensions
Well anything starting with a - prefix is for a specific browser.
-moz is for firefox
-webkit is for chrome and safari
-o is for opera
-ms is for internet explorer
Border radius is simply just to round the corners of an element. You can set the value to 5px and you will see the difference. Here is a fiddle to show the property: http://jsfiddle.net/Ps4mN/
border-radius: 5px;
It is important to realize browser compatibility, and most import backwards compatibility. Mozilla, in it's past used it's own unique methods of parsing CSS. They also, because of this, were a little behind on new standards in CSS and had to add them later down the road. Adding prefix's to these attributes gave them a way to highlight their 'new' implementation of already released CSS as a 'new and improved' vision of whats already out. See branding.
Because of this, however, it caused a lot of issues with compatibility between developers. Deciding what browsers to develop for, or how to optimize for one specific brand. Which furthered it notoriety as well as it's revenues.
Only recently has some browsers caved into following standards of CSS, such as border-radius:
However, do to this war, which is still being raged, you need to keep in mind a lot of people don't use the browsers you are using. In fact some 25% of all computers online still run Windows XP as well as Internet Exploder (I'm sorry, Internet Explorer or something like that)! And there is no easy way of supporting rounded corners there besides fun workarounds.
Take a look at this article about cross compatible borders for new and old browsers right here. Mind you border-radius: will work in newer version of Mozilla, but not older ones. It will also run on current version of most web standard browsers. Just it's always good to keep some legacy code in for older browsers.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
Are there any tools that can be used to check and see if any malformed selectors are being used in a stylesheet, such as
div:fifth-child {
font-size: 1.2em;
}
We are looking for a tool that will find these in a file.
Thank you.
It sounds like you are looking for the W3C CSS Validation Service.
It flags your example with the error "Unknown pseudo-element or pseudo-class :fifth-child".
Years ago I used Dust Me. It will find unused CSS selectors.
Note: While a malformed or invalid CSS selectors will likely be unused, this tool may not match your requirements exactly. I, nonetheless, found it useful in combination with W3C CSS Validation Service.
there is no tool for that but u can check them through browser addons or validate ur site in http://jigsaw.w3.org/css-validator/
and if you use firefox there is firefox extension which tells css and html error its a great extension you can download it here for firefox
http://www.htmlvalidator.com/firefoxext.php
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
Is there any resource that provides a chart of CSS properties and their support through most browser/OS combinations? For example, if I want to know what browser supports overflow or min-height and any quirks to be aware of in the implementation of these properties and their values, what is the best place to get all this?
I have found a couple places but I haven't been impressed.
Any suggestions?
http://www.quirksmode.org/css/contents.html
Quriks mode is also a really good resource for this sort of information.
caniuse.com is very helpful in this manner as well. And you can also check other implementations like HTML5 or SVG support there.
http://caniuse.com/
The wikipedia article is fairly impressive and a good place to start:
http://en.wikipedia.org/wiki/CSS_support
Most of the CSS reference sites I used to use are out of date, but SitePoint recently (I'd say the past year) released a CSS Reference that is kept up to date and is easy to navigate.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I'm not talking about tools that let one view a page in combinations of operating systems and browsers like crossbrowsertesting.com but in creating or figuring out the actual CSS.
Use a css reset to level the field across browsers. YUI and Eric Meyer have good ones.
If you guys are still coding for IE6, you're making a mistake.
I use IE7.js to get IE6 to render pages like IE7. IE7 is not perfect, but at least it has some semblance of standards. Since I only have to code for IE7 and FF it makes me 33% more efficient in terms of testing against browsers, something I think makes good business sense.
Link: IE7.js
I write to the standards and both Firefox and IE7 follow a pretty good set in common.
IE6 is dead as far as I am concerned but if I get back into professional web dev I'll probably have to revise that ;)
I try to make a standards-compliant page and do all my testing in Firefox (since it has some excellent development extensions such as Web Developer and Firebug). Then when I'm finished I test the site in IE, then make whatever small changes are necessary. I find that I need to make very few changes, since I don't do anything extraordinarily complex with CSS.
I used to have more problems with Javascript differences, but after I started using Javascript libraries (such as jQuery) I stopped having any serious problems with that.
Padding.
IE6 can get a little hinky when using margin to place elements horizontally on a page. If you size your elements and space the content within using padding, you can make many layouts work great in IE6/7, FF, Safari, and Opera without any hacks. IE5.5 makes things a little stickier because of the broken box model, but I think we can pretty much count it out in most circumstances now.
I try to make a standards-compliant page and do all my testing in Firefox (since it has some excellent development extensions such as Web Developer and Firebug). Then when I'm finished I test the site in IE, then make whatever small changes are necessary. I find that I need to make very few changes, since I don't do anything extraordinarily complex with CSS.
The same here, except I don't tend to need to use Firebug and such. I've only had problems with IE6 recently however - which are solved by simple CSS bypasses:
/* All browsers read: */
html body {
margin: 10px;
}
/* FF, IE7, Op etc. read: */
html > body {
margin: 0;
}
I'm with Eli. Writing against firefox (with firebug installed) makes you have to write "more compatible" code to begin with and then its less of a job later down the line when you come to make it compatible with IE.
Use the site QuirksMode to help you find answers to compatbility information
If it's a brand new project I make it a point to test all html+css changes on all browsers I'm targeting as I make the changes. In the past I tended to focus on my favorite browser and then test with the others after I was done to find that one or more small quirks were present and it was very tedious to pin-point the actual cause. Now I have all browsers open and just go through refreshing each one after each html/css change to make sure the display meets my expectation. When something goes wrong, I know exactly what caused it.
It might seem time-consuming to test on all browsers at once, but in the long-run it actually saves time as you catch the problems at once.