CSS Display and Float Properties - html

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..

Related

Div with display block causes the inline-block parent to get out of line

I would like to understand this weird behaviour, I have a div wrapping another div.
parent is display inline block , and child is display none or block inside, whenever the child is block - the parent go down from the line, see example below:
this is display none in child:
and this is display block
adding the CSS of the parent:
can anyone explain please this behaviour?
When use display:inline-block, add vertical-align:top;
display:block pushes the element to a new line. When you say display of child is none, it tries to fit the element inline with other elements. Hence such a behaviour is observed.
Check this link for detail on display property of css

Overriding parent's CSS display property

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.

What is HTML's <a></a> tag default display type?

I haven't been able to find anything that says what the default display is equivalent to in CSS's display properties. I ask, because whenever I attempt to add padding or margin to an <a> tag, it doesn't add it, I have to add the display property of inline-block for it to.
I don't know if this is browser specific or not, but would the default display of it be inline versus say inline-block (I obviously know it's not inline-block.
It is always display: inline by default. Horizontal margins, and padding on all sides should work without having to change its display property.
This remains true even in HTML5. If you are applying styles to an <a> element that contains flow elements or any other elements that are represented in CSS as display: block, you should set the <a> itself to a proper block container type such as block or inline-block for its layout to work as intended.
It's INLINE by default.
Inline-block is not supported in IE7.
margin is not supported in Inline element. and only left & right padding is supported in INLINE element.

Making a class invisible

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.

CSS - Why am I not able to set height and width of <a href> elements?

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.