homepage Welcome to WebmasterWorld Guest from 54.167.179.48
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Firefox, overflow: hidden, anchor tags, big trouble?
madmac

10+ Year Member



 
Msg#: 8516 posted 12:12 am on Feb 20, 2006 (gmt 0)

This is crazy. It fails in every incarnation of Mozilla I have tried, including Firefox 1.5. It seems to be a remnant of an older bug that was fixed in Firefix 1.5, but they must have missed that anchor tags will also trigger the bug.

*now before anyone flies off on my large negative & positive margins, it is a method that the One True Layout uses, which is by far the best CSS layout method I've ever seen to date.*

Here just try this in Firefox to see what I mean... I really cannot explain it in words.

And also can anyone help me sort out a workaround?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>bug</title>
<style type="text/css">
/* <![CDATA[ */
/* code snippet without sense, just to reproduce the bug */
.wrapper {
overflow: hidden;
}
#block_1 {
width: 150px;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/* ]]> */
</style>
</head>
<body>
<div class="wrapper">
<div id="block_1">
<p><a href="#anchor">goto anchor (click me to see)</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<a name="anchor"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</body>
</html>

 

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 8516 posted 2:18 am on Feb 20, 2006 (gmt 0)

No bug. Improper code. Validate to see your errors.

madmac

10+ Year Member



 
Msg#: 8516 posted 5:12 am on Feb 20, 2006 (gmt 0)

oh sorry I forgot a closing <p> tag, but that is not the problem. You obviously didn't even try the test case. I'm looking for help here, and not the self appointed "I'm smarter the you" kind of help ;)

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 8516 posted 2:29 pm on Feb 20, 2006 (gmt 0)

madmac..

are you meaning that when you click the link to go to the anchor the top content get's cut-off, lost (hidden)?

If so I'm not so sure it's a bug, the same also happens in IE (once you add the layout fix) ~ I think this is probably related to the behavior of overflow property in general and that in order to bring the content "to the top" it overflows the top of the element and so hides it - try changing the overflow to scroll to see what's happening without it being hidden

Once the element has been drawn there should be no scrollbars to access the hidden content, if you focus the element to access a different part of the content (via a named anchor) then the dimensions do not change and the scrollbar would be required to bring the top (hidden) part back..

Overflow Property [w3.org]
hidden
This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.

Anyway this is just a quick theory on a look at your code, I have to admit that the one true layout is just way too complicated with it's various workarounds and was indeed buggy until FF1.5 anyway so I haven't really looked at it in depth nor for any applications, too unstable for me ;)

Meanwhile anyone care to explain if this is the way a browser should handle overflow/clip?

Suzy

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 8516 posted 3:27 pm on Feb 20, 2006 (gmt 0)

madmac, iirc, you had six errors. All related to the closing of divs, <p>s, etc. I don't see why we should correct your errors for you. Telling you to fix your own errors first does not mean I'm smarter than you are. Well, maybe it does, but I won't say that.

madmac

10+ Year Member



 
Msg#: 8516 posted 4:43 pm on Feb 20, 2006 (gmt 0)

drhowarddrfine, there is one true error, which is I simply forgot to close the first paragraph tag. I already said sorry for this, but I cannot go back and edit the post now, it is too late. What is more that fixing the error does not correct the behavior of the anchor link, so I really don't know what you are after. Please stop dwelling on it.

Suzy, I won't dwell on it too much but the one true layout only uses a couple minor workarounds, and even then it is only to get support for minority browsers. Of all css-based general layouts, its methodology by far requires the least hacking and workarounds, if you need that type of layout.

Back on track, I'm really not sure what the behavior should be. Because of the large margins & padding, no content is clipped other than the large margins, so scrolling to that should be denied, which it is. However, the anchor tags is not clipped and fully visible to the user if they scroll the page.

Now telling the document to goto that location, in my opinion, the page should scroll to that location. This is the observed behavior in Safari, Opera, and IE Mac. However, IE 6 Win (not sure about 5 or 5.5) and Mozilla scroll to the location by scrolling the div independent of the page. They are treating the div as if it is an iframe or has the overflow: scroll property, but it is not and does not.

