Hi there! I'm working on a site in which I want to have links from one page (page_01.html) to sections on another page (page_02.html). Those sections are inside a div with overflow:scroll;. I named sections with: <a name="name_01">Section 1</a> Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. <a name="name_02">Section 2</a> Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. <a name="name_03">Section 3</a> Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. HTML: I created the links in page_01.html as follows: <a href="page_02.html#name_01">Goto Section 1</a> <a href="page_02.html#name_02">Goto Section 2</a> <a href="page_02.html#name_03">Goto Section 3</a> HTML: This works fine in both Firefox 3 and IE7, but with Opera 9 I just end up at the top of the page. Is this an Opera bug or am I doing something wrong? Thanks in advance! Leandro
UPDATE: The div inside wich I had the sections wasn't scrollable, but hidden (overflow: hidden;). I changed it to overflow: scroll; and now it works with Opera 9. The problem is I don't want it to be scrollable! Is it possible to make it work with overflow: hidden;? Thanks again! Leandro
I've never used name attriutes for in-page links. I use IDs since they can go on anything. Meaning, <a href="#section3">Section 3</a> later... <h3 id="section3">Section 3</h3> <p>text text text...</p> Now it's funny that Opera would be doing this, since I've discovered that going to the top of the page with things which Don't Have Layout in IE would do that. Opera doesn't use the Haslayout model (thank teh gawdz). So, what happens to your page when you do not declare overflow at all? I know Opera is the one b*tchy browser who sometimes gives me a scrollbar even when I don't need it just because I say overflow: auto for browsers without ZOOM. I used Opera hacks to hide that statement, but it's not pretty. Declaring overflow: scroll on a div is like declaring 100% width on a div. It's already the default. You're just talking to yourself now. : ) Overflow: hidden doesn't stop scrolling, it just hides content which extends past any declared widths or heights. But, it is also commonly used to wrap floats. Which is what I think steelfrog was getting at-- do you need the overflow declaration for something other than overflow control?
It's better if I describe what I want: I have a <div> box which I need to have an exact size, regardless of the content size, but I want all content to be available. I got this with "overflow: auto;". This is working great so far. But now, I'm making some changes to the website. What I have is a list of activities in one page. When I click the desired activity, I want to be taken to its description. But I don't want to have a page per activity, I want to have one page with the descriptions of all the activities, and anchors would take me to the correct place through "name=" or "id=". But here is a twist: in this particular case, I don't want people to scrool through the list! I want them to only access the activities through the links. So, what I did was I created a page with links: <a href="page_02.html#name_01">Goto Section 1</a> <a href="page_02.html#name_02">Goto Section 2</a> <a href="page_02.html#name_03">Goto Section 3</a> HTML: Then I created a page with the activities description, using the already created scroolable div and a new div to hide the rest of the content: <div id="scrool_area" style="overflow:auto;width:600px;height:400px;"> <div id="activity_area" style="overflow:hidden;width:600px;height:300px;"> <a name="name_01">Section 1</a> Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. <a name="name_02">Section 2</a> Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. <a name="name_03">Section 3</a> Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. Text.Text.Text.Text.Text.Text. </div></div> HTML: This works in both Fx3 and in IE7, but not in Opera9. Is there a better way to do this? I'm still learning CSS and divs, so I'm no expert
Oh wow, what a neat trick. So now I want to know, which Opera? 9.2x or 9.5? Because I've heard of a few strange things or bugs with the new 9.5... I've heard of other things working in 9.2x but stopped with 9.5.