For some odd reason, when I set a font-size:0px; in my style-sheet for an anchor link, IE7 still shows a tiny-tiny version of the text. Is there anything I should consider doing to completely hide the text, without using text-indent?
The anchor itself is using a background image in the css. And I simply want to hide the text that in the anchor link, on the HTML page.
visibility: hidden and display: none are the standards in hiding elements.
The difference between the two is that visibility acts like opacity, in which the element is hidden but it still affects the layout of the page (e.g. a 200px high element will still make the element below it 200px lower than if it were not there).
display acts as if the element were not there at all - a 200px high element would not make an element below it 200px lower that it would be if the first element were not there.
Summary:
Thus, if you want to hide the text and leave a blank space in its place, use visibility: hidden. If you want to hide the text and have it act as if it were not there at all, use display: none
I would recommend you to create a separate class for the text and set
visibility:hidden;
for that class.
Related
I'm trying to move the green box 10px outside of the top of its container. However, since .cover has an overflow of hidden, the top of the green box isn't showing. How can I show the green box without switching around elements in the DOM?
Sorry for the confusion and the lack of info. Also, if I take off overflow: hidden or switch it to visible, the container reduces to 0 height which then hides a vertical border (on the site I'm working on) that spans the height of the content.
https://jsfiddle.net/Lxbf45y0/1/
if I take off overflow: hidden or switch it to visible, the container reduces to 0 height which then hides a vertical border
Sounds like you're using overflow:hidden; to create a new block formatting context. Obviously the side effect is that you can't easily have any overflow. That MDN page I linked includes a list of ways to force a new block formatting context. One thing you can do is replace overflow:hidden; with display:inline-block; width:100%;. This demo uses that method: https://jsfiddle.net/sb40ha0n/
As pointed out by Roko C. Buljan, Clearfix methods might also be available to correct this issue.
So I have two div elements on my page, one directly on top of the other. One has visibility:hidden and the other is visible. I have a button that swaps their visibilities, each time it is clicked the visible div is hidden and the hidden div becomes visible. The divs both have heights which require the browser to be scrolled vertically, however their heights are different. If I make the shorter one the visibile one, I can still scroll as far down as i would be able to if the taller one were visible. So when the shorter div is displayed, there is a bunch of empty space beneath it because you can scroll down far past it. How do I make it so the window will only scroll as far as it needs to display the VISIBLE content? Thanks.
use display:none instead of visibility:hidden. Then if you want to show the hidden div again, just use display:block.
visibility:hidden retains the space used by the div, it just doesn't render it. In contrast, display:none effectively removes the element completely, including the space it would normally occupy.
This ought to help you out. visibility: collapse hides the div completely, while still keeping it on the page. Having them both should solve your problem.
visibility: collapse;
display: none;
Hi I have some hyperlinks inside a div with display:block. Problem is that the hyperlinks length when clicked is equal to the div's width. How do I make the hyperlink's clicked length equal to the text of the hyperlink only without specifying width for each link ?
JSFiddle here
Use
#links a {clear:left;float:left}
The float will allow the link to be sized, and the clear will prevent the links from being on the same line.
You may need to add a clear:left to the #links container depending on your design.
EDIT
A little tutorial since you asked:
There are two types of elements, inline and block. Inline ones show in a line with no breaks. Block elements take up the whole line and move to the next one.
Inline elements can't have their width or height styled. Blocks can.
<a> is an inline element. By setting its display to block, you tell it to make a new line every time.
float gives elements inline behavior so they bump up next to eachother and flow over onto the next line. float also allows you to style the width/height of the element. It's sort of a mix between the two.
The clear attribute stops the inline floating and goes back to normal block behavior (new lines every time).
You won't need display:block and float: at the same time.
Another solution would involve display:inline-block, but this is not supported in several browsers so isn't encouraged (although I find it pretty handy).
set the link style to display:inline-block; (not supported in elder IE6) or float it with float:left; or float:right;
display: block; is what makes the link elements expand to their parent width. By default, link elements are in-line elements, not block elements.
Simply remove that declaration and your problem should be gone.
JSFiddle example
Do you mean something like this:
Foo
width:auto?
Or try
display:inline;
on the links
it shouldnt get the divs width then
What is difference between Display vs. Visibility properties?
The visibility property only tells the browser whether to show an element or not. It's either visible (visible - you can see it), or invisible (hidden - you can't see it).
The display property tells the browser how to draw and show an element, if at all - whether it should be displayed as an inline element (i.e. it flows with text and other inline elements) or a block-level element (i.e. it has height and width properties that you can set, it's floatable, etc), or an inline-block (i.e. it acts like a block box but is laid inline instead) and some others (list-item, table, table-row, table-cell, flex, etc).
When you set an element to display: block but also set visibility: hidden, the browser still treats it as a block element, except you just don't see it. Kind of like how you stack a red box on top of an invisible box: the red box looks like it's floating in mid-air when in reality it's sitting on top of a physical box that you can't see.
In other words, this means elements with display that isn't none will still affect the flow of elements in a page, regardless of whether they are visible or not. Boxes surrounding an element with display: none will behave as if that element was never there (although it remains in the DOM).
visibility: hidden;
the element won't be painted AND don't recieve click/touch events, but the space it takes is still occupied
because it's still there for layout purposes, you can measure it without it being visible
changing content will still cost time reflow/layouting the page
visibility is inherited, so this means you can make subchildren visible by giving them visibility: visible;
display: none;
will make the element not participate in the flow/layout
can (depending on the used browser) kill Flash movies and iframes (which will restart/reload upon showing again), although you can prevent this from happening with iframes
the element won't take up any space. for layout purposes it's like it does not exist
will make some browsers/devices (like the iPad) directly take back memory used by that element, causing small hickups if you switch between none and an other value during animations
extra notes:
images in hidden content: in all popular browsers images are still loaded, even though they are within any element with visibility: hidden; or display: none;
fonts in hidden content: webkit browsers (Chrome/Safari) may delay loading custom fonts which is only used in hidden elements, including through visibility or display. This may cause you to measure elements which are still using a fallback font until the custom font is loaded.
display: none removes the element out of the flow of the html whereas visibility:hidden does not.
display:none; will remove the DOM elements visual style / physical space from the DOM, whereas visibility:hidden; will not remove the element, but simply hide it. So a div occupying 300px of vertical space in your DOM will STILL occupy 300px of vertical width when set to visibility:hidden; but when set to display:none; it's visual styles and the space it occupies are hidden and the space is then "freed" up for lack of a better word.
[EDIT] - It was a while back that I wrote the above, and whether I was not knowledgeable enough or having a bad day, I don't know, but the reality is, the element is NEVER removed from the DOM hierarchy. All block level display 'styles' are completely 'hidden' when using display:none, whereas with visibility:hidden; the element itself is hidden but it still occupies a visual space in the DOM. I hope this clears things up
I have a form that uses a div that is positions over some input elements. For some reason, those input elements are above the positioned div, even though the div has a high z-index. Really not sure why this is happening, as the input fields don't even use absolute positioning, so I would think they would never be on top of another element.
Example (Click into Person, Status or Residence field):
http://www.puc.edu/puc-life/funnybook/little-black-funnybook
It looks like you don't even need to set a high stacking order for the .item .answer selector, at least in the Gecko engine. Try removing the position and z-index and see if it's consistent x-browser?
Edit: Ah I forgot I had applied position:relative to the div.item element, can you try toggling that when it shows up and unset it when you hide it?
That or leave position:relative on all div.items through external CSS and toggle the z-index to be '2' when the stuff pops ups and back to auto when it's hidden.
z-index is the solution but it does not work proper with youtube movie iframe, for that you would have to use wmode='transparent'