WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > IE - CSS Style Issue - ARghhhhh

Reply
  Thread Tools Display Modes
Old 5th August 11, 08:21 PM   #1
unco
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default IE - CSS Style Issue - ARghhhhh
I have created an overlay div with a popup that stretches across the page and then all the items in the popup show. Looks great in everything BUT IE.

I have a buttonclick calling a function to showDiv and inside it sets

style.visibility = 'visible'; & style.display = 'block';


The previous state of the div content is hidden and none, which is how it stays. Any ideas on what exactly needs to be done in IE to get the

style.visibility and style.display to work.

Thanks - I've been spending the whole day trying to figure this one out.
unco is offline   Reply With Quote
Old 6th August 11, 05:02 PM   #2
unco
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Re: IE - CSS Style Issue - ARghhhhh
Here are the two ways I tried to do this as well. I am using visibility to show space held by the content and display to show and hide. If I only used block then the space the div holds would remain there. IE doesn't seem to like this at all.

document.getElementById("z_vt1").style.visibility = 'visible';
document.getElementById("z_vt1").style.display = 'block';


z_vt1.style.visibility = 'visible';
z_vt1.style.display = 'block';

Any ideas... Thanks
unco is offline   Reply With Quote
Old 8th August 11, 12:03 AM   #3
unco
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Re: IE - CSS Style Issue - ARghhhhh
Here is the full source - This works in all browsers, but the popup doesn't work in IE. The other issue I found is the jwplayer stays open if I have this content in a frame or have the browser Dev Tools open.

I Need to break it into html and css / javascript, since I am over the character count to post.
Code:
<div id="z_page_container">
<div id="z_overlay">&nbsp;</div>
<div id="z_popup_container" style="width: 100%;">
<div id="z_popup_window"><a href="#" onclick="hideOverlay()"> <img border="0" align="right" src="close-button.gif" alt="" /></a>
<div id="z_popup_title_section" style="height: 70px;">
<div id="z_vt1">
<h3>Better Decisions</h3>
Gain greater insights to make smarter, more confident decisions.</div>
</div>
<div id="z_popup_mid">
<div id="z_video_section">
<div id="z_ve1">
<div id="video1">This text will be replaced</div>
<script type="text/javascript"> jwplayer('video1').setup({

    'flashplayer': 'player.swf',

    'file': 'BetterDecisions.flv',

    'controlbar': 'bottom',

    'width': '471',

    'height': '291'

  }); </script></div>

<div id="z_video_list" style="height: 150px;">
<div id="z_vl1">
<p><a href="#" onclick="showOverlay(2)"><img width="120" border="0" src="image.jpg" alt="" /></a><br />
<strong>Fewer Conflicts</strong><br />
<a href="#" onclick="showOverlay(2)">Watch Now</a></p>
<p><a href="#" onclick="showOverlay(3)"><img width="120" border="0" src="image.jpg" alt="" /></a><br />
<strong>Faster Delivery</strong><br />
<a href="#" onclick="showOverlay(3)">Watch Now</a></p>
</div>
</div>
<div style="clear: both;">&nbsp;</div>
</div>
<div id="z_popup_details">
<div id="z_vd1">&quot;Quote&quot;
  <p><strong>Name</strong><br />
