I sometimes see DIV set to display:block Is there any particular reason considering DIV is already a block box.
You could be over-riding another CSS attribute that said
.myClass {
display: inline;
}
Or replacing display:none; to "un-hide" it (typically this is done on-the-fly by javascript).
It may be to override another style that may be setting it to something else, but otherwise it's most likely a reminder to whoever wrote it. There's no real reason to include that rule.
If you're overriding an existing style it makes sense. Setting a div to block that has no styles coming in from elsewhere does not.
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'm building an html5/js/css application that will exist inside of a div on my client's existing html. I want to be sure that none of the client's CSS styles are inherited by my app.
Is there a best practice to reset this div and its descendant elements?
I'm thinking I'll use something like:
#my-id * { //styles }
I'm wondering if there is a better/best-practice approach? Thanks.
That will be very difficult/likely impossible to ensure. The type of solutions that Starx is referring to assume no preset styles other than the browser defaults, and "reset" in that context refers to harmonizing the inconsistencies across various browser defaults.
But in your case, your client CSS may already contain highly specific selectors such as
#someDiv .aClass a{float:left;}
... and applying those "CSS reset" solutions simply will not override this.
You can see that Truth's selectors also have lower specificity than this, and therefore will fail to ovetride the client's styles in such cases.
Your question is very similar: How to remove all inherited and computed styles from an element?
So the short answer is: there is no way to ensure this because you cannot "remove all inherited and computed styles from an element" ... update: ...unless you can anticipate and override every preexisting style declaration with new declarations having appropriate specificity.
If you want to only recent this specific div, than what you have is fine. You forgot to reset the div itself though:
#my-id, #my-id * { /* styles */ }
You are probably looking for Eric's CSS Reset as it one of robust resets out there.
But the reset rule is applied to the whole page, instead of the just the box. SO, modify the rules, by keeping #my-id infront.
Please could someone help me understand why the div.fl element shown in Developer Tools below has display: block in the Computed Style section?
It is being displayed as a block-level element.
But the list of CSS rules below shows that display: inline ! important is the rule with the highest priority - the div: block directive has a strikethrough.
I would like it to display inline, but I'm not sure what else I can do besides use div.fl { display: inline ! important; } in my code.
I'm afraid I can't link to the code, but could anyone even suggest where to start looking? I don't understand where the block directive could be coming from.
Debugging CSS = my least favourite part of coding.
I see a float: right declaration in your screenshot. Floated elements are always rendered as blocks; you can't make your element display: inline if it's floated. See the spec for the float property for the gory details.
Is it floating or doing something that causes it to inherit display:block;? There are a number of CSS attributes that can change display types.
I have a 24 column page that is based on the 24 column 960 template. I have an element that needs a specific with of 84px.
I tried to write the markup this way:
<div class="container_24 grid_84">
</div>
I tried writting the css this way:
.container_24 .grid_84 {
width:84px !important;
}
It is not setting to 84px it is setting to 960px.
What is the proper of displaying this.
Your CSS has this:
.container_24 .grid_84
That is looking for an element with a class of grid_84 that is a CHILD of container_24.
But you are actually looking for this in your HTML:
.container_24.grid_84
That is an element with both classes, which is what your HTML shows.
Side advice:
Don't mix grid framework syntax with your own. 24 refers to column. Your 84 refers to specific pixels.
I'd suggest using something along the lines of
.override_84px
So it's clearly not part of the grid framework. Future people that have to look at your markup will thank you.
Also, since you are making your element here, why even use the container_24 class in the first place?
Finally, the !important declaration is usually a method of last resort to over-ride some existing CSS you have no control over of. You typcially do not want to be using that attribute with your own CSS as it's usually a sign that things have gotten a bit messy.
.container_24 .grid_84 { width:84px !important; }
syntax is correct but are you sure you are looking at the right cell? I have not exactly understood your question though.
Also consider using an ID for container_24, if there is going to be only one such container in the page. Make sure you are not setting width of a span element, which does not take width unless you change its display property to block
{display:block}
The latter css statement is always used, I know you can set this with the !important tag, however, I am not sure if this only applies to the other statements within the same file. I would suggest using the order:
reset.css
960.css
text.css
style.css
Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?
No. You'll have to override all other properties being set on it.
Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class
I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.
You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}
Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)
If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.
There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}