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
Related
H ello, everyone!
I have a problem with styling md-tab
It looks like this by default:
This is what it should look like:
What I am trying to achieve is:
use styles from material theme or colors from it (ng-colors)
update background of active/inactive elements (as in the second picture)
Here are some thoughts:
CSS modifying doesn't seem to be right in this case because I want to rely on theme colors.
md-primary class assignment doesn't work on md-tab for some reason (don't understand why)
md-colors assignment doesn't work for the same reason, I suppose.
probably, I will have to create some custom tab components instead of these and then style them. I am not sure if it is right in my case.
Question. Is it possible to style md-tab the way I described?
Thanks!
The fastest and easiest way to do this is via updating css like this
md-tabs .md-tab {background:white; margin-left:20px}
md-tabs .md-tab.md-active {background:#006E7B; color:white !important}
md-ink-bar {display:none}
I have changed my css sheet for my entire site and it works great. The change has to do with the background color of rows in tables. Although it does what I want, there is one view that I would like to be exempt from this alteration. Is there a way to exclude this view from the change or create a new css sheet for this specific view?
Well, I would come up with a CSS styling strategy. The goal should be to minimize CSS and overrides. Also, having an extra CSS file for just one page will cause an extra HTTP round trip to get the resource. My recommendation is to stick extra CSS classes on this view. Then, override precisely the styles that you need in your global CSS styles.
I figured out the solution which ended up being much easier than I expected. Since I am very new to using CSS and HTML I was unaware of the style tag. However, that is what I was looking for. For anybody looking at this in the future, just use:
<style>
(CSS that you would like to override)
</style>
I'm using Eric Meyer's Reset CSS, and all hyperlinks "hover" (you know, act like the cursor is hovering over them) if the cursor is horizontally-adjacent to said hyperlinks, not necessarily hovering over the text of the hyperlinks themselves.
This is probably the doing of the Reset CSS, however I am not sure how to fix this, I'd figure it out eventually, but I'm hoping someone here can provide a quick fix.
Also, where should the Reset.CSS be in relation to my main.CSS? Should it be on the line above or the line below main.CSS for priority in the HTML file? That might be an issue as well.
Thanks!
It is usually a good idea to reset your styles first, using reset.css at the very top of everything else, and then add you own styles.
The basic rest.css from Eric Meyer does not touch anchors (a) in any way, so I suspect your own code (or browser) for strange mouseover-behaviour. Use your browsers developer tools (usually opened up by pressing F12) and check the styles applied to the element.
Based on what I understand, as far as I know this can be caused in two cases.
First, if your markup is like this <a><li>some hyperlink</li><a>, and your CSS is like this:
a:hover{
....
}
OR
your markup is like this <li><a>some hyperlink</a></li> <- this is correct way but your CSS is like this:
li:hover{
...
}
so you might want to check your markup, I don't think so that this is caused by your CSS reset.
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
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.