<strong>Company</strong></p>
</div>
</div>
</div>
</div>
<div id="z_wrapper">
<div id="z_header_container">
<div id="z_header_partner"><img width="194" src="partner_logo.gif" alt=""  /></div>
<div id="z_header_autodesk"><img width="115" src="logo.gif" alt="" /></div>
</div>
<div id="z_main_container">
<div id="z_main_banner">
<div id="z_main_banner_01"><img width="475" src="image.jpg" alt="" /></div>
<div id="z_main_banner_bkg">
<div id="z_main_banner_container">
<div class="z_main_banner_info"><a href="#" onclick="showOverlay(1)"><img width="120" border="0" src="Image.jpg" alt="" /></a> <span style="font-weight: bold;">Better Decisions</span><br />
Gain greater insights to make smarter, more confident decisions. <a href="#" onclick="showOverlay(1)"><br />
Watch Now</a></div>
</div>
<div id="z_main_banner_container">
<div class="z_main_banner_info"><a href="#" onclick="showOverlay(2)"><img width="120" border="0" src="image.jpg" alt="" /></a><span style="font-weight: bold;">Fewer Conflicts</span><br />
Use compelling project visualisations to ease stakeholder approvals.<br />
<a href="#" onclick="showOverlay(2)">Watch Now</a></div>
</div>
<div id="z_main_banner_container">
<div class="z_main_banner_info" id="z_third_video"><a href="#" onclick="showOverlay(3)"><img width="120" border="0" src="image.jpg" alt="" id="z_bottom_image" /></a>
<div id="z_btm_content"><span style="font-weight: bold;">Faster Delivery</span><br />
Co-ordinate your information to improve collaboration and accelerate project delivery.<br />
<a href="#" onclick="showOverlay(3)">Watch Now</a></div>
</div>
</div>
</div>
</div>
<div id="z_main_container">
<div id="z_main_text">content</div>
<div>
<div id="z_main_title">
<h1>product 1</h1>
</div>
<div id="z_main_info_container">
<div id="z_main_info"><img width="151" src="image.jpg" alt="" /></div>
<div id="z_main_feature_choice_container">
<div id="z_main_feature_02">
<div id="z_main_feature_choice_info">&nbsp;</div>
</div>
</div>
</div>
<div id="z_main_feature_container">
<div id="z_main_feature_info">
<p>content<br/><a href="url here">Learn More about the solution</a></p>
</div>
</div>
</div>
</div>
<div style="clear: both;">&nbsp;</div>
</div>
<div style="clear: both;">&nbsp;</div>
<div id="z_footer">content here</zp></div>
</div>
</div>
Last edited by meesa; 8th August 11 at 01:24 AM.
unco is offline   Reply With Quote
Old 8th August 11, 12:20 AM   #4
unco
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Re: IE - CSS Style Issue - ARghhhhh
Code:
<script type="text/javascript" src="jwplayer.js" zposition="top"></script>  


<script type="text/javascript"> var divWidth = 0;
var divHeight = 0;
var growDiv;
var nDivWidth;
var browserWidth;
var browserHeight;
var d_show;
var firstTime = 1;
 
 
function showOverlay(ve) {
  
  d_show = ve;
  if(firstTime==1)
  {
 
   hideOverlay();
document.getElementById("z_popup_window").style.width = 0;
  document.getElementById("z_popup_window").style.height = 0;
  }
  firstTime = 0;

document.getElementById("z_overlay").style.visibility = 'visible';
document.getElementById("z_popup_window").style.visibility = 'visible';
document.getElementById("z_popup_container").style.visibility = 'visible';

 

 var speed=-1;
 browserWidth = 0;
 browserHeight = 0;

 var whichbrowser = whichBrs();

 if(whichbrowser == 'Internet Explorer'){

  browserWidth = 650 ;
  browserHeight = 470 ;

 }else{

  browserWidth = 620;
  browserHeight = 450;

 }

    nDivWidth = browserWidth - 3;

 

 

growDiv=setInterval('resizeDIV()',speed);


}

function resizeDIV() {


 document.getElementById("z_popup_window").style.width=divWidth+'px';
 document.getElementById("z_popup_window").style.height=divHeight+'px';

 divWidth+=3;
 divHeight+=2;

 if(divWidth>=nDivWidth) {

  document.getElementById("z_popup_window").style.width=browserWidth+'px';
  document.getElementById("z_popup_window").style.height=browserHeight+'px';
  clearInterval(growDiv);



 <!-- THIS DOESN'T WORK IN IE --> 

  
  if(d_show == 1 || d_show == '1')
{
 document.getElementById("z_vt1").style.visibility = 'visible';
 document.getElementById("z_vt1").style.display = 'block';

 document.getElementById("z_vt2").style.visibility = 'hidden';
 document.getElementById("z_vt2").style.display = 'none';

 document.getElementById("z_ve1").style.visibility = 'visible';
 document.getElementById("z_ve1").style.display = 'block';
 document.getElementById("z_vl1").style.visibility = 'visible';
 document.getElementById("z_vl1").style.display = 'block';
 document.getElementById("z_vd1").style.visibility = 'visible';
 document.getElementById("z_vd1").style.display = 'block';

 document.getElementById("video1").style.visibility = 'visible';
 document.getElementById("video1").style.display = 'block';

}

  return;

 }

}


