CSS Alternatives to style=“display:none”

Question

I\'m implementing a JSF component base where you must override the css being used or it will use its default css. I\'m trying trying to hide the div and I\'ve

Answer 1

width: 0; height: 0;

or

visibility: hidden;

or

opacity: 0;

or

position: absolute; top: -9999px; left: -9999px;

or just

display: none !important;

Answer 2

This question has already been answered, though the original answer has a couple flaws that I see... while they get the element visually off the screen, web accessibility guidelines suggest not using a couple of them.

To provide a simpler, better answer, visibilty: hidden; would be an option, though if you need the space that element was inhabiting, display: none !important; would be your best option. The tag !important should override other CSS elements that are acting on that <div>.

As stated above, simple moving the element visually off the page (e.g. position: absolute; top: -9999px; left: -9999px;) is not considered best practice per web accessibility guidelines as most e-readers will still read whatever text you have in the element, and keyboard users will potentially be able to navigate to that element, even though it is located 'off the screen'.

I normally use display: none !important if I have other CSS classes acting on an element that I need hidden.

Answer 3

This works for me..

!important can't be used in amp version so instead of display:none; use this:

position: absolute; top: -9999px; left: -9999px;

Answer 4

I suppose visibility:hidden; will help you. :)

Answer 5

Use !important to stop it getting overridden -

.rich-panelbar-header-act {
    display:none !important;
}

Also you can use JavaScript as a back up -

function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('DIVIDNAME').style.display = 'none';
}else {
if (document.layers) { // Netscape 4
document.DIVIDNAME.display = 'hidden';
}else { // IE 4
document.all.DIVIDNAME.style.display = 'none';
}}}
</script>