When I view a gateway quiz with IE 6 (which I would never choose to do, btw) the images of TeX expressions are incorrectly positioned, especially in the first few problems. A few other display problems also occur.
I have noticed that simply resizing the browser window corrects all these issues. I have also determined that the display problems are related to the javascript code for the timer---when I remove the timer script from gateway.template, IE 6 is fine.
Any suggestions about what to do to eliminate this (other than "Don't use IE 6") would be much appreciated.
Thanks,
Louis
Hi Louis,
Thanks for raising this issue. I take it that is this when you're using the images display mode. Have you (/can you) tried(/y) using jsMath mode?
My bet is that this is a problem with the workaround I have to deal with IE6 not honoring the fixed value for CSS positioning that we want to use with the timer.
I think the following is a work-around if you need a fix soon:
1. in [webwork_root]/htdocs/css/gateway.css, change line 25 from
position: fixed;
to
position: absolute;
and
2. in [webwork_root]/conf/templates/math/gateway.template, change
lines 81-83 from
if ( navigator.appName != "Netscape" &&
parseFloat(navigator.appVersion) < 7 ) {
theTimer.style.position = "absolute";
to
if ( navigator.appName == "Netscape" ) {
theTimer.style.position = "fixed";
I'll get that updated in the codebase. Please let me know if it doesn't solve your problem.
Thanks,
Gavin
Thanks for raising this issue. I take it that is this when you're using the images display mode. Have you (/can you) tried(/y) using jsMath mode?
My bet is that this is a problem with the workaround I have to deal with IE6 not honoring the fixed value for CSS positioning that we want to use with the timer.
I think the following is a work-around if you need a fix soon:
1. in [webwork_root]/htdocs/css/gateway.css, change line 25 from
position: fixed;
to
position: absolute;
and
2. in [webwork_root]/conf/templates/math/gateway.template, change
lines 81-83 from
if ( navigator.appName != "Netscape" &&
parseFloat(navigator.appVersion) < 7 ) {
theTimer.style.position = "absolute";
to
if ( navigator.appName == "Netscape" ) {
theTimer.style.position = "fixed";
I'll get that updated in the codebase. Please let me know if it doesn't solve your problem.
Thanks,
Gavin
Thanks Gavin.
The IE6 display issues are resolved. By the way, I was viewing formulas as images, not via jsMath.
There is however a related issue, having to do with the behavior of the timer box as one scrolls down the gateway quiz page. With some browsers (IE6 and Opera, I think), the box acts as if it were glued to the page, and so it disappears from view as one scrolls down the page. With other browsers (Safari and Camino, I think), the box behaves as if it were glued to the browser window, so it remains in view as one scrolls the page.
Clearly the second behavior is the desirable one. Can the code be modified so that this behavior occurs with all browsers?
Thanks,
Louis
The IE6 display issues are resolved. By the way, I was viewing formulas as images, not via jsMath.
There is however a related issue, having to do with the behavior of the timer box as one scrolls down the gateway quiz page. With some browsers (IE6 and Opera, I think), the box acts as if it were glued to the page, and so it disappears from view as one scrolls down the page. With other browsers (Safari and Camino, I think), the box behaves as if it were glued to the browser window, so it remains in view as one scrolls the page.
Clearly the second behavior is the desirable one. Can the code be modified so that this behavior occurs with all browsers?
Thanks,
Louis
Opera should handle it properly. It is just MSIE (of the "modern" browsers) that doesn't implement the CSS
An alternative, however, that might work for you is to modify the
Davide
position:fixed attribute. JsMath works around this by a terrible hack that uses an onscroll handler to listen for when the window scrolls and physically moves the jsMath button when that occurs (you also need to use an onresize handler in IE7). It is less than ideal.An alternative, however, that might work for you is to modify the
gateway.template to use a large DIV that contains the main body of the page, but with overflow:auto so that it will get scrollbars when the content is too large (you might also make it have width:100% and height:100%, and might need to set the margin and padding to 0 explicitly; I don't remember all the details). In this way, the DIV will do all the scrolling and the main page will stay in place. Then you simply put the floating timer outside the main scrolling DIV, and you are in business.Davide
Hi Davide,
(Why are you working?) I just tested the latest version of Opera (see subject line) and the timer box is "glued" to the page. It moves as the page is scrolled.
Thanks for the suggestion about modifying the gateway.template. I'll give it a try.
Louis
(Why are you working?) I just tested the latest version of Opera (see subject line) and the timer box is "glued" to the page. It moves as the page is scrolled.
Thanks for the suggestion about modifying the gateway.template. I'll give it a try.
Louis
The problem is not that Opera can't handle
Browser detection code of this sort is very fragile, and this approach is too naive to work well. There are CSS hacks that could probably be used to conditionally get
Davide
position:fixed, because I know that it can (it properly handles the jsMath button). It's probably bad browser detection code (sorry Gavin). For example, Gavin's suggested code above definitely will not work with Opera, since it's navigator.appName is not Netscape (although Safari's is, which is why it works for you there). So Opera will end up with position:absolute rather than position:fixed.Browser detection code of this sort is very fragile, and this approach is too naive to work well. There are CSS hacks that could probably be used to conditionally get
absolute for IE6 and leave fixed for everything else, but I don't know much about that. You'd have to search the net for those. (They have to do with using funny comments that certain browsers do or don't parse properly to hide things from one and not the other. IE also has some conditional statements that you can use to distinguish versions of IE, if I remember correctly.) That would eliminate the need for browser detection in JavaScript.Davide
Hi,
I have something that seems to work rather well. I removed the javascript browser check and instead modified gateway.css to include
div#gwTimer {
background-color:#ffeeaa;
color: black;
font-family: Times serif;
position: absolute; /* IE<7 sees this */
width: 15em;
right: 4em;
top: 4em;
border: dashed black 1px;
padding: 3px;
text-align: center;
} html>body #gwTimer {
background-color:#ffeeaa;
color: black;
font-family: Times serif;
position: fixed; /* IE 7 and other browsers see this, and handle it! */
width: 15em;
right: 4em;
top: 4em;
border: dashed black 1px;
padding: 3px;
text-align: center;
}
This seems to work nicely for IE7, Firefox, Safari, Opera and Camino. IE 6 displays correctly, but of course, the timer is not fixed in place.
If what I've done is a BAD idea, please let me know!
Louis
I have something that seems to work rather well. I removed the javascript browser check and instead modified gateway.css to include
div#gwTimer {
background-color:#ffeeaa;
color: black;
font-family: Times serif;
position: absolute; /* IE<7 sees this */
width: 15em;
right: 4em;
top: 4em;
border: dashed black 1px;
padding: 3px;
text-align: center;
} html>body #gwTimer {
background-color:#ffeeaa;
color: black;
font-family: Times serif;
position: fixed; /* IE 7 and other browsers see this, and handle it! */
width: 15em;
right: 4em;
top: 4em;
border: dashed black 1px;
padding: 3px;
text-align: center;
}
This seems to work nicely for IE7, Firefox, Safari, Opera and Camino. IE 6 displays correctly, but of course, the timer is not fixed in place.
If what I've done is a BAD idea, please let me know!
Louis
Hi Louis,
Thanks for the update. Davide is correct that my original code was an overly simplistic effort at browser detection; I have access to Firefox, IE6 and Safari here, so there's some hope that what I construct will work on those, but it's hard for me to test IE7 or Opera (et al.).
I'm hoping to get a full update of the stylesheets and javascript used by the gateway tests done in the next week or so, and will use a more robust workaround for the IE6 shortcomings as I do so. If anyone has an argument against the use of the html > body construction, please let us know.
Gavin
Thanks for the update. Davide is correct that my original code was an overly simplistic effort at browser detection; I have access to Firefox, IE6 and Safari here, so there's some hope that what I construct will work on those, but it's hard for me to test IE7 or Opera (et al.).
I'm hoping to get a full update of the stylesheets and javascript used by the gateway tests done in the next week or so, and will use a more robust workaround for the IE6 shortcomings as I do so. If anyone has an argument against the use of the html > body construction, please let us know.
Gavin