function whichBrs() {


var agt=navigator.userAgent.toLowerCase();


if (agt.indexOf("msie") != -1) return 'Internet Explorer';

}
function hideOverlay() {
var o = document.getElementById("z_overlay");
      o.style.visibility = 'hidden';

 document.getElementById("z_vt1").style.visibility = 'hidden';
 document.getElementById("z_vt1").style.display = 'none';
 document.getElementById("z_ve1").style.visibility = 'hidden';
 document.getElementById("z_ve1").style.display = 'none';
 document.getElementById("z_vl1").style.visibility = 'hidden';
 document.getElementById("z_vl1").style.display = 'none';
 document.getElementById("z_vd1").style.visibility = 'hidden';
 document.getElementById("z_vd1").style.display = 'none';

 document.getElementById("video1").style.visibility = 'hidden';
 document.getElementById("video1").style.display = 'none';
 
document.getElementById("z_popup_window").style.visibility = 'hidden';
document.getElementById("z_popup_container").style.visibility = 'hidden';
divWidth = 0;
divHeight = 0;

if(firstTime == 1){
 return;
}

} </script>

<style>


#z_wrapper {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:100 }
#z_wrapper p {vertical-align:top}
#z_wrapper a {color:#01acf1; text-decoration:none}
#z_wrapper h1 {font-size:22px; font-weight:100; line-height:10px}
#z_wrapper h2 {font-weight:bold; font-size:12px; line-height:20px}
#z_wrapper h3 {font-weight:bold; font-size:12px}

#z_page_container {text-align:center; width:750px}

#z_wrapper #z_header_container {width:750px; height:98px}
#z_wrapper #z_header_partner {float:left; width:200px; margin-left:20px; margin-top:20px}
#z_wrapper #z_header_autodesk {float:right; margin-top:40px}

#z_wrapper #z_top_bar {background-color:#3f3f3f; height:25px; text-align:left; padding-left:20px; padding-top:7px; font-size:16px}

#z_wrapper #z_main_container {background-color:#fff}
#z_wrapper #z_main_info_container {float:left; width:175px}
#z_wrapper #z_main_title {float:left; width:700px; text-align:left; margin-left:20px; padding-top:10px; height:40px; border-bottom:1px solid #282828}
#z_wrapper #z_main_info {text-align:left; padding-left:20px; margin-top:15px}
#z_wrapper #z_main_text {text-align:left; margin-top:20px; margin-left:20px; float:left}
#z_wrapper #z_main_banner_01 {float:left; width:475px}
#z_wrapper #z_main_banner_container {float:right; background-color:#000}
#z_wrapper .z_main_banner_info {text-align:left; width:260px; color:#fff; padding-right:8px; padding-top:10px; font-size:11px}
#z_wrapper #z_main_banner_container img {float:left; padding-right:8px; padding-bottom:4px}
#z_wrapper #z_main_banner_bkg {background-color:#000; height:270px}
#z_wrapper #z_ve1{ visibility:hidden};
#z_wrapper #z_ve1 { display:none};
#z_wrapper #z_vl1 { visibility:hidden};
#z_wrapper #z_vl1 { display:none};
#z_wrapper #z_vd1 { visibility:hidden};
#z_wrapper #z_vd1 { display:none};


#z_wrapper #z_vt1 { visibility:hidden};
#z_wrapper #z_vt1 { display:none};



#z_wrapper #video1 {visibility:hidden};

