cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Sylvain Wallez <>
Subject woody <wd:help> as popup windows, and when CSS "position: absolute" is not absolute...
Date Tue, 18 Nov 2003 23:04:37 GMT
Done. <wd:help> are now shown as popup windows.

I faced a very strange behaviour for help popups within tabs and wanted 
to let you know about what I learned from it. When we write "position: 
absolute" in a CSS, the absolute position is actually... relative!!!

The explanation is in ยง4 of : "If 
the element has 'position: absolute', the containing block is 
established by the nearest ancestor with a 'position' of 'absolute', 
'relative' or 'fixed'".

In the case of tabs (as in the "Various" sample), each tab is a <div> 
with a "position: relative", meaning that "absolute" positioning of the 
help popup occurs _relative_ to the tab, hence translating the popup 
window away from the help icon.

The solution is to move the help <div> as a child of <body>, so that its 
posititioning is relative to the document. But this cannot be done "on 
the fly" with inline scripts in IE (although it's ok in Mozilla), and 
required writing a mechanism for registering "initialization handlers" 
that are called in the body's "onload".

I know that I could have used a <xsl:for-each select="//wd:help"> to 
directly generate in the right place, but wanted to avoid as much as 
possible these hierarchical searches that kill XSLT performance.

Well, it globally works now. The only remaining problem is that help 
popups have within tabs have a small offset in IE. So far, it looks like 
this offset is the tab's <div> margin.

Enjoy, I'm going to bed after a huge fight with browsers and CSS and 
some lessons learned ;-)


Sylvain Wallez                                  Anyware Technologies 
{ XML, Java, Cocoon, OpenSource }*{ Training, Consulting, Projects }
Orixo, the opensource XML business alliance  -

View raw message