visibility:hidden and display:none

[dreamwest]

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:

<style>
.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; }
</style>

<script>
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' />";
}
</script>

<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>
</div>
</div>

 

[cssfreakie]

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.