Posts Tagged ‘CSS’

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 »

Lectoras external HTML object and z-index

Sunday, February 20th, 2011

Given the limited flexibility of Lectora, in some cases you need to include custom scripted HTML objects.

For instance you want to build an overlay for a login dialog, which would communicate directly with the server using AJAX.

After positioning your external HTML object on the page and building the HTML you want to include (by i.e. a PHP "include" call), sometimes you will find Lectora is putting other things on top of your HTML object's contents.

The first possibility to fix this would be modifying Lectora's "Layering" option of your object: "Bring to Front".

The second possibility comes in handy, if you do not want to modify the Lectora project itself: on-the fly z-index – updating.

I use the JS library JQuery to efficiently work on the DOM across browsers. Using it, you can set the z-index during runtime (i.e. reacting to a mouseclick on an icon):

$('#object-name').css('z-index','1000');

You can find out the name of the DIV Lectora creates for your external HTML object using Firebug, or looking up the object name property in Lectora (double click your object to see the settings dialogue).

Creating DIVs inside your Lectora object and setting their z-indices to higher values, i.e. by CSS, does not work. You need to alter the z-index of the wrapper DIV provided by Lectora. It is created during run-time using this code:

object-name = new ObjInline('object-name',null,0,580,900,40,1,15,null,'div')
object-name.build()

The Lectora code sets the z-index! Thus, your z-index from the CSS would be ignored, and you need to update it during runtime, as I have described above.

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

Internet Explorer (aka IE) and CSS

Wednesday, May 26th, 2010

An order problem?

Internet Explorer seems to be picky about the order chained CSS class selectors appear in:

.q_null {background-color:#f5f5f5;}
.q_true {background-color:#81F7BE;}
.q_false {background-color:#F78181;}

.q_null.icon {background: url(icons/pencil.png) no-repeat center;}
.icon.q_false {background: url(icons/error.png) no-repeat center;}
.icon.q_true {background: url(icons/accept.png) no-repeat center;}

ie-layouter

As you can see, it layouts .q_null.icon as intended (one icon, table row has a background color), whereas the other order .icon.q_false is rendered incorrectly.

No – there's something else in the works

ie-layouter-2

This is the result of the "corrected" code:

.q_null {background-color:#f5f5f5;}
.q_true {background-color:#81F7BE;}
.q_false {background-color:#F78181;}

.q_null.icon {background: url(icons/pencil.png) no-repeat center;}
.q_false.icon {background: url(icons/error.png) no-repeat center;}
.q_true.icon {background: url(icons/accept.png) no-repeat center;}

Does it ignore chained classes in CSS completely?

A little research shows: only Internet Explorer 6 ignores chained classes in CSS. Unfortunately it is still used by about 10 % of the online population. Thus, there's no other choice but to rewrite the code to execute with "unchained" single classes in CSS.

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