SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie6 ie7 overflow and scriptaculous

    Hi all,

    first off, as this problem is more css related I posted it here.

    I have been using the scriptaculous scripts to build in some new features for future web projects. I have a testing site that i have been using.

    http://www.acumendesign.co.uk/scriptaculous

    If you click on the thumbnail images the content scrolls respectively.

    The usual suspects are at large ie6 & ie7 where you can see the content is not hidden and over flows. Works fine with all others, FF, Safari, Opera.

    A bit lost how to debug this. Any help will be appreciated. The code for the pages is below

    Code:
    body{
    	margin: 0px;
    	background-color: #FFFFFF;
    	background-image: url(images/grad.jpg);
    	background-repeat: repeat-x;
    	font-family: "Gill Sans";
    }
    
    #wrapper{
    	width: 300px;
    	border: 2px solid #333333;
    	margin: auto;
    	background-color: #FFFFFF;
    	overflow: hidden;
    
    }
    
    #header{
    	background-color: #FFFFFF;
    	background-image: url(images/header.jpg);
    	background-repeat: repeat-x;
    	height: 80px;
    	display: block;
    	text-align: center;
    }
    
    #content{
    	margin: 20px;
    	overflow: hidden;
    }
    
    #buttons{
    	background-color: #CCCCCC;
    	height: 80px;
    	padding: 20px;
    }
    
    #buttons ul{
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none;
    	float: left;
    }
    
    #buttons li{
    	display: inline;
    	float: left;
    	margin-right: 20px;
    }
    
    .item{
    	font-family: Garamond;
    	width: 260px;
    	float: left;
    	margin-right: 40px;
    }
    
    #vxr{
    	margin: 0px;
    	padding: 0px;
    	width: 1000px;
    	height: 300px;
    }
    
    #vxr li{
    	list-style-type: none;
    	display: inline;
    }
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" type="text/css" media="screen" href="script.css" />
    
    <!-- DELICIOUS STUFF -->
    <script src="java/prototype.js" type="text/javascript"></script>
    <script src="java/scriptaculous.js" type="text/javascript"></script>
    
    		<title>scriptaculous test</title>
    	</head>
    	
    	
    	<body>
    	
    <div id="wrapper">
    
    <!-- HEADER -->
    <div id="header">
    asfsdfasdf
    </div>
    
    <!-- CONTENT HOLDER -->
    <div id="content">
    
    <!-- MOVING TEXT & IMAGES -->
    <ul id="vxr">
    	<li>
    <div class="item" >
    <img src="images/vxr1b.jpg" />
    <h1>Nice Rear view</h1>
    <p>At the back, there is a Clio 197-style diffuser, a big triangular centre exhaust pipe, a roof spoiler and a pair of faux air vents that supposedly bleed heat away from the rear brakes.</p>
    </div>
    	</li>
    	
    	<li>
    <div class="item">
    <img src="images/vxr2b.jpg" />
    <h1>Slick interior</h1>
    <p>At the back, there is a Clio 197-style diffuser, a big triangular centre exhaust pipe, a roof spoiler and a pair of faux air vents that supposedly bleed heat away from the rear brakes.</p>
    </div>
    	</li>
    	
    	<li>
    <div class="item">
    <img src="images/vxr3b.jpg" />
    <h1>Tasty Rims</h1>
    <p>At the back, there is a Clio 197-style diffuser, a big triangular centre exhaust pipe, a roof spoiler and a pair of faux air vents that supposedly bleed heat away from the rear brakes.</p>
    </div>
    	</li>
    	
    </ul>
    
    <!-- END OF CONTENT HOLDER -->
    </div>
    
    
    <!-- BUTTONS -->
    <div id="buttons">
    <ul>
    	<li><a href="javascript:void(0)" onclick="new Effect.Move ('vxr',{ x: 0, y: 0, mode: 'absolute'});"><img src="images/vxr1.jpg" /></a></li>
    	<li><a href="javascript:void(0)" onclick="new Effect.Move ('vxr',{ x: -300, y: 0, mode: 'absolute'});"><img src="images/vxr2.jpg" /></a></li>
    	<li><a href="javascript:void(0)" onclick="new Effect.Move ('vxr',{ x: -600, y: 0, mode: 'absolute'});"><img src="images/vxr3.jpg" /></a></li>
    </ul>
    </div>
    
    <!-- END OF WRAPPER -->
    </div>		
    	</body>
    </html>
    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try adding this:

    Code:
    #wrapper{
        width: 300px;
        border: 2px solid #333333;
        margin: auto;
        background-color: #FFFFFF;
        overflow: hidden;
    position:relative;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cor wow! That's brilliant. it worked.

    See the link.

    Thanks again


Bookmarks

Posting Permissions

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