#z_wrapper #video1 {display:none};


#z_wrapper #z_main_feature_container {float:right; width:550px;}
#z_wrapper #z_main_feature_container img {float:left; padding-right:10px}
#z_wrapper #z_main_feature_info {text-align:left; padding-right:20px; padding-bottom:10px;}
#z_wrapper #z_main_feature_info img {padding-bottom:40px}

#z_wrapper #z_footer {color:#000; text-align:left; margin-left:20px; float:left; font-family:Arial, Helvetica, sans-serif; width:700px; border-top:1px solid #282828 }

#z_page_container #z_overlay {z-index:1000; position:absolute; top:0; bottom:0; width:3000px; height:3000px; left:0; right:0px; background:#000; opacity:0.65; -moz-opacity:0.65; filter:alpha(opacity=65); visibility:hidden; }

#z_page_container #z_popup_window {z-index:1005; position:absolute; margin-left: 30;
margin-top: 100; visibility:hidden; background:#000; border:3px; border-color:#fff; height:440; color:#ffffff; font-size: 12px; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:20px; border:2px; border-color:#ffffff; border-style:solid; width:620px }

#z_page_container #z_video_section{ float:left; width:471px; height: 291px; padding-right:20px; padding-top:-20px };
#z_page_container #z_video_list {float:right; height:150px;  };
#z_page_container #z_popup_window #z_poup_title_section {height:50px;};
#z_page_container #z_popup_details { vertical-align:top; text-align:left; height:60px; margin-top:20px}
#z_page_container #z_video_list a { text-decoration:none; color:#01acf1 };
#z_page_container .z_main_banner_info #z_btm_content { float:right;}
#z_page_container #z_main_banner_container #z_third_video { float:left;}
#z_page_container #z_popup_mid { margin-top:-20px; margin-bottom:20px};

*html #z_page_container .z_main_banner_info #z_btm_content { float:right; padding-right: 10px; width:126; padding-left:-20px}
*html #z_page_container #z_bottom_image { padding-bottom:80px };
*html #z_wrapper #z_main_banner_container #z_third_video #z_z_bottom_image { padding-left:5px;}
*html #z_page_container #z_popup_window {z-index:1005; position:absolute; margin-left: 30;
margin-top: 100; visibility:hidden; background:#000; border:3px; border-color:#fff; height:460; color:#ffffff; font-size: 12px; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:20px; border:2px; border-color:#ffffff; border-style:solid; width:650px }
*html #z_page_container #z_video_section{ float:left; width:471px; height: 291px; padding-right:20px; margin-bottom:20px; margin-top:30px};

</style>
Last edited by meesa; 8th August 11 at 01:25 AM.
unco is offline   Reply With Quote
Old 8th August 11, 12:25 AM   #5
unco
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Re: IE - CSS Style Issue - ARghhhhh
Code:
<script type="text/javascript" src="jwplayer.js" zposition="top"></script>  


<script type="text/javascript"> var divWidth = 0;
var divHeight = 0;
var growDiv;
var nDivWidth;
var browserWidth;
var browserHeight;
var d_show;
var firstTime = 1;
 
 
function showOverlay(ve) {
  
  d_show = ve;
  if(firstTime==1)
  {
 
   hideOverlay();
document.getElementById("z_popup_window").style.width = 0;
  document.getElementById("z_popup_window").style.height = 0;
  }
  firstTime = 0;

document.getElementById("z_overlay").style.visibility = 'visible';
document.getElementById("z_popup_window").style.visibility = 'visible';
document.getElementById("z_popup_container").style.visibility = 'visible';

 

 var speed=-1;
 browserWidth = 0;
 browserHeight = 0;

 var whichbrowser = whichBrs();

 if(whichbrowser == 'Internet Explorer'){

  browserWidth = 650 ;
  browserHeight = 470 ;

 }else{

  browserWidth = 620;
  browserHeight = 450;

 }

    nDivWidth = browserWidth - 3;

 

 

growDiv=setInterval('resizeDIV()',speed);


}

