IE: Why are links fixed in a scrollable div?

[grahama]

In IE6, I have a scrollable div where the anchor links do not scroll with the rest of the content. The links remained fixed while the rest of the text scrolls. I had to resort to using iframes to get around the issue :(


Abridged CSS:
a {position: relative;}

div#inserted_content {
position relative;
width:480px; height:415px;
overflow: auto;
}

Abridged HTML:
<div id="inserted_content">
<p>
We love our customers blah blah blah, so
<a href="mailto:[e-mail]"/>Email Us</a>
Did you know blah blah blah....
</p>
</div>

What could be the problem, and is there a workaround?

Of course, this works in Firefox and Safari......

many thanks
g

[edited by: encyclo at 2:45 am (utc) on Nov. 12, 2006]
[edit reason] examplified [/edit]

[birdbrain]

Hi there grahama,

I can see no reason, having looked at the code which you have posted, for using position:relative. :o
Without it there is certainly no problem with IE rendering. :)

birdbrain

[SuzyUK]

There is a "bug" (not sure if it's a bug or expected behaviour actually) in both IE6 and 7 in this situation - using relatively positioned elements inside an element with overflow set to auto or scroll - The solution: the scrolling div needs

position: relative;

set on it.

There's a typo in your code for the inserted_content div.. position: relative;, there should be a colon in the middle. When I fix that it works fine with the code given

[edited by: SuzyUK at 10:02 am (utc) on Nov. 12, 2006]

[grahama]

thanks, that did the trick

g