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");
Related
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
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>');
}
I want to style all my th elements the same (white text on black background) apart from a couple of usages where this formatting is not wanted - in which case I add a class of no-headers to the table element.
th {background-color: #000000; color:#FFF;}
table.no-headers th {color:inherit; background-color:inherit ;border:inherit; }
So here is some example markup if you needed some
<table><tr><th>This has a black bground</th></tr></table>
<table class="no-headers"><tr><th>This inherits bground from parent</th></tr></table>
This works fine in IE 8/9 and FF and Chrome but not in IE 7.
IE 7 just will not use the 2nd rule - despite it being more selective.
In fact I have tried all sorts to fix this problem - all to no avail.
I have tried adding the no-headers class on the th element too
th {background-color: #000000; color:#FFF;}
th.no-headers {color:inherit; background-color:inherit ;border:inherit; }
<table><tr><th class="no-headers">This inherits bground from parent</th></tr></table>
and even that doesn't work - I am left feeling like I am doing something really obviously stupid / wrong - but then again it works fine in other browsers!
Any help greatly appreciated.
IE7 does not recognize the inherit keyword (except on a few obscure properties).
Your best bet is to specify the default colors manually.
According to this SO post: IE7 CSS inheritance does not work IE didn't suport inherit until IE8. So you will have to specify the color, background, and border specifically.
IE7 does not support style inheriting. That was introduced in IE8.
See: IE7 CSS inheritance does not work
This is not a huge problem, since IE8 is a universal upgrade from IE7, unlike IE9, which is only available for Windows NT6 and above.
I just discovered the box-sizing: border-box CSS property which solves a bunch of cross browser layout problems for me.
The only issue I now have is that IE7 doesn't seem to support it. Is there a hack to get IE7 to support it?
There are several ways to do this, none perfect.
As you point out:
Firefox / Opera / Safari / Chrome / IE8+ will recognise the box-sizing property allowing you to use border-boxes.
IE6 will use the old school (correct?) border-box model by default.
However IE7 uses the W3C padding box model when in standards mode, and will not recognise the CSS box-sizing property so there's no way to revert to the border box model. If you need to support IE7 (and you probably still do), you're stuck with one of four options:
1. Conditional Comments:
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->
Use box-sizing for IE8 and 9, then make specific overrides for IE7. This option will be painful.
2. The Schepp Box Sizing Polyfill:
https://github.com/Schepp/box-sizing-polyfill
This excellent Polyfill is an HTC file which modifies the default browser behavior in IE6 and 7 so they use the W3C box model. It's fine for light use, but may cause problems of it's own if used extensively. Use with caution and TEST.
3. Old Style Nested Divs:
The old style nested div approach is still a fine way:
<div style="width:100px; border:1px solid black">
<div style="margin:10px">
Content
</div>
</div>
A non-semantic nested div provides the padding indirectly, with the disadvantage that your markup becomes untidy. Obviously don't use inline styles, I'm using them here for the sake of illustration.
The old adage Never use padding on a fixed width element still stands true.
4. My Preferred Solution - A Direct Child Selector:
The other way round this is with the direct child selector. Say you have a fixed width div containing some content:
<div class="content">
<h1>Hi</h1>
<p>hello <em>there</em></p>
</div>
You can then write a rule to add left and right margins to all the direct children of the div:
.content {
width:500px;
padding:20px 0;
}
.content > * {
margin:0 20px;
}
This will add a little margin to the h1 and p, but not to the nested em, giving the appearance of 20px padding on the content div, but without triggering the box model bug.
5. Consider Dropping IE7 support
IE7 is the last browser not to recognise the box-sizing property. If you're getting little traffic from IE7, you might consider dropping support. Your CSS will be much nicer.
As of late 2013, this is my preferred option.
2017 EDIT: It's probably long past time to drop support for IE7 now, and just use border-box.
You can use a polyfill to make it work on some items, it didn't work for my input fields though.
https://github.com/Schepp/box-sizing-polyfill
box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);
Just note that the behavior url is relative to the page and not the css file. Use relative paths to site's root (start the url with an slash and then go from there).
I'm assuming you're using this to get around the IE6 box model. Unfortunately, there really is no general way to trick earlier versions of IE into supporting arbitrary CSS properties.
I would recommend not using the box-sizing property, because every browser other than IE6 will implement the box model correctly. The Wikipedia article does a good job of explaining how IE6 differs.
To solve this, I recommend using a separate style sheet for IE6, and including it using IE conditional comments. In your IE6 style sheet, you can specify different widths/heights/padding/margins to make your layout look consistent. You can include a style sheet for IE6 only like this:
<!--[if IE 6]>
<link href="ie6sucks.css" rel="stylesheet" type="text/css" />
<![endif]-->
I have set some style for h2 tags (color, font-size, etc.), but when I put "A" tag inside, then style becomes as link. My html:
<h2>
<a class="no-decor" href="http://localhost/xxx/">Link</a>
</h2>
So, as You can see, I've created "no-decor" class. It should inherit h2's style for "a" tag.
a.no-decor {
color:inherit;
font-family:inherit;
font-size:inherit;
font-weight:inherit;
text-decoration:inherit;
}
On Firefox everythig is ok, but IE still shows tag "a" style (underline text-decoration and blue color). I know, I can set some style for "h2 a", but maybe somehow it is possible to force work CSS inherit values on IE7?
P.S. On IE6 doesn't supports too.
P.P.S. There is some example in same way: http://www.brunildo.org/test/inherit.html
No, IE has never supported inherit for any property - sorry. This has been fixed in >= IE8.
Whilst you could use a JavaScript fix to copy the properties from h2 to a, it's probably easiest just to apply the same styling rule to both elements:
h2, h2 a {
font: something;
color: black;
text-decoration: none;
}
You don't need to set inherit on text-decoration anyway, because decoration doesn't inherit from a parent into a child: the underline effect is on the parent and goes through the child; the child cannot remove it (modulo IE bugs). 'text-decoration: none' on the child is the right thing, unless you want potentially two underlines...
try
a.no-decor{
color:inherit;
//color:expression(this.parentNode.currentStyle['color']);
text-decoration:none;
}
That'll get rid of your blue color and the underline. You could use a similar expression for the underline, but you'd be better off just using text-decoration:none since that's all an inherited text-decoration is gonna give you anyhow and no need to use expressions when not absolutely necessary (you'll take a performance hit when using expressions).
A bug's a bug and there's nothing much you can do, short of workarounds.
There's a test for inherit support here.
You can also try to use a script like ie7-js, which "is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser"
Internet Explorer <= 7 versions don’t support the value inherit for any properties other than direction and visibility.