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");
});
Related
We are working on redesigning our web-based application’s Front-end. We started with a PoC based on Extjs 6 and we are facing few compatibility issues.
These compatibility issues are related to IE8 and CSS, while it is mentioned on your website that Extjs6 is fully compliant with IE8.
CSS classes work perfectly with all Major Web Browsers (Firefox, IE11, Chrome...) but some do not on IE8.
This is an example of CSS not working properly under IE8:
Ext.create('Ext.button.Button',{
text:'Button Test',
cls: 'btnColor',
renderTo: Ext.getBody(),
});
.btnColor {
background-color: green;
border-color:green;
}
Works on IE11 :
But not on IE8 :
We would like to know if this is a known issue and is there a specific processing which allows us to handle this kind of needs.
Thank you in advance.
The element in your comment above is the wrong element - that's the inner element for the button; you want the class with an id something like button-1009 (it's going to be an anchor or div tag a few elements up in the hierarchy).
And as to why it's not working - there are going to be multiple CSS selectors that define the background colour. The default one, from ExtJS, is going to be x-btn-default-large. The full CSS class for the attribute is going to be something like x-btn buttonCls x-unselectable x-btn-default-large x-border-box.
Done like that, both the buttonCls and x-btn-default-large are equally valid choices - the browser must pick one to use. IE8 is picking the last one; other browsers are picking the first one. Neither is wrong - the ambiguity is in your code.
To fix it, make your CSS selector more specific. Try:
.x-btn.buttonCls {
background-color: green;
border-color:green;
}
This applies to buttons (which will be the only things that have the x-btn componentCls attribute) that have the buttonCls cls attribute.
The problem is JavaScript syntax.
IE8 and earlier are strict about trailing commas on arrays and objects.
Your line renderTo: Ext.getBody(), ends in a comma, but is the last item in the object. In IE8, this will fail to compile.
The solution is simply to remove that comma.
You can keep an eye open for theses kinds of things by running your code through a linting tool like JSHint or ESLint, which will flag this kind if thing up.
The answer of Sencha support team:
https://www.sencha.com/forum/showthread.php?305980-CSS-compatibility-issues-on-IE-8.&p=1118734#post1118734
This clarified a lot for me, it might help you :)
My skin has the following CSS:
dl.definition dd:last-child {
margin-bottom: 0;
}
/* IE class */
dl.definition dd.last-child {
margin-bottom: 0;
}
Is it possible to combine these into one even though the second is just for IE ?
Thanks everyone for the answers but I am not sure anyone really said if I could just do this:
dl.definition dd:last-child,
dl.definition dd.last-child {
margin-bottom: 0;
}
Your hoped-for solution won't work:
dl.definition dd:last-child,
dl.definition dd.last-child {
margin-bottom: 0;
}
The reason this won't work is because as far as old versions of IE are concerned, dd:last-child is an invalid selector, and thus it will throw away the whole block. It doesn't matter that it also contains a valid selector; the whole thing is thrown away because of the invalid one.
A few options on how to improve things, and save yourself the hassle of duplicated code all over the place...
Upgrde IE. There are javascript libraries available such as Selectivizr or ie7.js/ie8.js/ie9.js which patch IE to make it support more CSS selectors. :last-child is included in pretty much all these libraries.
Downgrade your CSS. You're already writing the .last-child class into your code to support old IE versions, so just use that for everything and forget about using the :last-child selector. Then you only need one selector for all browsers.
Graceful degradation. Drop the IE-specific code, and just allow Old IE users to see a slightly broken page. As long as it doesn't affect usability, it may not be a big deal. You may not have that many old IE users (and the numbers will continue to fall), and those people who are still using old IE are used to seeing sites that are slightly broken (or worse) these days.
Re-arrange your layout to use :first-child instead of :last-child. :first-child has much better support (it goes back to IE7, though there are bugs with it in old IEs).
Use a CSS compiler like SASS or Less, so you can write your CSS in a more logical and structured form, before converting it to real CSS code when you deploy it to the site.
Hopefully one of those solutions will work for you. My suggestion would be the Selectivizr library, but any of the above should provide a workable solution for you.
In the HTML add
<!--[if IE]>
<style>
dl.definition dd.last-child {
margin-bottom: 0;
}
</style>
<![endif]-->
Not an exact answer to your question but a workaround for IE6 & IE7 can be found here which tells that you can use properties in single css file.
This gives again a more sophisticated solution.
And again you can use multiple properties in single css file and browsers will ignore it if it does not understand it. Cheers to growing smartness of browsers. :-)
Conditional comments for IE. You can specify verion of IE, for that you want to select CSS
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).
I have been css coding for my theme that is based off from Twenty Eleven. Everything looks fine except in IE7 & IE8.
I realized that in those two mentioned browsers, my styling for the widget class ".widget" is ignored. I figured this out after doing an elimination test. Every other class that I have tested takes in the css adjustments. Only those made to .widget is not taken in by IE7 & 8.
Is there a known solution to this?
Extra information: I want the each widget to be contained within a box by implementing black borders of 1px.
Without more information, it's impossible to say for sure, but as miszczu commented already, older version of IE have trouble applying rules with multiple classes, like so:
.widget { background: red; }
.widget.blue { background: blue; }
In most browsers, if you had <div class="widget blue">test</div>, it would be blue. But in older IEs, it will still be red, because it doesn't know how to handle the multiple classes.
If this doesn't apply to you, perhaps you could edit your question with more details -- a link to your site or a jsfiddle with the problem would be greatly helpful to solving your problem.
Thanks #Scott and #misczu for the help.
I did major elimination testing and found out that it is a HTML5 issue. IE7 & 8 cannot read the new HTML5 elements and it seems my earlier outsource neglected to include the HTML5 js compatibility file. IE7 & 8 wasn't able to process the 'aside' element for which the widgets were contained in.
In the end I had to retrieve the HTML5 compatibility code from Google SVN; the one included in an outdated version of Twenty Eleven was quirky. It works properly now.
I was thinking this morning, my mind was on CSS and creating different style sheets for IE7, IE8, FF, etc.. I started wondering if there was a tool that exists to make this easier. I was thinking something along the lines of this:
Build the "core" style sheet.
Any time a "broken" rule is entered
into the "core" style sheet, a fix
is added to the associated browser
specific style sheet.
If a fix is added it would also be
noted, so you know that a particular
style has extras in the browser
specific sheets.
This could work in two different ways, either automatic, IDE style, or as a tool which you input the core css and output all the different css you need.
Thoughts? Does something like this exist?
The problem with this is that the term "broken" is subjective. No machine is able to tell what you consider to be "broken". Granted there are some well-known bugs, but even then you're only really scratching the surface.
Your best bet is to just code using web standards and using a tool like SASS to make coding your CSS easier.
For instance, if you are using HTML5Boilerplate and want to add an IE6 specific rule, all you do is something like this:
#mydiv {
/* mydiv specific styles */
.ie6 & {
/* IE6 specific styles for #mydiv
}
}
Compass is doing some of what you were looking for.
I know it is has been 5 years since you asked but this might help someone in pain :)