I'm working on a website developped with C#, ASP.Net and Telerik components. I have a RadButton that doesn't display properly an image I'm trying to set to it.
Tracing the styles with Firefox, I've seen that my image is shifted by some properties (padding) that come from a file called WebResource.axd.
I tried to play with the padding property of my button directly within the Default.CSS file but it keeps being overwritten by this WebResource.axd.
So far, I've found that the keyword important in order to force my properties to be used no matter which parameter is used later.
Within Default.CSS :
.rbLinkButton {
padding: 0px 0px !important;
}
It works but, it feels bad and I feel like I'm introducing an evil shortcut here... Is there a better way of doing that ?
Better is to increase the specificity of the CSS rule so that yours takes place. More info here: http://blogs.telerik.com/aspnet-ajax/posts/08-06-17/how-to-override-styles-in-a-radcontrol-for-asp-net-ajax-embedded-skin.aspx
Related
I understand that if a sytle is overridden then it is crossed out in Google Chrome tools and then you can go to the Computed tab to see, which element has overridden the style.
Say I have some css like this:
.myClass
{
position:static;
top: 20px;
}
This is clearly wrong because the top attribute does not work with positions that are static. When I load the webpage in Google Chrome and press F12; the style appears under the styles tab as if it was applied to the webpage, which I find a little confusing.
Does Google Chrome (or any other browser/tool) tell you what the error is e.g. "cannot apply top to statically applied element" (like you get in Visual Studio when there is an error in your code e.g. NullPointerException).
A CSS class is a set of rules applicable to any element on your page that also can change during the live time of the page. As mentioned in Dais comment, properties are inherited and cascade down.
There is no reliable way to validate a set of CSS rules, because they all interplay each other and are about to change. Especially if you ask for a feature in your IDE like the NullPointerException hint this won't work, because CSS classes are composable and are JIT compiled. An IDE could not know beforehand which class are combined with other classes assigned to which elements in regards to the DOM tree at a specific app time state.
Mozilla Firefox has such a feature. It tells you why a rule isn't applied directly in the Inspector.
If anyone has figured out how to remove the outline that Chrome & Safari add on focus to a textarea, specifically in ckeditor, I'd love to hear it. I've applied multiple variants of "outline:none" to:
A custom CSS file I defined in config.js
The editor.css file of the skin I'm using
The main CSS file of the actual page
Nothing works, found a suggestion here http://cksource.com/forums/viewtopic.php?t=17983 that claimed to work, but no dice.
I know I'm late to the game on this one, but I found this question while trying to solve the problem on my own.
Luckily, I was able to figure it out.
.cke_focus {
outline: none;
}
The .cke_focus class is added to the element via javascript whenever it has focus.
I added this into my own stylesheet which is called after the one included with CKEditor. If you need to, you can always up the specificity, but you shouldn't need to.
As usual I developed it in Firefox. Usually it works without modification in Chrome/Safari, and also IE8.
But when I tested on Chrome and Safari, I was surprised to see that it does not work.
My CSS is valid (validated on w3c). The JavaScript (using jQuery) seems to be valid too.
The affected elements are not redrawn after an attribute value is modified through jQuery, so the CSS rules for the new attribute value are not applied, not until I go into the Chrome inspector and deselect/select them manually...
Update: I do not have a working link for this problem anymore.
The problem was that Webkit was not "redrawing" when attributes were changed, but only when classes where changed, so CSS blocks with selectors such as div[attr=value] would not apply when attribute attr was changed to value through JavaScript.
One workaround is to use classes instead of attributes (.className) in selectors. Performing a class change after changing an attribute would also trigger a redraw also fix the problem.
This post is more than 5 years old, I believe the problem has been fixed in Chrome now.
The issues seems to come from the fact you are using attributes (selected attribute on DIVs) to control the state of your images; it seems like the webkit engine doesn't update the graphics until something actually changes - like a class or a style property.
In general, you should know that using a custom attribute like that isn't best practice. You can use a class to indicate when it's on, and .addClass("selected"),.removeClass("selected") when needed.
Also, you can display the images as background image of an element and control it directly from CSS, with:
.item div.caption { background-image: url('bras/B/btn.png'); }
.item.selected div.caption { background-image: url('bras/B/btn_selected.png'); }
this will simply change the image according to the div.item selected class.
For a simple work-around, you could add at the bottom of your .click handler something like $("body").toggleClass("somethingrandom");, but I really recommend to change your code to work with CSS, background-images and classes.
Do you need to modify the attribute value only? Could quite easily add a 'selected' class to the <div class="item" /> instead/as well. Using this alone/as well as your attribute targeted css will automatically update the images display.
Have you opened the error console within Safari yet?
In mine, I'm getting 404 errors on two files...
/bras/bras/A/3/2/1/bra.png
and
/bras/bras/A/1/pink/3/bra.png
EDIT:
You also have a </head> tag at the very end of your document instead of a </html> tag.
body
{
font-family: 'Lucida Sans Unicode';
font-size: xx-small;
color: #008080;
}
on the top of my style sheet, and non of those specs are taking affect on my page, nothing, i tried doing it on td, table, tr, span, div just in case i needed to be more specific, but nothing is working, i want to make global changes without having to change things one by one and i can't seem to find a solution, any ideas?
thanks - your input is appreciated
ps: more info for those interested:
i have a standard mster page, and content pages, listview control that populated data from a database, but all the elements in my controls of concern is html elements (im sure some would be runat="server") the style is linked correctly as well, as other styles on the style sheet work...
here is the code where the text is not changing..
HTML TAGS ARENT DISPLAYING IN MY COMMENTS FOR SOME REASON...???
Clear your temporary files and try restarting the browser - chances are that its using a chached copy of the page.
There is nothing syntactically wrong with that code. The issue must have something to do with how it is being applied to the HTML (and thus with some code or HTTP response header that you haven't shared with us).
Hard to say without seeing the html and style sheet, but perhaps later declared styles are "overwriting" your body style?
If you can't see these changes they are being overridden by other styling applied somewhere else.
The easiest way to debug what css rules are being applied to elements on your page is by using a tool like the firebug extension available for firefox (available from http://getfirebug.com/)
Once you have this you can select an element and see what has been applied by what rule - and then you can override that rule!
There is also an IE dev toolbar, and developer extensions for chrome and firefox that do the same thing.
Hope that helps.
I have a problem with a css in a joomla module , the site is www.bacauacum.ro , the module that has this problem is "TITLURILE ZILEI" the module from the bottom of the page, it always gets the value "height : 30px" I looked in all the css and there is no such value .
Its certainly one of the Javascript file's that's doing it - I'll see if I can find which one for you
it's in http://www.bacauacum.ro/templates/rt_mixxmag_j15/js/rokmodtools.js although I cannot narrow it down without heave decompression of the packed code there.
edit the css, or the html and add the following attribute:
height:auto !important;
the value is set by one of your scripts. i cant easily tell which one, you have lots going on, and some of your scripts are minified
Something's giving the element a manual style of height: 30px. I don't see it in the source; it's probably a script somewhere on the page.