Ok so I need to add a background color to the last row in the all the tables except the last table where I need to add a background color to the last three rows.
table tbody tr:last-child
table:last-child tbody tr:nth-last-child(-n+3)
How do I make this work in IE7 and IE8?
Preferably a CSS-only solution. Will a solution like Modernizr solve this? I prefer not to travers the dom with jQuery and add custom classes/styles with my own script.
short answer: no to a css-only solution;
modernizr isn't going to give the css engine in old ie any additional features. Your best bet is to either a) add classes to the rows you want styled differently or b) do it with javascript. If you are generating the tables dynamically (with php, for example) then adding classes there is easier.
CSS-only solution not possible, you are dealing with browsers that are way too old. On the upside, you don't need your own script as Selectivzr does just this, or alternatively the all-in-one solution that is IE9.js (fixes a ton of other IE bugs, not just add new selectors).
Related
Alright, so I recently found this script called "Selectivizr" and I was really excited, but I plugged it into my project, set it up just as it said, and it didn't work.
So, what I am looking for is any sort of JavaScript library/script that will allow me to use CSS3 selectors (especially :checked) in IE8.
Selectivizr seems broken, and hasn't been updated in over a year. Has anybody else had luck with it?
Does anybody know of any other scripts that will allow for use of CSS3 selectors in IE8?
Not looking for CSS3 stylings like border radius, shadows, etc. Just looking for the selectors, like :before, :after, :checked, etc...
Dean Edward's IE9.js is pretty solid, though I have heard of some incompatibility problems when using other libraries as well. Never experienced them myself, but haven't used the library too often in the wild for a long time. Plug it and play, and if it doesn't break then you're all set.
Link: http://code.google.com/p/ie7-js/
Demos: http://ie7-js.googlecode.com/svn/test/index.html
With jQuery code, you can use these few lines to toggle a class on all your checkboxes (or on it's container) any time it's checked or unchecked. This then lets you use regular CSS code in all browsers.
$("input[type='checkbox']").click(function() {
$(this).parent().toggleClass("checked", this.checked);
});
Working example here: http://jsfiddle.net/jfriend00/7jA5r/.
If you dynamically create checkboxes, then you could use the dynamic form of .on() to make sure to catch them.
I would personally rather use a solution with a few lines of code like this than use a heavy library that tries to add CSS style file capabilities. If you were going to use that, make sure you understand what's really going on under the covers before you adopt it.
If you just wanted a selector libraryby itself, the Sizzle selector library works across a wide variety of browsers including all the way back to IE6. It will adapt to the capabilities of the host browser, using as many built-in capabilities as are present and using it's own code when the host browser does not support an explicit capability.
You can use just the selector library itself from here or it is also the selector library inside of jQuery.
It's extremely simple to use. You just do something like this:
var items = Sizzle(":checked");
and you will have an array of DOM elements that match the selector.
I have designed a web page using catalyst, CSS and html. It is working fine in all browsers. I have tables in web page and columns for these tables can be sorted(ascending or descending order). I have coloured the rows of the tables alternatively. All the tables are looking fine with rows alternatively colored, but one of the table does show this colouration until the sorting is enabled or any table cell is clicked/selected.
I am not understanding why this is happening.I kindly request someone to help me with this regard and tell me why this would happen and how to resolve this problem.
Thanks in advance and regards
I tried this but its not working. I would be helpful if you could explain it in simple way, as I am new to programming and creating web applications using tutorials.
Just use this (change the color to what you need) CSS applied to your table:
table tr:nth-child(even)
{
background-color: #F7F7FF;
}
It's well supported in almost every browser but IE added support only with version 9. If supports for IE6-8 is mandatory you may use selectivizr. You write your CSS with all the standard selectors you need and it'll do the trick for you, when you'll drop IE8 support you simply have to remove the include, no JavaScript tricks all around and one standard CSS.
There is a CSS selector, really a pseudo-selector, called nth-child. In pure CSS you can do the following:
tr:nth-child(even) {
background-color: #000000;
}
Note: No support in IE, even IE 8.
Or, if you have jQuery:
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
Can any CSS3 experts tell me the best strategy for handling the before and after pseudo elements with IE6 and IE7?
If you use jQuery it is a simple one-liner. Just use prepend() and inject a span with a class .before (for the simplicity of changing the CSS). I've made a fiddle for you.
I write a small script for old IE to add special elements in DOM. (Via IE conditional comments.) The rest of common browsers get this by pure CSS. The downside is I have to write the code twice. The upside, I have IE only code in one place.
IE doesn't support CSS3 columns — no big deal, right? Even though, I'm trying to find any modernizr-like library to do the trick. I don't really want to code different CSS for IE, as that would be giving way too much care and attention to something we all despise. Any suggestions?
As of IE10, there is now native (and un-prefixed) support for CSS3 columns.
http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx
Pragmatic Programmer's HTML5 and CSS3 book has some great advice on stuff like this. For columns, it recommends using the Columnizer Plugin for jQuery for IE.
Without seeing your code, I would suggest putting each column in a div. Then redefine the body tag after you load the stylesheet for IE only, and add the styles for the divs.
For IE only:
<!--[if IE]>
**** your styles ****
<![endif]-->
You could even take it a step further and move the body style into it's own style sheet and load the style sheet you need depending on the browser. It'll depend on how far you want to take it.
Try setting display: inline-table; on the items you want laid out as a table
What are helpful CSS properties which can be helpful for table?
I have to make so many complex tables which have different type of colors in columns, thead, borders, padding, alternate row and column colors etc. I want to use as less as possible of css classes.
How to make complex tables design with combination of as much as possible of HTML tags and CSS properties? and should look identical in all browsers.
Update:
And on same page I have to add multiple table with totally different styles
Tables are really, really old technology and tend to be very reliable in my experience. I would just get going, plan the CSS well and deal with any cross-browser issues if and when they come up.
http://developer.yahoo.com/yui/reset/
The foundational YUI Reset CSS file
removes and neutralizes the
inconsistent default styling of HTML
elements, creating a level playing
field across A-grade browsers and
providing a sound foundation upon
which you can explicitly declare your
intentions.
I must admit though, I am not sure I understand your question
you should use for this reset style sheet.you can visit this and read about reset stylesheet
reset staylesheet