html - Page won't scroll; using CSS fixed position tables -
it's been years since have done heavy duty html/css work, , started overhaul of company's website. i'm pretty happy way design turning out , seems work, content filling page have realized page won't scroll, despite there being content below 'the fold'.
i'm guessing because i'm using css tables fixed positions. tried changing position attribute 'relative', , although fixed scrolling issue, messed layout , i'm not sure how make work.
here fiddle code: http://jsfiddle.net/jbooth63/sknsc/
and here link live preview of code: http://www.financecapital.us/test/test.html
any appreciated! here example of code using:
<head> <style type="text/css"> body,td,th { font-family: gotham, "helvetica neue", helvetica, arial, sans-serif; font-style: normal; font-weight: normal; font-size: 10px; color: #333;} body { background-color: #fff;} .socialcell { position: fixed; margin-top: 105px; margin-left: 5px; background-color: #ff9900;} .headerimg { position: fixed; margin-left: 5px; margin-top: 5px;} .leftsidebar { position: fixed; margin-top: 155px; margin-left: 5px; background-color: #eee; border-right: .1em dotted #369; border-bottom: .1em dotted #369;} </head> <body> <div class="headerimg"><img src="header2.jpg" title="financing world's equipment."> </div> <div class="socialcell"> <table width="300" height="50"> <tr> <td><center> <a href="https://www.facebook.com/financecapitalut"><img src="facebook.png" title="finance capital on facebook" height="40"></a> <a href="http://www.linkedin.com/company/finance-capital-llc?trk=hb_tab_compy_id_477909#"> <img src="linkedin.png" title="finance capital on linkedin" height="40"></a> <a href="https://twitter.com/financecap"><img src="twitter.png" title="@financecap on twitter" height="40"> </center></td> </tr> </table> </div>
that's easy pal, i've done myself using chrome developer tools.
the problem you're using: "position: fixed;" on divs.
using "position: absolute;" on every div, should work.
hope helps you.
Comments
Post a Comment