I want to use gradient for background in Mozilla Firefox Like
background: -moz-linear-gradient(#C6991D, #F7D065) repeat scroll 0 0 transparent;
And for other browsers i m using background-color Like
background-color: #DFB542;
I need to put condition only for firefox. I know the condition for IE
<!--[if IE 6]>
instructions for IE 6 here
<![endif]-->
But not for firefox. Plz help me.
Thanks!
this does not need conditionals
background-color: #DFB542;
background: -moz-linear-gradient(#C6991D, #F7D065) repeat scroll 0 0 transparent;
since -moz- is a vendor-specific prefix by itself, only firefox reads it. it' ignored by other browsers.
placing it in this order in your CSS, firefox will read the first declaration and then the second will override or cascade over the first.
on other browsers, they read the first declaration but ignore the seconds since they don't know how to parse it. they skip over the second declaration.
Firefox doesn't understand conditional comments, only IE does. So
Firefox simply skips on <![if !IE 7]and <![endif] as unrecognized
tags but it render the rest. It means that you cannot use content-
revealing comments here, only content-hiding ones.
See this post
You can do it with javascript
if(navigator.appCodeName=='Mozilla' || navigator.appCodeName=='Netscape'){
document.write('<style type="text/css">');
//document.write('your css code');
document.wirite('</style>');
}
Related
I was playing around with this CSS in my IE9 browser:
className{border: red solid 1px; *border: black solid 1px;}
In IE 8,9 the border is shown red.
When I turn on IE 7 compatibility mode, I see the
black border.
It looks liks the *border syntax is a fallback only for IE.
Does anyone know about this star (*) CSS rule & what does it do?
How well does it work for which browsers?
It is incorrect CSS so not parsed in most (good) browsers. Older IE however parses it as valid CSS and applies the rule. Using an underscore works in the same way.
See here for further information, or here
This is different to the use of the asterisk as a universal selector in CSS
*+html SELECTOR {}
targets only IE7 and keeps the CSS valid. This should be prefered.
The only time I ever use the star is for the inline block fix for ie7, the star just allows you to target ie6 (from i remember) as well as ie7. You can also use an exclamation mark to target ie7 if you're feeling lazy (!border:1px solid #000)
I love the effect of using border and box-shadow inset but only "Chrome" does support the inset negative value 0px, 0px, -1px.
However when I checked FF, Safari and IE (opera I don't have it but I bet it doesn't support it either)... There wasn't box-shadow at all.
When I inspect elements with firebug and try to type box-shadow: 0px 0px 1px rgba(255,255,255,0.7) inset; it does appears but not with -1px. Then the value is invalid.
Does anybody know anything about this? If not how can I make "IF" the browser isn't chrome, then add positive value instead?
You could use user-agent detection to detect chrome browser:
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
(taken from this page)
and then:
// include this in the <head> of your doc
if (is_chrome) {
<link href="chrome_style.css" rel="stylesheet" />
} else {
// do stuff for other browsers (or ignore)
}
It seems the word 'chrome' appears in most (if not all) chrome's user agent.
I found that userAgentString.com provides a list for previous user-agent strings of older versions as well.
I'm sure there's a better way for this specific case, but I just want to share this.
CSS Browser Selector is a pretty cool little JS file that allows you to specify CSS classes for specific browsers.
For example the following will only apply to elements with the example class if the browser is IE7.
.ie7 .example {
background-color: orange
}
The page lists all the supported browsers and you can make a style that applies to everything but Chrome.
.ie, .ie7, .ie8, .opera, ... { style }
I have a page which uses the AlphaImageLoader CSS filter for IE8 like so:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale');
In my test IE8 (Windows XP, factory settings), everything is fine. The client however received a screenshot from someone claiming to be also using IE8 which looks like the browser completely ignores the filter directive. All other styles in the IE-specific stylesheet loaded via conditional comments appear to be working. Is there any setting in IE or in Windows which would be causing this?
Thanks, Simon
IE8 replaced filter with -ms-filter.
If you want to support all versions of IE, you need to provide both of these styles.
The syntax for -ms-filter is slightly different to filter as well:
All filters are now specified with their full progid string (as per your example, but some filters could previously be specified with a shorter syntax).
The value for -ms-filter must be enclosed in quotes. This is to prevent it from being invalid CSS syntax (since it contains a colon after progid it is invalid CSS; in bad cases has been known to cause parsing errors in other browsers that stop them from reading the rest of the CSS file properly).
So in your example, you need the following styles:
.myelement {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale')";
}
Note that IE9 has dropped support for both filter and -ms-filter, in favour of the equivalient standard CSS3 properties.
Hope that helps.
This simple test case: http://fiddle.jshell.net/TyMxr/show/light/
<div></div>
div {
border: 2px solid red;
width: 256px;
height: 256px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG', sizingMethod='scale');
}
works in IE6, IE7, IE8, IE9, and Quirks Mode in any of those versions.
I can't think of any reason this wouldn't work in IE.
Do you have a test page to look at? I think something else must be going on.
I have the following code:
ul.myList li{
border-right: 1px dotted #000;
}
However, on the last element, I need to remove that border as the design that I am working from dictates that the last item does not require a border as a separator.
So, I need to target the last child of a list and so within my css I have added
ul.myList li:last-child{
border-right: none;
}
Which as we all know, works fine in Firefox, Safari and Chrome.
The problem lies when we view the page in Internet Explore 6 through to 8.
So, after some digging around, I found the answer:
If the browser is IE<8, specify a stylesheet like this:
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie_all.css" type="text/css" />
<![endif]-->
And within your IE stylesheet specify the following rules:
ul.myList li{
border-right: expression(this.nextSibling==null?'none':'inherit');
}
The nextSibling expression looks to see if there is an element after it and if there is inherits the rule specified in the default stylesheet, if not it applys a new rule.
More information can be found here
IE8< does not support this pseudo selector. Check the MSDN article for all supported features :)
You could take a look at this jQuery solution to Enable pseudo selectors in IE, or just leave it as is in IE.
As Internet Explorer before version 9 (which is still in development) doesn't support :last-child selector at all, my best solution, unfortunately, would be to set a class or id on the last element in your list and try to select that.
Of course, if leaving the right border in for IE won't break the layout completely, you may want to leave your code as is, if you don't mind IE screwing up rendering just a little.
You can do this using jQuery. So instead of relying on CSS. Use jQuery Selectors to set the property of your last element. I understand that u havent tagged your question with it.
jQuery('ul.myList li:last-child').css("Key","value");
I'm using the HTML5 elements and in a project i'm working on and the css seems to be working fine in Chrome. However, it doesn't appear to be working in Safari or Firefox (I haven't tested IE, but I'd imagine it's the same), and the page layout is all over the place.
Any ideas why this may be? I know Firefox and Safari both support these elements, and Safari is webkit-based like Chrome, so I can't figure out what the problem is.
You can see the webpage here. {website link not available}
Safari and Firefox have the same level of ‘support’ for HTML5 sectioning elements (after seeing your demo page, I’m guessing these are the elements you’re talking about): they can be styled, but you have to set display: block; implicitly.
aside, article, section { display: block; }
Adding this rule to your CSS will solve the problem.
To make these elements stylable in IE, you just need to use the HTML5 shim/shiv. Put the following HTML in your <head>:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Which part isn't working exactly? The <canvas> element appears to be rendering correctly, your <article> container isn't being ignored.
I'm in FF3.6.2, btw. The only CSS errors I see are just that: CSS errors.
I had a problem with "figure" element, not showing background image. so i overcome the problem with this...
background-image:url("../img/login_bg.jpg");
background-position:center center ;
background-repeat:no-repeat;
background-size:cover;
This didn't work...
background: rgba(0, 0, 0, 0) url("../img/login_bg.jpg") scroll center center / cover ;