D
Dave Rado
Hi
I was very excited to discover recently a method of using css to emulate
frames in the sense that it keeps the header and footer static and visible
while you scroll down a page, but does so in a way that is both
bookmarks-friendly and search-engine-friendly (unlike real frames, which are
neither). This is something my users would very much like me to implement.
However, I have hit some snags with IE6 and 7 and would appreciate the help
of any css experts here with solving these problems.
The reason I'm posting here rather than in a specialist css newsgroup is
that I've found that the people in the latter tend not to be very keen to
help me work around IE-specific problems.
In essence, the method I found works as follows:
1) For all non-Microsoft browsers and for IE7 in strict mode, it uses a
scrollable content div that has a value for the top and bottom properties
equal to the height of the header and footer divs, respectively; and
overflow is set to auto for that div. The header and footer divs have
overflow set to hidden.
2) For IE5.x and for IE6 and 7 in quirks mode, it uses a scrollable content
div that has a value for the top and bottom borders equal to the height of
the header and footer divs, respectively. (Same overflow values as above).
The website that I first saw this technique being used on was using a
doctype that makes IE6 and 7 go into quirks mode. However, I use a doctype
that makes IE6 and 7 go into strict mode and I am very reluctant to change
that. The sharp-eyed amongst you will have already realised from 1) and 2)
above that as far as I can see, neither technique works for IE6 in strict
mode - more on that below.
I have created a mock-up of the technique working with a doctype that makes
IE6 and above go into quirks mode, at: http://tinyurl.com/3dl4vn .
To see what I mean about it being bookmarks-friendly, go to the page the
above url expands to, and then append #sec1 to the end of the url, and press
<Enter>. It goes straight to the bookmark, in all browsers.
It works in all browsers, although with a few minor problems that I have
thought of workarounds for:
1) It doesn't print properly, but I'll create a print media stylesheet so
that it does.
2) In Opera and Safari, and in all browsers that have javascript disabled,
you have to click on the scrollable area of the page in order to set the
focus to it before you can scroll with the keyboard (although scrolling with
the mouse works normally). In IE and Firefox, with javascript enabled, you
can scroll with the keyboard as soon as the page has loaded. I don't really
see this as a major problem, and for any users that do, I will in any case
be providing an alternative stylesheet that doesn't use pseudo-frames.
3) In IE7, if you zoom, the page becomes a complete mess, especially if you
press Ctrl+ more than once. More on that later. But my current workaround
for this problem is to provide an alternative stylesheet that doesn't use
pseudo-frames, for the sake of those IE7 users who need to be able to zoom.
I also use larger default font-sizes and line-height, and fewer characters
per line, than the average website does, which should hopefully greatly
reduce the number of people who feel the need to zoom in any case. (BTW, as
an aside, does anyone know IE's zoom bugs have been fixed in version 8 beta?
IE7's zoom is simply awful. My pages zoom beautifully in Opera, without any
problems at all!)
***
I have created a second mock-up of the technique working with a doctype that
makes IE6 and above go into strict mode, at: http://tinyurl.com/378ub4 . As
you can see it works perfectly (subject to the above qualifications) in all
browsers except IE6. In IE6 it's a complete mess, especially if you try
going to a bookmark (as before, append #sec1 to the end of the expanded url,
and press <Enter> to see what I mean).
Can anyone see any modifications I can make to my css in order to allow this
technique to work in IE6 when in strict mode?
I have found a workaround to this problem, but I don't like it. If one
precedes the doctype declaration with the string:
<?xml version="1.0" encoding="iso-8859-1"?>
.... then IE6 works in quirks mode, whereas IE7 and above work in strict
mode. Using this technique I have managed to get it working in all
browsers - see my third mock-up, at http://tinyurl.com/35zrqg . But I'd much
rather have IE6 working in strict mode if possible.
***
So I really have two questions:
1) Can anyone think of any modifications to the css in my second mock-up
that would allow the technique to work in IE6 when in strict mode?
2) Can anyone think of any modifications to the css that would allow one to
zoom when in IE7 without the page turning into a complete mess? (When one
zooms using Ctrl+ in IE7, the footer jumps all over the place, and also, one
can't scroll to the bottom of the screen with either the scrollbar or the
keyboard - the only way to scroll to the bottom is with the mouse wheel!)
Dave
I was very excited to discover recently a method of using css to emulate
frames in the sense that it keeps the header and footer static and visible
while you scroll down a page, but does so in a way that is both
bookmarks-friendly and search-engine-friendly (unlike real frames, which are
neither). This is something my users would very much like me to implement.
However, I have hit some snags with IE6 and 7 and would appreciate the help
of any css experts here with solving these problems.
The reason I'm posting here rather than in a specialist css newsgroup is
that I've found that the people in the latter tend not to be very keen to
help me work around IE-specific problems.
In essence, the method I found works as follows:
1) For all non-Microsoft browsers and for IE7 in strict mode, it uses a
scrollable content div that has a value for the top and bottom properties
equal to the height of the header and footer divs, respectively; and
overflow is set to auto for that div. The header and footer divs have
overflow set to hidden.
2) For IE5.x and for IE6 and 7 in quirks mode, it uses a scrollable content
div that has a value for the top and bottom borders equal to the height of
the header and footer divs, respectively. (Same overflow values as above).
The website that I first saw this technique being used on was using a
doctype that makes IE6 and 7 go into quirks mode. However, I use a doctype
that makes IE6 and 7 go into strict mode and I am very reluctant to change
that. The sharp-eyed amongst you will have already realised from 1) and 2)
above that as far as I can see, neither technique works for IE6 in strict
mode - more on that below.
I have created a mock-up of the technique working with a doctype that makes
IE6 and above go into quirks mode, at: http://tinyurl.com/3dl4vn .
To see what I mean about it being bookmarks-friendly, go to the page the
above url expands to, and then append #sec1 to the end of the url, and press
<Enter>. It goes straight to the bookmark, in all browsers.
It works in all browsers, although with a few minor problems that I have
thought of workarounds for:
1) It doesn't print properly, but I'll create a print media stylesheet so
that it does.
2) In Opera and Safari, and in all browsers that have javascript disabled,
you have to click on the scrollable area of the page in order to set the
focus to it before you can scroll with the keyboard (although scrolling with
the mouse works normally). In IE and Firefox, with javascript enabled, you
can scroll with the keyboard as soon as the page has loaded. I don't really
see this as a major problem, and for any users that do, I will in any case
be providing an alternative stylesheet that doesn't use pseudo-frames.
3) In IE7, if you zoom, the page becomes a complete mess, especially if you
press Ctrl+ more than once. More on that later. But my current workaround
for this problem is to provide an alternative stylesheet that doesn't use
pseudo-frames, for the sake of those IE7 users who need to be able to zoom.
I also use larger default font-sizes and line-height, and fewer characters
per line, than the average website does, which should hopefully greatly
reduce the number of people who feel the need to zoom in any case. (BTW, as
an aside, does anyone know IE's zoom bugs have been fixed in version 8 beta?
IE7's zoom is simply awful. My pages zoom beautifully in Opera, without any
problems at all!)
***
I have created a second mock-up of the technique working with a doctype that
makes IE6 and above go into strict mode, at: http://tinyurl.com/378ub4 . As
you can see it works perfectly (subject to the above qualifications) in all
browsers except IE6. In IE6 it's a complete mess, especially if you try
going to a bookmark (as before, append #sec1 to the end of the expanded url,
and press <Enter> to see what I mean).
Can anyone see any modifications I can make to my css in order to allow this
technique to work in IE6 when in strict mode?
I have found a workaround to this problem, but I don't like it. If one
precedes the doctype declaration with the string:
<?xml version="1.0" encoding="iso-8859-1"?>
.... then IE6 works in quirks mode, whereas IE7 and above work in strict
mode. Using this technique I have managed to get it working in all
browsers - see my third mock-up, at http://tinyurl.com/35zrqg . But I'd much
rather have IE6 working in strict mode if possible.
***
So I really have two questions:
1) Can anyone think of any modifications to the css in my second mock-up
that would allow the technique to work in IE6 when in strict mode?
2) Can anyone think of any modifications to the css that would allow one to
zoom when in IE7 without the page turning into a complete mess? (When one
zooms using Ctrl+ in IE7, the footer jumps all over the place, and also, one
can't scroll to the bottom of the screen with either the scrollbar or the
keyboard - the only way to scroll to the bottom is with the mouse wheel!)
Dave