Floatbox using wrong css

Page: 1

Author Post
Member
Registered: Apr 2013
Posts: 6
Here is the logic.

Page1.php, Float1.php uses styles.css.
Float2.php uses main.css.

Page1 opens Float1.php in a floatbox.

Float1.php has a link to Float2.php - it replaces the content of the floatbox with Float2.php.

Float2.php has a link to Float1.php - it replaces the content of the floatbox with Float1.php.

At this stage, everything is perfect.

Problem with css: When the floatbox from Page1.php holds Float2.php AND any content from Float2.php is opened into any floatbox, tooltip, etc. it uses the css from Page1.php.

I have a minimal code test setup using the above scenario. I will pm you the link.
Administrator
Registered: Aug 2008
Posts: 3382
Hello Richard!

To summarize your setup:

- You're showing an iframe within a floatbox.

- Within this iframed content page you have a hidden div that is being used as the source of an fbTooltip element.

- You expect that the active css on that iframe page will apply to that tooltip content because it originates from that page.

- You're surprised to find that it's the active css from the base or parent page that gets applied to the tooltip content when it's being shown inside an fbTooltip.


This is normal behaviour. The key to understanding it is to realize that all floatboxes (including the fbTooltips) are attached to and are part of the base page document. This is how a floatbox can occupy the full screen space and not be constrained to the innards of any iframe that it might be initiated from. As part of the base page, the floatbox, and any non-iframe content within it, is subject to the css that's active on the base page.


In detail, what happens to your hidden div content from the iframe page is:

- A bunch of divs get created and attached to the base document that comprise what we affectionately refer to as 'the floatbox'.

- The referenced #hiddenDiv is located on the iframe page, cut from that page, and a placeholder div is inserted in its place so we know where to restore the div to when the floatbox is finished with it.

- The cut hidden div is imported into the base document, inserted into the 'fbContent' div within the floatbox, and has its hidden styling removed.

- While the imported and unhidden div is located inside the fbContent div, it is a component of the main document and will be subject to main document's css.

- When the floatbox closes, the content will be cut from fbContent on the main page, imported back into the iframe page, and deposited gently into the placeholder div we left there where it can hide and rest and relax until called up again to show its stuff.


So, rather than saying that Floatbox is using the right css or the wrong css, we should just say that a floatbox is subject to the css of the document it is part of, and that a floatbox is part of the base document even if it was launched from within an iframe.

Page: 1