Changing it to overflow: scroll, and you get the exact same behavior in Mozilla and IE, except now there a scroll bar to get back "up" to the top of the content. But this is no good because of the large margins, you end up with an incredibly large scrolling portion within the page.

In my opinion, IE's and Mozilla's behavior of anchor tags with overflow:hidden is incorrect and "a bug". Mozilla had a very similar bug not long ago where on overflow: hidden content and large margins if you clicked and dragged or used the mouse scrollwheel, the content, incorrectly, scrolled off the page, much the same way as the anchor link is scrolling the content off the page. It is quite possible they are related.

But more importantly than debating whether it is a bug or not, is finding a solution so that the same behavior is observable in all major browsers. At this point, I am considering putting in a smooth scrolling javascript script to scroll to anchor links, which I have tested some and works alright, as a temporary solution.

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 8516 posted 6:43 pm on Feb 20, 2006 (gmt 0)

hmm.. lets keep it cool shall we, drHdrF no-one is smarter than anyone else IMO ~ if the problem had been fixed by validation then it might have been a helpful answer ~ otherwise no need for nitpicking!

madmac.. agreed I don't really want to debate about "bug or not" behaviour either ;)

however I often find that is in the small print of the specs where if you can find or decipher a "correct behaviour" as opposed to just a different UA interpretation then you can maybe find a workaround/solution, unfortunately I didn't have time to dissect the overflow specs earlier to see if there is an anomaly and hence my question - I was trying to help really I was :)

meantime ~ and I have no idea at all about how this will affect the whole of "OTL" ~ but your example seems to work if the large margin/padding is set on the top as opposed to the bottom, wanna try it and report back if OTL can be built this way or if it helps?

<style type="text/css">
.wrapper {
overflow: hidden;
background: #cfc;
zoom: 1; /* IE layout fix */
}
#block_1 {
background: #fcf;
width: 150px;
padding-top: 32767px;
margin-top: -32767px;
}

p {line-height: 20px; background: #ffc; margin: 0;}
</style>
</head>
<body>
<div class="wrapper">
<div id="block_1">
<p id="anchor2"><a href="#anchor">goto anchor (click me to see)</a></p>
<p>... foo text... </p>
<p id="anchor" style="color: red;"><a href="#anchor2">back to top anchor</a> sit amet etc etc etc</p>
</div>
</div>

Good Luck
Suzy

madmac

10+ Year Member



 
Msg#: 8516 posted 7:11 pm on Feb 20, 2006 (gmt 0)

Changing the margins to top is a good idea; however, they are set to the bottom in order to obtain equal column lengths. I know it isn't apparent here since there is only 1 column, which I did to simplify the problem and make finding a solution easier. But it needs to be on the bottom to facilitate equal column lengths.

madmac

10+ Year Member



 
Msg#: 8516 posted 11:05 pm on Feb 20, 2006 (gmt 0)

For now I have decided to just use some javascript scrolling for inline anchors on site's I have that are affected by this. I've adapted this smooth scrolling script: [kryogenix.org...]

I'll try to find a non-javascript solution over the next few weeks, but since this one works quite well, I probably will not dedicate a lot of time to figuring it out or deciphering the specs for the overflow property to determine who is correct, even though I have read over the brief descriptions. At this point I believe that Apple and Opera have got the behavior correct, and that Microsoft and Mozilla have it incorrect for inline anchors and overflow: hidden.

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 8516 posted 11:29 pm on Feb 20, 2006 (gmt 0)

ahh.. of course it does (needs it at the bottom)

I've played around and can get it semi working in IE using some position: relative; on nested divs.. but nowhere near perfect and anyway I wouldn't dare rely on that as position: relative is buggy (and has other side effects in IE7) causing other layout hacks to be required ~ anyway it doesn't do anything for FF, makes it worse if anything, so JS may be your only option..

that documentation with OTL is just way too much to go through just now.. and I have a stinking cold so brain cells not functioning on all cylinders :( Have you tried asking the creators of it to see if they have encountered this they might have a workaround?

Suzy

<update>
I found a comment from Alex Robinson on the A List Apart Article, dated Feb 03, (3 others provided examples of what you describe) ~ he says
First off I must apologise for not having managed to update the One True Layout article with this info since Iíve been aware of the issue since late November. Why I havenít is a long story that is irrelevant to this forum, except to say that I have been trying to get to the bottom of a) working around the problem and b) whether the problem is in the "equal height" technique or in Mozilla and IE's implementation. An update on all this will appear very soon, but the short version is, the behaviour is fixable in IE but not in Mozilla (though, please if anyone can prove me wrong, let me know).

I had hoped to get away with slipping it out before too many people noticed Ė ...

So it seems keeping an eye on the PIE notes may be the best option?

- just read your reply - that js smooth scroll looks nice so if it's working that's OK ~ we'll find out in the future if theres any outcome :)

Suzy

AgentFive

10+ Year Member



 
Msg#: 8516 posted 7:51 pm on Feb 24, 2006 (gmt 0)

I ran into this same problem myself, and man, was it annoying to have my nice OTL unusable b/c of inline anchors...

I found a solution w/o javascript, if you wrap the layout in an enclosing container, and then "lift" the anchor tags into the enclosing container by setting their position to absolute (CSS position:absolute elements are positioned in the closest ancestor specifying position: relative or position:absolute). This way, the anchor tags are no longer positioned inside the overflowing window, and work correctly in Firefox. In a cruel turn of events, there's actually a similar anchor bug (assuming this is a bug) in IE if the inner window ISN'T positioned with position: relative, so I used the Tan Hack to selectively set this property. I tried for a long time to see if there wasn't another way, but ah well.

Here's the sample code, tested to work in IE 5.0->6.0, FF 1.0->1.5, NS 7.0->8.0, and Opera 6 and 7. Actually, I've never been able to get the OTL to work in Opera anyway, not that I've tried very hard. I added colors to highlight the different areas, think it makes things clearer, helped me debug anyway.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>bug</title>
<style type="text/css">
/* <![CDATA[ */
/* code snippet without sense, just to reproduce the bug */

#contentAreaWrapper {

/*
* In Firefox, all positioning of anchor tags
* is w.r.t. this wrapper, b/c of the position
* set here.
*
*/
position: relative;

/*
* We need to specify a width here, for IE 6.0.
* This isn't b/c of the anchor/overflow bug,
* but b/c otherwise IE 6.0 will scroll the
* page b/c of the OTL padding.
*
*/
width: 745px;

/*
* IE overflows the inner content area despite
* the fact that we say not to, so we need to
* set overflow hidden here. We don't need to
* worry about the anchor bug on this overflow
* b/c in Firefox the inner overflow is
* respected.
*
*/
overflow: hidden;

border: 4px solid blue;

}

#contentArea {

/*
* Hides the OTL overflow in Firefox,
* but not in IE.
*
*/
overflow: hidden;

border: 1px solid red;

}

#mainContentArea {

/* OTL padding / margin */
padding-bottom: 32767px;
margin-bottom: -32767px;

width: 200px;

background-color: yellow;

}

.anchorFix {

/*
* "Lift" the anchor out of the content
* area with the OTL padding into the outer
* wrapper.
*
*/
position: absolute;

/*
* We need to set a width here, otherwise IE 5.5 and 6.0
* will disappear the anchor entirely. The anchor is
* invisible anyway, so doesn't really matter.
*
*/
width: 1px;

}

/* Hack for IE */

/*
* In IE, without relative positioning the exact
* same error occurs as in Firefox: the container
* is scrolled up when an anchor link is selected.
*
* These errors are unfortunately rather mutually
* exclusive, it may be hard to fix one without
* disabling the other, so a hack might be cleanest.
*
*/
/* Tan Hack */
* html #mainContentArea {
position: relative;
}

/* ]]> */
</style>

</head>

<body>

<div id="contentAreaWrapper">

<div id="contentArea">

<div id="mainContentArea">

<a href="#anchor1">goto anchor (click me to see)</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<a class="anchorFix" name="anchor1"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

</div>

</div>

</body>
</html>

Sorry for the monster of a post,

- Greg

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved