Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Internet Explorer Issues, mootools, please help!

    Hello,

    I have been trying to trouble shoot this for quite a while and am stuck. My site works 100% on Firefox, Safari, and Chrome, but in Internet Explore (6,7,8) the only thing that shows up is the background image.

    The site utilizes a few scripts: MooTools, a rollover replacement script, an iframe custom scrollbar script, and the Zenphoto CMS, that is utilized on other pages and displayed in the iframes.

    I think my problem may be mootools related, bur really have no idea.

    This is the site: http://www.ErikaCervantes.com

    Here is the offending code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>ErikaCervantes.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    
    #main{width:1100px;height:618px;background: url('img/BG.jpg') no-repeat;margin-left:-550px;left:50%;position:absolute}
    #words{text-align:right;padding-right:30px;padding-top:30px;}
    .window{width:963px;height:492px;margin-left:-477px;left:50%;position:absolute;background: url('img/windowBG.jpg');top:49px;}
    .content{float:left;width:618px;height:330px;margin-left:55px;}
    .scroll{height:220px;width:36px;float:right;text-align:left;margin-top:60px;}
    .contenthead{padding-top:52px;padding-left:47px;height:35px;width:300px;margin-bottom:15px;}
    .right{padding-right: 50px; padding-top: 57px; text-align:right;width:200px;float:right;}
    .back{padding-top:145px;margin-right:-10px}
    .nav
    .left{width:600px;height:490px;float:left;}
    #production{visibility: hidden;}
    #erika{visibility:hidden;}
    img{border:0px;}
    
    </style>
    
    <script type="text/javascript" src="roll.js"></script>
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript">
    
    function showErika(){
    $('words').tween('opacity',0);
          $('erika').set('tween',{duration : 2000}).fade([0,1]);    
    
    }
    
    function hideErika(){
    $('erika').tween('opacity',0);
          $('words').set('tween',{duration : 2000}).fade([0,1]);    
    
    }
    
    function showProduction(){
    $('words').tween('opacity',0);
          $('production').set('tween',{duration : 2000}).fade([0,1]);    
    
    }
    
    function hideProduction(){
    $('production').tween('opacity',0);
          $('words').set('tween',{duration : 2000}).fade([0,1]);  
    }
    </script>
    
    
    
    </head>
    <body style="padding-top:15px;">
    
    <div id="main">
    
    	<div id="words"><img src="img/erika_off.jpg" alt="erika_off" width="" height="" onclick="javascript:showErika();" /><img src="img/productions_off.jpg" alt="productions_off" width="" height=""  onclick="javascript:showProduction();" style="padding-top:10px;" /></div><!--words-->
    	
    	<div class="window" id="erika">
    	
    		<div class="right">
    			<div id="navErika">
    			<a href="http://www.imdb.com/name/nm2563825/"  target="_blank"><img src="img/imdb_off.jpg"  width="" alt="Erika Cervantes on IMDB" height="" /></a>
    			<a href="ECfilmography.pdf" ><img src="img/filmog_off.jpg" alt="Download Erika Cervantes Filmography" width="" height="" /></a>
    			<a href="#"  target="_blank"><img src="img/editing_off.jpg" alt="View Erika Cervantes Editing Reel" width="" height="" /></a>
    			<a href="mailto:erikamcervantes@gmail.com" ><img src="img/contact_off.jpg" alt="Contact Erika Cervantes" width="" height="" /></a>
    			</div><!--navErika-->
    			<img src="img/erikamail.jpg" alt="erikamail" width="" height="" />
    		
    			<div class="back"><img src="img/back_off.jpg" alt="Back" width="" height="" onclick="javascript:hideErika();" /></div><!--back-->
    		</div><!--right-->
    		<div id="left">
    			<div class="contenthead"><img src="img/erikaHeader.jpg" alt="Erika Cervantes" width="" height="" /></div><!--contenthead-->
    			<div class="content">
    			<!--Scrollable iframe script- By Dynamic Drive-->
    <!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
    <!--This credit MUST stay intact for use-->
    
    <iframe class="datamain" src="zen/index.php?album=erika" name="bio" width="618" height="330" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" ></iframe>
    </div><!--content-->
    <div class="scroll">
    
    <a href="#" onmouseover="scrollspeed=-1" onmousedown="scrollspeed=-2" onmouseout="scrollspeed=0"><img src="img/scrolltop.jpg" alt="scrolltop" width="" height="" /></a><br/><img src="img/scrollmid.jpg" alt="scrollmid" width="" height="" /><br /><a href="#"  onmouseover="scrollspeed=1" onmouseout="scrollspeed=0" onmousedown="scrollspeed=2"><img src="img/scrollbottom.jpg" alt="scrollbottom" width="" height="" /></a>
    
    </div><!--scroll-->						
    		</div><!--left-->
    	</div><!--window erika-->
    	
    	<div class="window" id="production">
    	
    		<div class="right">
    			<div class="nav">
    			<a href="zen/index.php?album=features"  target="prod"><img src="img/features_off.jpg" alt="features" width="" height="" /></a>
    			
    			<a href="zen/index.php?album=shorts"  target="prod"><img src="img/shorts_off.jpg" alt="shorts" width="" height="" /></a><br />
    			
    			<a href="zen/index.php?album=web"  target="prod"><img src="img/web_off.jpg" alt="web" width="" height="" /></a>
    			
    			<a href="zen/index.php?album=music"  target="prod"><img src="img/music_off.jpg" alt="music videos" width="" height="" style="padding-bottom:25px;" /></a>
    			
    			</div><!--nav-->
    			<div class="back"><a href="zen/news" target="prod"><img src="img/back_off.jpg" alt="Back" width="" height="" onclick="javascript:hideProduction();" /></a></div><!--back-->
    		</div><!--right-->
    		
    		<div class="left">
    			<div class="contenthead"><img src="img/erikatitle.jpg" alt="Erika Cervantes Productions" width="" height="" /></div><!--contenthead-->
    	<div class="content">
    			<!--Scrollable iframe script- By Dynamic Drive-->
    			<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
    			<!--This credit MUST stay intact for use-->
    
    <iframe class="datamain" src="zen/news/" name="prod" width="618" height="330" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" ></iframe>
    </div><!--content-->
    <div class="scroll">
    
    <a href="#" onmouseover="scrollspeed=-1" onmousedown="scrollspeed=-2" onmouseout="scrollspeed=0"><img src="img/scrolltop.jpg" alt="scrolltop" width="" height="" /></a><br/><img src="img/scrollmid.jpg" alt="scrollmid" width="" height="" /><br /><a href="#"  onmouseover="scrollspeed=1" onmouseout="scrollspeed=0" onmousedown="scrollspeed=2"><img src="img/scrollbottom.jpg" alt="scrollbottom" width="" height="" /></a>
    </div><!--scroll-->		
    			
    		</div>	<!--left-->
    	</div><!--window production-->
    
    </div><!--main-->
    
    </body>
    </html>
    Thank you very much!

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    The only reason to use a libray is to
    avoid situations that make you have to think
    about which browser is looking at your site.

    I do notice you have a lot of down to the pixel positioning,
    and changing the style opacity-
    concentrate on those areas. Comment things out until you can see something in every browser.
    Use the IE developer tools when you view the site in IE.
    And google up a mootools maven.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,992
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts


  •  

    Tags for this Thread

    Posting Permissions

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