I am using Joomla 1.5.
i am having a page where a cSS has been added for the title
which is in <strong></strong>
I firebug it , it appears as
element.style {
color:#666666;
}
i dont know of from where it comes from..
but i am having a css applied for the same tag with other color. but it disappeared.
How to remove the element.style globally..
It is possible to override inline styles from an external stylesheet
strong[style] { color: blue !important; }
This works in most major browsers, Chrome, Safari, Firefox, IE8
It doesn't work (to my knowledge) in IE6 / IE7
Hope this helps.
This code comes from HTML and not from your CSS.
This HTML with generate your element.style:
<strong style="color:#666666;">Just text</strong>
Element.style, as the name says, its the style defined on element and there is no way to override it. If you do not want that color in that element you must remove/change it on html.
It seems it is not always set in HTML. In My case the element.style is empty:
element.style {
}
It is not set in any css and it is not set in any html source.
I dont't know where else I should look.
Inline styles are generated from HTML or (more often these days) javascript applying styles after the page had loaded.
Jquery is often a culprit of this, performing animations using css applied directly on the element that overrides your stylesheet.
For instance you may show, then hide a div, leaving a 'display:none' on the element that overrides any naturally cascading CSS that precedes it. This comes up often when you are mixing CSS transitions and media queries with javascript.
Check your JavaScript for any instances of applied styles.
Try using a callback function on the animation to clear styles:
$(this).css( "display", "" );
Related
I've the following problem, I'm trying to change the color of the text of a "< li>" element, in joomla menu. I give the menu a link to css selector called blueMenu, this is my CSS regarding the class:
.blueColor {
color: blue;
}
However this doesn't change the color of the text, on the other hand if I change "color" with "background-color" the background of the text becoms blue. Any idea what may causing the problem?
You dont give much information, but it might be that the li has a child element inside that its overwriting the li styling, make sure you using the style on the last child.
You can also force it with !important;
.blueColor {
color: blue!important;
}
This really much depends on your template.
As already said, reasons can be inline-styles, or may more "distinct" declarations.
If you just specify the class like you did in .blueColor this will be treated with a lower priority as e.g. li.blueColor or to get even more clear both with be treated with a lower priority as e.h. #someId.andClass .subElementClass li.blueColor a.thisIsWhatIsReallyBlue
This is more about CSS specifications than a Joomla-Problem though.
You might check the style that is really applied by just launching your Development-Tools of your webbrowser (for Chrome simply press F12 or right-click on the element and inspect the element directly)
The CSS-Section on the right side might tell you about what really makes the item become blue ;)
Oh, and just a note:
As already mentioned you can use !important to "force" the styles to be applied, but if this is not absolutely necessary, i'd suggest to find the way to override this style on a clean way, since !important, if used to often, might result in a complete mess of your stylesheet.
regards
I'm not familiar with joomla but it may be inserting an inline style to whatever element you're trying to style. Right click on the element and use inspect element (firefox) or just inspect (chrome) to see if any styles were applied.
It'll look like <div class="" style="color: blue;">
I have a popup that comes up over a blanket div that greys out the entire screen, but I don't like its positioning. So I tried to manually enter left: and top: elements into my CSS, but when I look at Chrome's console, there's this element.style {} that's overriding my code.
I've searched my CSS file for element.style and for 597px and 794px and I don't get hits on any of them.
What is this, and why does it have the values that it has?
element.style is a part of your browser devtools that indicates the inline style of the element which has a higher specificity value than any CSS selectors.
That inline styles may be added by a JavaScript code, if so, you can override that declarations by using !important keyword within your stylesheet (e.g. left: 610px !important).
element.style refers to inline styles on the dom element. For example:
<p style="color:#cc0000;">Foo</p>
the color of that paragraph would show up under element.style.
You can fix with your css by doing this:
#popUpDiv[style]{
left:610px !important;
top:0px !important;
}
HTH
-Ted
That's probably manipulated and set by javascript (either that or you edited the element.style{} rule yourselves on the developer tools console).
Look for javascript code that changes the display, top and left properties of #popupDiv
It is the style that you have in the HTML file.
try to delete or change the style in HTML.
I need to hide 3 icons in a page where I don't have access to html but where I can modify CSS file.
The html code is:
<img class="color_box" title="Annotations" src="http://www.site.com/images/notice.png">
<span class="with_tooltip" title="This is a message"></span>
<img class="color_box with_tooltip" style="background-color:#FFFFFF;" src="images/clear.gif" title="White">
I tried different combination such as :
.color_box with_tooltip{
display:none;
}
or
.color_box, .with_tooltip{
display:none;
}
but none of them allow to hide all icons. Some are hidden and some others no according how I change my code..
Any suggestions please ?
CSS rules are applied via a specificity level. Rules that are more specific can trump those that are less specific.
So you may have a style like
#id .yourClass {something...}
That is trumping your .yourClass declaration alone.
A way around this is to use the !important flag. Try this:
.color_box, .with_tooltip {display:none !important;}
!important is typical a 'last resort' as it can make future CSS updates a pain, but the one place it is useful is when you have to modify an existing site via CSS only and simply have to strong arm some of your changes.
Try adding the !important attribute to your second selector listed above. It could be that there are other styles in place that are overriding the hiding.
I created a very simple JSFiddle that has this working without using the !important clause. You can remove the CSS and add it again to see it in action:
.color_box, .with_tooltip {display: none !important;}
I have a page where the UL is set to padding-left: 40px and I can't find where it is being set. In firebug it shows in 'computed' but isn't in the inherited styles list. I've tried removing the jquery in case it was set in js. I've removing the css - it's still there. I've set a breakpoint on attribute change - nothing.
Setting padding-left:0px doesn't fix IE7
Is there a plugin or some better way of inspecting applied css rules?
It's probably a browser default. If it's not in firebug's style tab, it's being applied by the browser itself.
To get Firebug to show user-agent defined CSS, click on the style tab drop-down and click "Show User Agent CSS" (thanks Gerben).
You can override styles that are set by the user-agent, simply by defining the style attribute for that element:
ul{
padding-left:20px;
}
Note that IE7 uses margin instead of padding as the default style for lists.
You can 'reset' all user-agent defined rules using something like Yahoo's reset stylesheet.
You can also 'normalise' the style applied to a page. This means overriding user-agent defined styles so that all browsers use a standard style. I personally prefer this method over 'resetting' the CSS and having to explicitly define CSS rules for everything. It's easier and takes up less space. Try this library.
That padding-left on ul is coming from the user agent stylesheet.
You can remove it with:
ul {
padding-left: 0;
margin-left: 0
}
Firebug is already the best Firefox plugin for this sort of task. You just need to enable this option:
Here is my code:
.blue {
color:#6E99E1;
font-size:9px;
}
<span class="blue">::CLICK HERE:: to view our New Equipment inventory. <br /><br /></span>
I've somehow triggered something that prevented the <a> tag from inheriting color of parent <span>.
Just an addendum to the other responses, if you want your <a> tags to inherit the colour from their parent you can use
a {color: inherit; }
By default an anchor tag does not inherit attributes like color if an href attribute is present.
Check out the difference between these two on a page:
<span style=color:green>test</span>
<span style=color:green><a>test</a></span>
The following link is to the w3 c:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in
such a way as to make them obvious to
users (underlining, reverse video,
etc.). The exact rendering depends on
the user agent. Rendering may vary
according to whether the user has
already visited the link or not.
.....
Usually, the contents of A are not
rendered in any special way when A
defines an anchor only.
This is an answer to the question as well as a reply to Kevin's answer and its comments.
Anchor tags do inherit color, linked or not. The only reason they don't in practice is because they already have their color set in the browser's default stylesheet. The same can be said for the underlining of the link (which, I presume, you didn't notice, because you actually want it or had already changed it yourself).
In Firefox, you can see this in Firebug if you toggle "Show User Agent CSS" (or you can have a look at Firefox's internal stylesheets directly. You can see the browser's defaults in Webkit's Web Inspector and Opera's Dragonfly as well. I don't think you can in IE.
I don't know of any site which has an overview of all browser's defaults. CSS2's "informative" HTML4 stylesheet as well as the YUI reset stylesheet would be a good starting point, but neither of them mention any (link) colors (the HTML4 stylesheet does mention the underline).
To find out which properties are inherited in general, you can use the CSS2 reference property index table (see the "Inherited?" column). SitePoint also mentions it in its CSS reference.
So if you want to make sure your link inherits its color from its parent instead of from the browser's default stylesheet, you would ideally do something like this:
.blue a:link {
color: inherit;
}
You could set it for the different pseudo-classes separately (so :visited, :hover and :active as well), or for the a tag altogether.
However, IE6 and IE7 don't support the inherit keyword, so if you want to support them too, you'd have to set the color explicitly.
I think a doesn't inherit color by default. (certainly it has always worked that way on my sites). Why not change
.blue {
color:#6E99E1;
font-size:9px;
}
to
.blue, .blue a{
color:#6E99E1;
font-size:9px;
}
Firebug will show you exactly which style rules are applied to which elements. It's perfect for this.
(A non-CSS possibility: Do you have link/alink/vlink attributes on your <body> tag?)
Edit: Duh, silly me, the others have it right - <a href> doesn't inherit colour. But Firebug is still a good tool for this kind of problem (even if I'm not. 8-)
In addition to firebug (which should be your first port of call), the IE developer toolbar will also tell you where a given style is sourced from, just in case IE - shock, horror - should be different.
You need to explicitly set the color of the links to override the default blue color.
You are likely seeing the a:visited colouring. Try this:
.blue, .blue:link, .blue:visited {
color:#6E99E1;
font-size:9px;
}