function resizeDIV() {


 document.getElementById("z_popup_window").style.width=divWidth+'px';
 document.getElementById("z_popup_window").style.height=divHeight+'px';

 divWidth+=3;
 divHeight+=2;

 if(divWidth>=nDivWidth) {

  document.getElementById("z_popup_window").style.width=browserWidth+'px';
  document.getElementById("z_popup_window").style.height=browserHeight+'px';
  clearInterval(growDiv);



 <!-- THIS DOESN'T WORK IN IE --> 

  
  if(d_show == 1 || d_show == '1')
{
 document.getElementById("z_vt1").style.visibility = 'visible';
 document.getElementById("z_vt1").style.display = 'block';

 document.getElementById("z_vt2").style.visibility = 'hidden';
 document.getElementById("z_vt2").style.display = 'none';

 document.getElementById("z_ve1").style.visibility = 'visible';
 document.getElementById("z_ve1").style.display = 'block';
 document.getElementById("z_vl1").style.visibility = 'visible';
 document.getElementById("z_vl1").style.display = 'block';
 document.getElementById("z_vd1").style.visibility = 'visible';
 document.getElementById("z_vd1").style.display = 'block';

 document.getElementById("video1").style.visibility = 'visible';
 document.getElementById("video1").style.display = 'block';

}

  return;

 }

}


function whichBrs() {


var agt=navigator.userAgent.toLowerCase();


if (agt.indexOf("msie") != -1) return 'Internet Explorer';

}
function hideOverlay() {
var o = document.getElementById("z_overlay");
      o.style.visibility = 'hidden';

 document.getElementById("z_vt1").style.visibility = 'hidden';
 document.getElementById("z_vt1").style.display = 'none';
 document.getElementById("z_ve1").style.visibility = 'hidden';
 document.getElementById("z_ve1").style.display = 'none';
 document.getElementById("z_vl1").style.visibility = 'hidden';
 document.getElementById("z_vl1").style.display = 'none';
 document.getElementById("z_vd1").style.visibility = 'hidden';
 document.getElementById("z_vd1").style.display = 'none';

 document.getElementById("video1").style.visibility = 'hidden';
 document.getElementById("video1").style.display = 'none';
 
document.getElementById("z_popup_window").style.visibility = 'hidden';
document.getElementById("z_popup_container").style.visibility = 'hidden';
divWidth = 0;
divHeight = 0;

if(firstTime == 1){
 return;
}

} </script>

<style>


#z_wrapper {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000; font-weight:100 }
#z_wrapper p {vertical-align:top}
#z_wrapper a {color:#01acf1; text-decoration:none}
#z_wrapper h1 {font-size:22px; font-weight:100; line-height:10px}
#z_wrapper h2 {font-weight:bold; font-size:12px; line-height:20px}
#z_wrapper h3 {font-weight:bold; font-size:12px}

#z_page_container {text-align:center; width:750px}

#z_wrapper #z_header_container {width:750px; height:98px}
#z_wrapper #z_header_partner {float:left; width:200px; margin-left:20px; margin-top:20px}
#z_wrapper #z_header_autodesk {float:right; margin-top:40px}

#z_wrapper #z_top_bar {background-color:#3f3f3f; height:25px; text-align:left; padding-left:20px; padding-top:7px; font-size:16px}

#z_wrapper #z_main_container {background-color:#fff}
#z_wrapper #z_main_info_container {float:left; width:175px}
#z_wrapper #z_main_title {float:left; width:700px; text-align:left; margin-left:20px; padding-top:10px; height:40px; border-bottom:1px solid #282828}
#z_wrapper #z_main_info {text-align:left; padding-left:20px; margin-top:15px}
#z_wrapper #z_main_text {text-align:left; margin-top:20px; margin-left:20px; float:left}
#z_wrapper #z_main_banner_01 {float:left; width:475px}
#z_wrapper #z_main_banner_container {float:right; background-color:#000}
#z_wrapper .z_main_banner_info {text-align:left; width:260px; color:#fff; padding-right:8px; padding-top:10px; font-size:11px}
#z_wrapper #z_main_banner_container img {float:left; padding-right:8px; padding-bottom:4px}
#z_wrapper #z_main_banner_bkg {background-color:#000; height:270px}
#z_wrapper #z_ve1{ visibility:hidden};
#z_wrapper #z_ve1 { display:none};
#z_wrapper #z_vl1 { visibility:hidden};
#z_wrapper #z_vl1 { display:none};
#z_wrapper #z_vd1 { visibility:hidden};
#z_wrapper #z_vd1 { display:none};


