Jump to content

visibility:hidden and display:none


Recommended Posts

Im building a custom lightbox which overlays he entire screen. Is it important to use both visibility:hidden; and display:none; ??


Im currently only using display:none; and seems to work in all browsers even in IE6 with all its "unexpected features"


Heres is what ive done:

.wiz_slide{ background:#000; position:relative;height:100%;width:100%;left:0px;top:0px;display:none;position:absolute;z-index:999;position:fixed;color:#333;overflow:auto; }
.wiz_slide.html{ height:100%;overflow:auto; }
.wiz_slide_lg{ width:900px;position:relative;background:#000;overflow:auto; }

function slider(id){

document.getElementById('wiz_slide').style.display = "block";
document.getElementById('wiz_slide_img').innerHTML = "<img src='/tmb/full/pic.jpg' width='894px' height='520px' />";

<span  id='slide' style='cursor:pointer;' onclick='slider("wiz_slide"); '>Click to enlarge</span>

<div id='wiz_slide' align='center'  class='wiz_slide'>
<div id="wiz_slide_lg" align='center' class='wiz_slide_lg'>
<span id="wiz_slide_lg_img"></span>


Link to comment
Share on other sites

they are both different things: One says you don't see me but i am there (and taking up the space), the other says you don't see me and i am not even there (in terms of space it takes). This could be usefull to know in case you use something like jquery. Out of my head the function show requires a visibility:none; while fadein() requires display:none;

Agai I do this out of head while eating lunch ::)


Just remember they are both different in terms of space they take, you can't see them both, but the one takes his space (like a position:relative; would) and Display:none; is not taking any space (could be com paired the way position:absolute) is displayed. To be certin check the w3c, but out of my head this is how it works.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.