Posts Tagged ‘HTML’

Internet Explorer, position fixed and strict mode

Wednesday, September 14th, 2011

You want to use fixed positioning with CSS

If you want to make use of the simple CSS position:fixed; to display an element static to the viewport, you will run into problems with the Internet Explorer.

position:fixed is only supported since Internet Explorer 7

I tested this solution with IE 7.0.5730.13 on Windows XP. IE 6 does not support fixed positioning.

You need to enforce strict mode

Internet Explorer will default to "quirky rendering mode", if you don't add special tags to your HTML document:

<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Progress Test</title>
<meta http-equiv= "X-UA-Compatible"content="IE=Edge">
<script language = "JavaScript" src="../head.min.js"></script>
[...]

Both are essential! If you try IE 9 on the page without having added the meta tag X-UA-Compatible, it will render the page in quirky mode. And in quirky mode, it will ignore your position:fixed, and render your element where you have put it in the flow of the document.

Please note: I have read that this meta tag actually is not valid for this DOCTYPE.

It still does not work? I am testing with local documents!

Internet Explorer also takes into account where the element is being served from. This solution will work, if you upload your test documents to a server and access them over the Internet. It will not work (see note below) for local files, even if you use a local webserver to serve up the files (i.e. XAMPP). Internet Explorer will render your document in quirky mode, in this case.

Note: actually it does work offline (opening a document from the harddrive) in Internet Explorer 9 after fiddling somewhat with the document. I removed a IE compatibility script (not shown above), which I had included from Google previously. Check if you have one of those, and remove it!

Posted in English, tech | Tags: , , , , , , , , , ,  | No Comments »

Fix for weird bug

Sunday, April 3rd, 2011

Lectora inserts anchors (<A name=""> elements) which sometimes can break things!

I have programmed exercises with a sliding animation from "page" to "page" of exercises using the Scrollable from JQuery Tools. It would work fine in an older FireFox, but broke apparently in the newest version, it newer worked in Chrome, but it works in IE. The exercises would jump to the last page, skipping over everything in between.

After one hour of debugging I found out that an additional <A></A> element had to be inserted in each "page" of the exercises. (I do it programmaticaly using PHP.) Now all items show up … with an additional item (depending on the browser).

This additional item is an anchor inserted by Lectora. There's no use putting code to take it out again to run on page load, as Lectora's code seems to run later. You have to run your code as soon, as the user triggers an action, just at the beginning of it to clean up.

//fixing Lectora interfering with our code …
$("#exercise > .items > a").remove();

A simple fix for a complex problem … Lectora does require a lot of workarounds.

Posted in English, tech | Tags: , , , , , , ,  | No Comments »

Adding content to the head of Lectora HTML output

Sunday, May 23rd, 2010

There's the possibility to add an "external HTML object". If you choose "header scripting", your content would be added to the <script> section of Lectora in the header. In most cases that's not what you want to achieve. There's another strange option "Top of file scripting" which simply inserts your content just before the <!DOCTYPE> tag. The only use I can see for this is for PHP scripting which needs to be done before any output was sent to the browser (i.e. header modification).

What you want to choose to include arbitrary content to the <HEAD> section of Lectora generated HTML documents is the "META Tag" option. Unfortunately, this does not allow to include external .txt files, so you have to paste your code in Lectora's input window. (You would have needed to update the .txt file anyways, as Lectora stays with the initial .txt file version instead of updating it from the hard disk every time. That way it's not really a big loss that you can't use .txt files.)

And there IS a way to include a file's contents in the header. Just drop a PHP file somewhere on your server and include it using the following as a "meta tag":

<?php include('your/path/to/header.php');?>

Posted in English, tech | Tags: , ,  | No Comments »