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.
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 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.
check this page out: http://jsbin.com/itufix with IE (page automatically enables IE7 mode).
Here you'll find examples how inline elements (input and span) are rendered as with display block. All elements margins and padding is set to 0.
If you use Developer tools for IE (IE8-9) you could have noticed that input shows offset: 1.
Can anyone explain what is actually happening and how to fix this?
NOTES
Adding float to input fix this, but this is not an option. I need to get this done without float.
Input/span and its div parents property hasLayout value is true!
Any info related to this bug is welcome.
UPDATE:
Here are more examples of how styles are used: http://jsbin.com/itufix/13. Each field can have description under it, plus the whole div.form-item may float (in case I need more than one field in line)
If you can't float the input (why?) then you could do this:
*+html input {
margin-top: -1px;
margin-bottom: -1px;
}
http://jsbin.com/itufix/5
That's using a CSS hack so the workaround is only applied in IE7.
Looking at your CSS, I see the following:
div.form-item{
padding: 0 1px;
}
Changing this to padding:0; seems to remove all padding on the form fields to my eyes. See:
http://jsbin.com/ojeros/2/
Or am I missing something?
I'm still learning how to do layouts with CSS.
After borrowing some CSS from another website to play with,
I've noticed that if I remove this from the CSS:
header {
display: block;
}
that my header will not center. If I remove this from the CSS file, the header image becomes very small and remains in the upper left corner. After reading about the display property, I can't see why it controls centering. Could someone simply/briefly explain it to me?
http://www.quirksmode.org/css/display.html
Scroll partway down the page for a detailed explanation and examples on what display: block does.
FYI: the code you posted won't necessarily do anything in browser parsing a document as HTML 4 (but will in a browser supporting HTML 5).
It states that a tag called "header" (which doesn't exist in HTML 4) should be set to display: block. Thus, one of four things will happen:
Browser will recognize it as HTML 5 and apply the style.
Browser will do an arbitrary pattern match and apply the style even though it doesn't know the tag.
Browser will do nothing.
Browser will only follow some of the CSS instructions.
EDIT: here is documentation on the new header tag in HTML 5:
http://html5doctor.com/the-header-element/
EDIT #2: Barring any other conflicting styles on the page, this will provide a centered heading.
<style>
H1 {
text-align: center;
}
</style>
<h1>Some text to be centered</h1>
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). more
I'm inspecting an h2 element on a web page using Google Chrome's element inspector and some of the CSS rules--which appear to be applied--are grayed out. It seems that a strike-through indicates that a rule was overridden, but what does it mean when a style is grayed out?
For me the current answers didn't explain the issue fully enough, so I am adding this answer which hopefully might be useful to others.
Greyed/dimmed out text, can mean either
it's a default rule/property the browser applies, which includes defaulted short-hand properties.
It involves inheritance which is a bit more complicated.
Inheritance
Note: Chrome dev tools "style" panel will display a rule set, because one or more rules from the set are being applied to the currently selected DOM node.
I guess, for the sake of completeness, dev tools shows all the rules from that set, whether they are applied or not.
In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.
The rules which are applied to the currently selected element appear in normal text.
If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.
here is an article that give a good explanation - (Note: the relevant item is at the bottom of the article - figure 21 - unfortunately the relevant section doesn't have a heading) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
Excerpt from the article
This [inheritance scenario] can occasionally create a bit of confusion, because defaulted
short-hand properties; figure 21 illustrates the defaulted short-hand
properties of the font property along with the non-inherited
properties. Just be aware of the context that you're looking at when
examining elements.
It means that the rule has been inherited, but is not applicable to the selected element:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
The pane contains only properties from rules that are directly applicable to the selected element. In order to additionally display inherited properties, enable the Show inherited checkbox. Such properties will be displayed in a dimmed font.
Live example: inspect the element containing the text "Hello, world!"
div {
margin: 0;
}
div#foo {
margin-top: 10px;
}
<div id="foo">Hello, world!</div>
Michael Coleman has the right answer. I just want to add a simple image to go along with it. The link that he included has this simple example: http://commandlinefanatic.com/art033ex4.html
The HTML/DOM looks like this...
The Styles Pane in Chrome looks like this when you select the p element...
As you can see, the p element inherits from its ancestors (the divs). So why is the style background-color: blue grayed out? Because it's part of a rule-set that has at least one style that is inheritable. That inheritable style is text-indent: 1em
background-color:blue is not inheritable but it's part of the rule-set that contains text-indent: 1em which is inhertiable and the developers of Chrome wanted to be complete when displaying rule-sets. However, to distinguish between styles in the rule-set that are inheritable from styles that are not, the styles that are not inhertable are grayed out.
This also occurs if you add a style through the inspector, but that new style doesn't apply to the element you have selected. Usually the styles shown are only those for the element selected, so the grey indicates that the style you just added doesn't select the element which has focus in the DOM navigator.
It means the rule has been replaced with another rule with higher priority. For example stylesheets with:
h2 {
color: red;
}
h2 {
color: blue;
}
The inspector will show the rule color:red; grayed out and color:blue; normally.
Read up on CSS inheritance to learn which rules are inherited/have higher priority.
EDIT:
Mixup: the grayed out rules are the unset rules, which use a special default stylesheet that is applied to all elements(the rules that make the element renderable, because all styles have to have a value).
When using webpack, any css rule or property that has been changed in the source code is grayed out when the page reloads after a rebuild. This is really annoying and forced me to reload the page every time.
The new version of chrome developer shows where it is inherited from.
I'm answering long after the question already has many correct answers because I encountered a different case of having a block of CSS code greyed out and uneditable in Chome DevTools: The block in question contained U+200B ZERO WIDTH SPACE characters. Once I found those and removed them, I could edit the block in Chrome DevTools again. Presumably this might happen with other non-ascii characters as well, I haven't tried to figure that out.