#z_wrapper #z_vt1 { visibility:hidden};
#z_wrapper #z_vt1 { display:none};



#z_wrapper #video1 {visibility:hidden};

#z_wrapper #video1 {display:none};


#z_wrapper #z_main_feature_container {float:right; width:550px;}
#z_wrapper #z_main_feature_container img {float:left; padding-right:10px}
#z_wrapper #z_main_feature_info {text-align:left; padding-right:20px; padding-bottom:10px;}
#z_wrapper #z_main_feature_info img {padding-bottom:40px}

#z_wrapper #z_footer {color:#000; text-align:left; margin-left:20px; float:left; font-family:Arial, Helvetica, sans-serif; width:700px; border-top:1px solid #282828 }

#z_page_container #z_overlay {z-index:1000; position:absolute; top:0; bottom:0; width:3000px; height:3000px; left:0; right:0px; background:#000; opacity:0.65; -moz-opacity:0.65; filter:alpha(opacity=65); visibility:hidden; }

#z_page_container #z_popup_window {z-index:1005; position:absolute; margin-left: 30;
margin-top: 100; visibility:hidden; background:#000; border:3px; border-color:#fff; height:440; color:#ffffff; font-size: 12px; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:20px; border:2px; border-color:#ffffff; border-style:solid; width:620px }

#z_page_container #z_video_section{ float:left; width:471px; height: 291px; padding-right:20px; padding-top:-20px };
#z_page_container #z_video_list {float:right; height:150px;  };
#z_page_container #z_popup_window #z_poup_title_section {height:50px;};
#z_page_container #z_popup_details { vertical-align:top; text-align:left; height:60px; margin-top:20px}
#z_page_container #z_video_list a { text-decoration:none; color:#01acf1 };
#z_page_container .z_main_banner_info #z_btm_content { float:right;}
#z_page_container #z_main_banner_container #z_third_video { float:left;}
#z_page_container #z_popup_mid { margin-top:-20px; margin-bottom:20px};

*html #z_page_container .z_main_banner_info #z_btm_content { float:right; padding-right: 10px; width:126; padding-left:-20px}
*html #z_page_container #z_bottom_image { padding-bottom:80px };
*html #z_wrapper #z_main_banner_container #z_third_video #z_z_bottom_image { padding-left:5px;}
*html #z_page_container #z_popup_window {z-index:1005; position:absolute; margin-left: 30;
margin-top: 100; visibility:hidden; background:#000; border:3px; border-color:#fff; height:460; color:#ffffff; font-size: 12px; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:20px; border:2px; border-color:#ffffff; border-style:solid; width:650px }
*html #z_page_container #z_video_section{ float:left; width:471px; height: 291px; padding-right:20px; margin-bottom:20px; margin-top:30px};

</style>
Last edited by meesa; 8th August 11 at 01:25 AM.
unco is offline   Reply With Quote
Old 8th August 11, 11:24 AM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default Re: IE - CSS Style Issue - ARghhhhh
A link not code is needed.
chrishirst is offline   Reply With Quote
Old 8th August 11, 03:21 PM   #7
unco
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Re: IE - CSS Style Issue - ARghhhhh
I setup 2 different style sheets based on browser and also changed the setInterval() to pass different values based on the browser and it now works.
unco is offline   Reply With Quote
Reply

« Previous Thread | Next Thread »

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 10:52 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.