Results 1 to 2 of 2

Thread: IE overflow not scrolling on an absolute div

  1. #1
    Join Date
    Jun 2009
    Posts
    7

    IE overflow not scrolling on an absolute div

    OK so here is the issue. Users on Internet Explorer with smaller screen resolutions are not able to scroll the pop up div that I have. Firefox 3 Safari Opera, and Chrome all recognize what to scroll on overflow. IE will come up with scrollbars but it does not scroll. Now I'm thinking a z-index issue might a problem but the overflow div is set to 100.

    I gave the code here but here is the live link of my problem.
    http://myharmonicwellness.com/calendar.php
    [Click the Top Left Link in the calendar]
    Shrink your window size to where the text begins to get cut off and you'll see the issue.

    Here is the HTML for the popup. Keep in mind I have about 30 total of these popups embeded into one page.

    HTML Code:
    <!--POPUP-->
    
    <div id="workshop1" style="visibility:hidden;">
    	<div id="fade"></div>
    
    	<div class="popup_block">
    	  <div class="popup">
    			<a href="#" onclick="MM_changeProp('workshop1','','visibility','hidden','DIV')"><img src="images/icon_close.png" class="cntrl" title="Close" /></a>
    			<h3><!--ONEPAGECMS-START-Workshop-1-Title-->
    <p>Healing By Daring To Dream</p>
    <!--ONEPAGECMS-END--></h3>
             <div class="workshopimg"><img src="/images/workshoppictures/healing_by_daring_to_dream.jpg" border="0"/>   </div>
    <div class="des"><!--ONEPAGECMS-START-Workshop-1-Description-->
    <p>Join author, Jodi Stauffer, and illustrator, Thom Ricks, for this inspired one day workshop.&nbsp; You will meet characters from their book, Dare to Dream, as they take you on a playful guided journey towards self-discovery that encourages you to be all that you've ever dreamed of becoming.&nbsp;</p>
    <!--ONEPAGECMS-END--></div><br /> 
    	  </div>
    	</div>
    </div>
    <!--END POPUP-->
    Here is the CSS

    Code:
    #fade {
    	background: #000; 
    	position: fixed; 
    	width: 100%;
    	height: 100%;
    	filter:alpha(opacity=80);
    	opacity: .80;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/
    	left: 0;
    	z-index: 10;
    }
    
    img {
    	border: none;
    }
    .popup_block {
    	float: left;
    	width: 650px;
    	max-height:80%;
    	position: fixed;
    	top: 10%;
    	left: 50%;
    	z-index: 200;
    	background-color: #000000;
    	-moz-border-radius: 15px;
    	-moz-border-radius-topright: 0px;
    	-webkit-border-radius: 15px;
    	-webkit-border-top-right-radius: 0px;
    	border: 1px solid #FFFFFF;
    	filter:alpha(opacity=100);
    	-moz-opacity:1;
    	-khtml-opacity: 1;
    	opacity: 1;
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: -335px;
    	padding-top: 10px;
    	padding-right: 20px;
    	padding-bottom: 10px;
    	padding-left: 20px;
    	overflow: auto;
    }
    .popup {
    	float: left;
    	width: 100%;
    	margin: 10px 0;
    	padding: 10px 0;
    	color: #FFFFFF;
    }
    *html #fade {
    	position: absolute;
    	top:expression(eval(document.compatMode &&
    	document.compatMode=='CSS1Compat') ?
    	documentElement.scrollTop : document.body.scrollTop);
    }
    
    *html .popup_block {
    	position: absolute;
    	top:expression(eval(document.compatMode &&
    	document.compatMode=='CSS1Compat') ?
    	documentElement.scrollTop
    	+((documentElement.clientHeight-this.clientHeight)/2)
    	: document.body.scrollTop
    	+((document.body.clientHeight-this.clientHeight)/2));
    	
    	left:expression(eval(document.compatMode &&
    	document.compatMode=='CSS1Compat') ?
    	documentElement.scrollLeft 
    	+ (document.body.clientWidth /2 ) 
    	: document.body.scrollLeft 
    	+ (document.body.offsetWidth /2 ));
    }
    
    /*--IE 6 PNG Fix--*/
    
    img{ behavior: url(iepngfix.htc) }
    
    #workshop1 {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    }

  2. #2
    Join Date
    Jun 2009
    Posts
    7
    Turned out to be a "DUH" answer. IE doesn't recognize fixed position divs. Changed to absolute and now working. Thanks for the help.........

Similar Threads

  1. Scrollwheel not working in overflow div on IE …
    By Ofer in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 07 Mar 2009, 03:32 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •