Since the project I was working on for Q42 together with Sjoerd had to wait a little we thought it would be a good idea to update the site of their WYSIWYG XML Editor, Xopus. There are still a few minor mistakes on the site (validating and all that), but those do not make the site inaccessible or so. We also could not use UTF-8 (learn about UTF-8, leer over UTF-8) because the current httpd.conf file did not allow specifying a .htaccess and modyfying the server configuration file was not considered to be a good idea (and nobody who was around was sure if we were just allowed to read it, or if we could overwrite as well) just before the weekend. I guess those things will be fixed eventually. (Obviously, the same is true for putting mod_negotation to work.)
Anyway, the cool thing of the original site was the fixed top and bottom. It was done with some scripting that did not work cross browser. In Mozilla you could not scroll and in Safari the content was not shown. Although Xopus is a product just for Internet Explorer thanks to not supporting of (for example) contentEditable="true" in others the website could at least be made accessible so people using other browser then Internet Explorer could check what the product is about.
However, emulating position:fixed was rather tricky. I first thought of using some fixed positioning technique I developed ages ago, but did not quite emulate the intented effect. (In Internet Explorer it looks like you are using frames, which is not what we wanted.) There are some examples on the internet but most made the fixed element "flicker". You can see that here. Of course, you want better; position:fixed in IE. Although there are workarounds for Internet Explorer 6.0 in standards mode, just use quirks. It is so much easier, especially if you have to cope with Internet Explorer 5.5 (and even 5.0) as well.
The difference between the two files is background:url(foo) fixed. Although the existence of the file foo is not really needed, make sure 'foo' is some zero byte file to prevent stupid 404 requests. You might think the reference to foo is not needed at all and you can just write background-attachment:fixed. Unfortunately, that is incorrect. Internet Explorer probably runs a bit different when this setting is set.
All other things are pretty clear, I hope. Have fun.
By the way, I would love an Opera solution for the problem you can see on xopus.com with that browser. More specifically, ul#subnav. Thanks. Removing the width property of ul#subnav and putting it on ul#subnav li works. You can now visit the site in Opera although the product itself does not work in that browser :-). The demo issue mentioned in the comments has been resolved as well. Credits for debugging it in Opera go to Fabian Valkenburg.
Sweet. Just curious, though... why are you evaluating the document.body.scrollTop value? The value is a number, and after evaluating it will still be a number. A bit over the top, it would seem!
Mark, eval forces IE to keep evaluating the expression. Apparently IE has some heuristics to decide how often to evaluate the expression, f.e. adding 0*Math.random() works too. eval is the shortest we could find.
It doesn't scroll smooth. Is that because of my slow computer?
Sjoerd, hehe, when I was typing the comment I wrote unless there is some strange quirk in IE
(or something along those lines)... and indeed there is. Thanks for the explanation!
This is the same solution that IE7 uses.
If you use url(http:) then IE makes no unnecessary HTTP requests.
Hmmm... Opera has a different 'auto' value for the 'top' property for this #subnav element, it gets placed right under the float. If it is positioned relatively instead of absolutely, it shows up at the expected place. Looks like an Opera bug. Specifying a 'top: 80px;' on #subnav fixes this, but might not be exactly right (in all browsers) with non-default font-sizes.
I'm using IE7 script to use position: fixed. But it runs into neverwnding scrolling in some situations (on M Studio's testing page: when window is too wide or wou reload page and the document is scrolled down, it doesn't shows the navbar).
I hope that this technique removes this buggy behavior.
try this code if you need strict mode and dont want to ruin all your other position:absolute elements.
PS: BTW, use a form validator that lets you check in client before sending AND in server too.
Xopus demo takes years to load (actually, it did not load whatsoever). Some problem with the server?
Sergi, your version flickers in Internet Explorer where our version does not.
i just wanted you to read my code in order to fix the "quirks" need:
//IE6 in non-quirks doesnt get document.body.scrollTopThis is what you'd want in your expression to get the position:
(document.body.scrollTop)?document.body.scrollTop:document.documentElement.scrollTop;laters, Sergi
PS: my example flickers cause a timeout needs to be set, and i didnt want to (just to make it simpler). So, instead of using the function called by my window.onscroll I'd have to use another way.
Is there a way to make the layer fixed in a specific position on the page without changing the size of the layer?
Sam, I guess so. Just play a bit with the javascript for Internet Explorer. Add something like "+30" to the end.
Thanks, Anne, that seemed to work. Thought I had tried that. Oddly enough I can't get this to work with the dtd. I have linked stylesheet which seems to be the only difference.
Well, we have linked style sheets on Xopus as well. I guess your site renders in standard compliance mode, where our does not. (By the way, it only renders in quirks mode in Internet Explorer.)