OK so this is complex. I have a main div called (#box) and inside it there is a footer to be FIXED to bottom of screen. And a content div (#content).
We dont want the whole page to scroll at all (unless there is no way around this).
Inside the #content div there is dynamically loaded div content (.pdChanger). Yes it has a class because each different div that can load into this content div has a unique id. Inside the .pdChanger divs there is usually 2 things....a banner (#banner) and then the actual text (.flexcroller).
The only part we want to scroll is the actual text. Nothing else.
Footer is fixed at 70px tall. Everything else is 100%.
Here's the problem:
Not all of the text (.flexcroller) scrolls. It only seems to scroll 75% of the text. We thought it was the footer in the way...so we took that off temporarily. But that wasnt it. We do need to consider to not run under the footer so I have a javascrpt function I wrote that runs on document ready and when window is resized...and it will change the height of (#content) to window size - 70px (for footer). This stops the content from running behind the footer. But still the whole text of the (.flexcroller) is not scrolling.
Here is sample CSS code:
I can't really show you the example yet as it is hosted locally till i fix. But any help, I'd really appreciate it.Code:html, body {margin:0px; height:100%; padding:0px; background:#000000 url(../images/static/bg.jpg) repeat-x fixed ; color:#000000; vertical-align:bottom; overflow: auto;} .flexcroller { height: 100%; } #box {margin:0px auto; background:#000000; position:relative; top:70px; width:815px; font-family:'GothamLightRegular'; color:#ffffff; height: 100%; } #content {margin:0px auto; width:815px; font-family:'GothamLightRegular'; color:#ffffff; height:100%; position: relative; } #about {font:15px 'GothamLightRegular'; color:#ffffff; background: #000000; width:815px; margin:0px auto; height: 100%; position: absolute; top: 0; left: 0; z-index: 12;}


Reply With Quote
Bookmarks