I understand how to override parent styles, and I know this example is contrived, but is there a way (with inline CSS) to cause the child span to show, even though its parent is set to no display?
<span style="display:none">
<span style="display:block;">Test</span>
</span>
No, you cannot override the effect of display: none on inner elements. The reason is that the CSS specification explicitly says, in the description of value none for the display property:
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.
Short answer: No.
Long answer: There is no way to override display in children if the parent is hidden. You could use JavaScript to remove the child span from its parent, and place it in the body where you can apply a display style. Things like display, opacity, visibility etc, effect the children of elements they are applied to, the effects can't be completely countered, but for things like opacity they can be added to.
Related
What is the difference between setting a control's style display: none and display: block?
The display property defines how a certain HTML element should be displayed. Display block and none are used to show or hide html elements. You can read more about display property and available options here.
none: The element will not be displayed at all.
block: The element displayed as a block-level element (like paragraphs and headers)
Display:none; - The element is in the DOM but is NOT visible and does not take up any space unlike visibility:hidden.
Display: block; - A block element takes up the full width available and does not allow other elements to be placed beside them. Example: div
These two style properties do two different things.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. (The element will generate no box at all)
display: block the element will span the full width of the space available to it. (a line break before and after the element)
You are asking about a CSS property i think. This is used to show/hide DOM elements
CSS property is display and the value is 'none', 'block', etc
Referring from : CSS Display as suggested by http://w3fools.com/
block
Object is rendered as a block element.
none
Element is not rendered. The element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist.
inline
Default. Object is rendered as an inline element sized by the dimensions of the content.
list-item
Internet Explorer 6 and later. Object is rendered as a block element, and a list-item marker is added.
table-header-group
Object is rendered as tHead. Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each document spanned by a table.
table-footer-group
Object is rendered as tFoot. Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each document spanned by a table.
inline-block
Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.
Display:none; means the element will not be displayed, and Display:block; means the element is displayed as a block-level element (like paragraphs and headers).
There is another nuance to display:none; if you dynamically insert a div as a child to a parent div--and you explicitly set the visibility property of the child to "visible", the visibility property of the parent will only make the parent visible/invisible; the child will remain visible, regardless of the parent's visibility setting.
In such a case (where parent/child visibility are set by different style rules), the display:none setting on the parent will hide all the children--even if parent/children are styled independently.emphasized text
display: none means that the element is not displayed at all (so you won't see it in the example either).
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
Display None: it hides the control. by setting the property of element style="display:none" element will not rendered in webpage and not take place
Display Block: Show the element on web page in block level
Display none will hide the contains, here if you apply it on div then width and height of div will also hide.
Display block will show the contains.
I'm want to have a div with class "a" to be invisible. I've tried already to give it the display: none; line in the CSS file but what it does is hide it, yet it doesn't catch any space and so all my other boxes don't stay in place.
Is there a way to do this using CSS?
add .a{visibility: hidden} to your CSS. More about it here:
http://reference.sitepoint.com/css/visibility
visibility:hidden should hide the element, while keeping it's space so as not to move your other elements around.
You can use visibility css property. From sitepoint reference -
This property specifies whether an
element is visible—that is, whether
the box(es) that are generated by an
element are rendered.
Note that even if a box in the normal
flow is hidden, it still affects the
layout of other elements, unlike the
behavior that occurs when we suppress
box generation altogether by setting
display to none. Descendant boxes of a
hidden box will be visible if their
visibility is set to visible, whereas
descendants of an element for which
display is set to none can never
generate boxes of their own.
More information can be found here.
I'm trying to create css buttons by using the following html markup:
Forgot password
But it ends up being not bigger than the text in the middle. Even though I've set the class's height and width.
You can preview the problem here btw, www.matkalenderen.no
Notice the first button, that's a form button and it's using it's own class. At first I tried to use the same class on the css button as well and the same problem appeared, so I tried to separate them into their own classes. In case there was some kind of crash. But it didn't matter anyway.
What am I missing here?
As the others have said, by default <a> is an inline element, and inline elements can't specify a width or height. You can change it to be a block element like this:
a {
display: block;
}
Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.
See PPK's writeup about it.
The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.
Because <a>'s are inline elements by default. In CSS define a { display:block; } and height and width settings will be applied.
Of course, you may not want to declare all anchor tags as block level elements, so filter by class or id as needed.
I think the most proper solution is display: inline-block; which will allow you to set height for the element that still will be treated as inline element.
Will the display property of an inline element change once a float property is applied? e.g. What will be the the display property of an anchor tag with float:left?
Also, what will happen with its parent display property, will it also change?
Will the display property of an inline
element change once a float property
is applied? e.g. What will be the the
display property of an anchor tag with
float:left?
The display property will be unchanged. If by ‘anchor tag’ you mean ‘A element’, then the display property would still be set to inline (by default).
Also, what will happen with its parent
display property, will it also change?
The display property of the parent element will remain the same as well.
remember, though, that if you apply background/border stylings, the content will be floated out of the container, causing a 0-height box.
The Float property will not affect the Display property.
An anchor tag with float:left will probably have the display property as 'inline'.
Guess the float:left caused your anchor to move 'behind' one of your other elements on the left...
Try a higher z-index..
You can set the width of inline elements like <span>, <em> and <strong>, but you won’t notice any effect until you position them.
a) I thought the width of inline an inline element can’t be set?
b) Assuming width can be set - we won’t notice any effects ( thus the width we specify ) until we position inline element. Position how/where?
c) Why is the width of inline elements apparent only when we “position” them?
There's also the option of display: inline-block, which might give you the best of both worlds.
a) The width of an inline element is ignored
b,c) When you "position" an inline element (I assume that means using position:absolute), you are actually making it a block element, whose width is interpreted by the browser
As others have mentioned, setting the width (or some other position-related property) of an inline element will cause the browser to then display the element as a block element.
You can explicitly declare this sort of behavior through using the CSS display property. The most common settings are display: inline (default), display: block, and display: none. A full reference for the display property is available here.
However, it should be noted that the HTML 4.01 specification discourages the use of "overriding the conventional interpretation of HTML elements":
Style sheets provide the means to
specify the rendering of arbitrary
elements, including whether an element
is rendered as block or inline. In
some cases, such as an inline style
for list elements, this may be
appropriate, but generally speaking,
authors are discouraged from
overriding the conventional
interpretation of HTML elements in
this way.
That basically means that if you apply position: absolute to inline element, it will become block element and gain width.
I think it's due to the fact that when you specify position attributes for an "inline" element, the element is no longer being displayed inline and instead is being treated as a block-level element.
a. Width of inline elements are ignored.
b. Actually you can apply width to element if set display: inline-block; but to see results you also should apply overflow: hidden;.
To have all benefits of inline and block types you can use follow snippet:
display: inline-block;
width: 50%; // or px, em, etc.
overflow: hidden;
text-overflow: ellipsis;
In this case you can manage width and have text ellipsis feature.
Inline element cannot have width. Width is a property of block element. So to use property of width over an inline element or an element with display type inline set display as inline-block eg: display:inline-block;