First, thanks so much for your time in advance.
I work for a higher ed institution in Philadelphia. We're trying to utilize the nth-child pseudoclass to make every other row in our tables gray.
The line of code I've written in our Styles.css files is
table.oddrows tr:nth-child(2n+3) {background-color: #eeeeee;}
I used 2n+3 because the first row of the table will be a darker gray than every other row because it will be a header, so I want it to start applying the background color to the 3rd row, and then every two rows after that (i.e. 3,5,7, etc.)
We use Ektron's CMS (version 8.01 SP1), and for whatever reason, the class just won't show up in the available class list, and when I try to apply it manually (i.e. manually putting <table class="oddrows" width="500"><tbody> in the body of the code) it STILL doesn't work.
I've cleared my cache on several occasions, and am still drawing a blank. (I'm using IE 8, for the record)
Any ideas? Everything I've read says my syntax is correct, and I'm about ready to tear my hair out.
Thanks again for your time!
The nth-child selector isn't supported in IE8. For IE, it's only available in 9 and up.
In order to get something like that to work, you may have to stray from pure CSS, and use some jQuery. If you're already using jQUery for other things in the site, this is a no-brainer, as it would only be adding a couple lines to your document ready statement like so:
jQuery(document).ready(function() {
$('.oddrows tr:nth-child(2n+3)).addClass("darker");
});
You would also then have a CSS class of .darker:
.darker {background-color:#eee}
Now if you're not already using jQuery (or don't have the option), this obviously won't work.
Related
I have an ID that I need to modify via an extension called Stylus (Chrome). Basically, I need it to display nothing, as the website uses an element I do not want to see. In any case, when I place:
#7821s3s693453355sdb487326acb {display: none !important}
It still displays it. I also tried removing the class. I was wondering, is it possible that certain elements like buttons (which this one is specifically) still be displayed, regardless of whether or not we want it displayed or not?
I tried removing other things for testing, and those worked. Just not THAT specific one. I dunno if it's because the ID is extremely long, or something else I'm not seeing.
Try:
*[id="7821s3s693453355sdb487326acb"] {display: none !important}
I have mistakenly pasted couple of CSS selectors in the same CSS file twice, as time passes I am being able to track them manually and delete the later one. I wanted to know if there is any better way to find if a CSS selector has been used twice in my CSS file so that I could merge/delete them?
Here is one possible solution:
Copy both files into a CSS code formatting tool e.g. http://www.codebeautifier.com/
Format it so each CSS ruleset is on one line, e.g. p { font-size: 13px }
Put the result into a sorting program, e.g. the sort command on Linux/Mac terminal.
There are online tools that can do this too.
Now all the duplicated selectors should be next to each other. You should be able to combine them by hand pretty easily.
Also, don't forget that different ordering of CSS rules can have different results.
Also try this https://codebeautify.org/remove-duplicate-lines
Using the exact same CSS,
the onclick pseudo effect works fine with this code on one page of same site:
<a data-url="#" class="btn btn-share referral_button">Button Text</a>
(but admittedly it is on a different page with different divs)
but not on another page, where the code is:
<a data-url="#" class="btn btn-share referral_button" onclick="javascript:$find('ABC').set_activeTabIndex(3);">Button Text</a>
instead of behaving as it should it shrinks when clicked - and sort of reverts to how it would look without any css styled - or at least not the correct css styling
I initially thought it was something to do with the onclick="javascript... stuff somehow clashing/over-riding and affecting the CSS from performing how it should but * EDIT it can't be this because I just removed the whole onclick section and the problem still existed :( **
so it must be something else..
the relevant CSS is here: sorry it's long and probably bloated. the most relevant stuff i believe is at the bottom...
https://docs.google.com/document/d/1N7YQ5YuvY6DJn8-nr4sinx4LY7WOS88eErpRHe4IE_g/pub
Seeing as how its an invalid syntax, I would say remove the " \9" from all of your :active and .active statements
Like below:
.btn.active{background-color:#cccccc \9;}
EDIT: Furthermore, (not really relevant to the answer)
Your CSS is a pretty hot mess. (No offence)
You can easily clean that up and make it a lot more manageable.
Plus, it could just be my tired eyes, but it seams like half of it is just repeating and/or overwriting the other half (which goes back to cleaning it up and making it manageable).
Honestly though, your the one working on it, so its as long as you can read it and use it. To each their own. I prefer my CSS quite readable in a dev environment.
The most obvious suggestion is there is something on this mysterious "Other" page, that is overriding the style.
Use a tool like Firebug for Firefox to inspect the elements and its' styles this may give you a hint as to what is overiding the behaviour you are expecting.
Also check that the CSS is the same on both pages if you are not using a common CSS file.
Read up on CSS Specificity, which is could be the root cause of you problem. This could help explain why style b is overiding style a.
It boils down to some difference on the two pages.
I want a background image on my page (background.png), but some rogue CSS is thwarting me.
I can see that my style.css from line 39 is being overwritten. I would think this is being done by something like style.css. I search and do not find anything but my original desired specification in that file. I can not find out what css is doing the overriding.
I have searched all the css files I can think of for the specified image (bg_p2_28.jpg). I have searched all the css files for background, nothing seems to come up. It is not being specified in the main HTML
I am barely struggling through as a reasonably competent programmer that has not used HTML since the mid 1990's. I am just trying to modify a template I bought.
What techniques can I use, or how do I interpret what I have here shown here to figure out what CSS override is ultimately being pushed into the page?
EDIT:
Adding the !important; works. It feels very dirty for some reason. I do not know why. I have tried following the javascript in, but the debugger is confusing to the uninitiated. Is the Important! a terrible thing to do, or reasonable? I think it would be useful to understand where these are being set in the java code, but when I search the code, I think the values are stored in variable, so can only be caught at run time.
That's coming from the inline style="" attribute.
If you don't see it in the HTML source, it's probably being set by Javascript.
You can right-click the element in the inspector and click Break on Attribute Modifications to find out where.
You could try background: url(src) !important;, not the perfect solution, but i think it will work for you in this case.
The grey element.style means that it's a style attribute directly on the element itself. Any style on an element will override styles from style sheets unless the sytlesheet style is marked with !important
Wondering if someone knows a way around this: I have a RichText TV that has a table in it. My external CSS, however, does not affect it.
I have used very specific pointers and even given the table an id, but nothing I do seems to change the style. Inline CSS does work, however.
Does anyone know why this is?
I can see that there may be some css issues as well.
For instance to style the table row you are using:
.slideritem .slidertable tr
but you should use instead:
.slideritem .slidertable tr td
Double check your css and the styling should go fine