A couple small bugs with my website!

Discussion in 'Web Design and Development' started by bobsaget, Jun 15, 2011.

  1. bobsaget macrumors member

    Joined:
    Apr 22, 2005
    #1
    Hey guys, hopefully someone can figure these annoying little bugs with my (unfinished) site.

    here's the URL: http://www.motioncrafter.com

    My main issue is that the bottom bar is giving me trouble. When you make the browser window skinny, and then scroll over... it doesn't render in Safari, FF, Chrome past that point.

    Another issue is when you drag the window so that it's wide, but very short like a rectangle, then scroll down, the bottom bar doesn't follow either. This is causing problems on iOS devices by covering up the video.


    Any help would greatly appreciated!!

    Here's the CSS:

    Code:
    <style type="text/css">
    		html, body {
    		margin: 0;
    		padding: 0;
    		height: 100%;
    		}
    
    		body
    		{
    		line-height:8px;
    		font-size:12px;
    		background-image:url('images/newbg.jpg');
    		background-repeat:repeat-y;
    		background-color:#616369;
    		background-position:center;
    		font-faimly: 'Arvo';
    		}
    		
    		#topbar
    		{
    		background-image:url('images/topbar.jpg');
    		background-position:center;
    		top:0;
    		height:10px;
    		position:absolute;
    		width:100%;
    		}
    		
    		#wrapper
    		{
        	        min-height: 100%;
        	        height: auto !important;
        	        height: 100%;
        	        margin: 0 auto -186px;
    		}
    		
    		#main
    		{
    		overflow:auto;
    		padding-bottom: 186px;
    		}
    		
    		#content
    		{
    		position:absolute;
    		left:50%;
    		margin-left:-434px;
    		height:auto;
    		width:868px;
    		}
    		
    		#footer
    		{
        	        position: relative;
       	 	margin-top: -186px;
    		height:186px;
        	        background-image:url('images/bottombar.jpg');
     		background-repeat:no-repeat;
    		background-position:center;
    		clear:both;
    		}
    		
    		#logo
    		{
    		position:absolute;
       		top:34px;
    		padding:0px;
        	        width:868px;
        	        margin:0 auto;
        	        overflow:hidden;
    		background-image:url('images/logo.gif');
    		background-repeat:no-repeat;
    		height:48px;
    		}
    		
    		#topmenu
    		{
    		position:absolute;
       		top:19px;
    		text-align:right;
    		padding:2px 0px 2px;
    		width:866px;
        	        margin:0 auto;
        	        overflow:hidden;
    		font-family: 'Yanone Kaffeesatz', serif;
      		font-size: 14px;
      		font-style: normal;
      		font-weight: 400;
      		text-shadow: none;
      		text-decoration: none;
      		text-transform: uppercase;
    		letter-spacing: 0.08em;
      		word-spacing: 0em;
    		color:#616369;
    		}
    		
    		#video
    		{
    		position:absolute;
       		top:200px;
    		padding:0px;
        	        width:868px;
        	        margin:0 auto;
        	        overflow:hidden;
    		height:600px;
    		}
    	
    		</style>
    And the HTML:

    Code:
    <body>
    	
    	
    	<div id="wrapper">
    		<div id="main">
    			<div id="content">
    				<div id="logo">
    					<div id="topmenu">home | the process | examples | get a quote | contact us</div>
    				</div>
    				<div id="video">
    				
    					<iframe src="http://player.vimeo.com/video/24952017?title=0&byline=0&portrait=0&color=d4d4d4" width="868" height="488" frameborder="0"></iframe>
    				
    				</div>
    			</div>
    		</div>
    	</div>	
    		<div id="footer"></div>
    		<div id="topbar"></div>
    			
    	</body>
     
  2. benj07 macrumors member

    Joined:
    Oct 26, 2007
    #2

Share This Page