Re: css: scrolling divs and anchors

by Collette McNeill <collette(at)mlwebworks.com>

 Date:  Tue, 28 Oct 2003 08:26:38 -0800
 To:  "Wisca" <andrew(at)wisca.co.uk>,
hwg-techniques(at)hwg.org
 In-Reply-To:  plus
  todo: View Thread, Original
Hi Andrew and thanks for looking at my problem,

At 09:40 AM 10/28/03 +0000, you wrote:
>What happens when I view it using IE6 - an earlty point release - is that 
>the whole page scrolls as well as the div, so that the relevant anchor is 
>at the top of the whole page, not just the top of the division.
>
>Then, because the page has no scroll bars, you can't scroll the page back 
>down again.
>
>Mozilla does the same thing.
>
>I don't know whether, using anchors to scroll to a given point, theh page 
>*ought* to do that, but when using anchors inside non-scrolling divisions 
>it definitely does scroll in that way. By my understanding, that would be 
>correct behaviour.
>
>Meanwhile, for reasons I don't understand, it appears that the javascript 
>page measuring software manages to prevent the page from reloading 
>properly, or even from loading correctly in a new page by using ctrl-N. 
>However, clicking on the link in the email makes it load correctly again.

That's what happens in every browser when I try to use anchors.  I ditched 
the idea of linking to text within absolutely-positioned scrolling Div's, 
splitting the calculator content up into three sections plus an intro seems 
to work. The altered page can be seen at 
http://www.eastbayloans.com/refinance.html (works for javascript) and there 
arent any problems I can see with reloading or ctrl-N.

About the scrollbars:  if scrollbars are left on, then even while the 
background image resizes, and content APPEARS to fit in the window with no 
overflow, they appear in every browser I tested and invite people to scroll 
into a vast grey nothing. This si just a theory, but I think it's because 
the browser calculates enough space to contain all my abs-positioned hidden 
div's if they were displayed at once, end-to-end.  So I turned them off.

<SHARING>

When the scrolling div was embedded in a table, I could jump around content 
the way I wanted to (but couldn't resize properly -- a showstopper).

the structure they USED to be in, was something like
<.table><.td 40%><.td 60%><.div with defined height, scrollbar on 
overflow><.single-cell table 15px shorter than div>
<.content></single-celled table><./scrolling div><./table>

Stuff in the 40% table cell could link to anchors within the single-celled 
table and scroll properly!  It was nice. But it was awkward code that 
wouldn't resize when the window changed dimensions. Still a nice trick, if 
you don't need that functionality.

</SHARING>

Thanks everyone for helping me do the CSS Dance on this project!
It's not done, and I'm sure (as my Gropernator-elect would say) "I'll be back!"

Collette



>======= At 2003-10-27, 09:07:00 you wrote: =======
>
> >Hello List,
> >
> >I've used a scrolling div to display content. I want to use anchors to
> >allow users to skip around within that content, but the page behaves
> >unexpectedly.
> >
> >Wanna see?
> >Click on "calculators" when you reach this page:
> >http://205.158.168.102/020.shtml
> >And then click the link "mortgage calculators".
> >
> >Does anyone know what's going on here?
> >
> >The scrolling div is defined thusly in an external style sheet:
> >..Content {
> >         font-size:13px;
> >         font-family:"Trebuchet MS", Times New Roman;
> >         color:#FFFFFF;
> >         position: absolute;
> >         top: 126px;
> >         visibility: hidden;
> >         display: block;
> >         background-image:url("fade-dkblue.gif");
> >      border:1px solid #333333;
> >         padding: 4px 8px 4px 8px;
> >         background-attachment:fixed;
> >         }
> >and later, based on output by a sniffer, scrolling div gets a scrollbar in
> >the document header
> >if (is.ns) {
> >     document.write('<.STYLE type="text/css">.Content {overflow:
> >-moz-scrollbars-vertical;}<./style>');
> >}
> >else if (is.ieX || is.ie5 || is.ie4) {
> >         document.write('<.STYLE type="text/css">.Content {overflow-Y:
> >scroll;}<./style>');
> >
> >}
> >
> >In early, buggy iterations of this page i #COULD# move around the scrolling
> >div, but i linked to the anchor from OUTSIDE of the div. I must have FIXED
> >that.  This time i'm trying to move around within the section. I might just
> >break this single section into several...
> >
> >Thanks in advance,
> >Collette
> >
> >
> >.
>
>= = = = = = = = = = = = = = = = = = = =
>
>
>Best regards.
>Wisca
>andrew(at)wisca.co.uk
>2003-10-28

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA