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:
And the HTML:
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>