I'm using Adobe Dreamweaver CS5 to revamp a site.
I am using Dreamweaver's built-in Spry Collapsible Panel widget to shorten the length of a bio page by having additional paragraphs about board members extend out when 'more' is clicked, and close when it is clicked again.
Here's the resulting html when you insert an instance of a Collapsible Panel into your code in DW; the div with the class of CollapsiblePanelTab is the clickable 'more' area, and the div of class CollapsiblePanelContent is the panel area that expands:
Our graphic designer is insisting on the 'more' tab to slide down to rest at the bottom of the panel once fully expanded.
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab (more)</div>
However, the default behaviour is for more to remain stationary at top with the panel expanding beneath it.
To achieve this I absolutely positioned the CollapsiblePanelTab div, giving it a left:0; bottom:0 position (this also meant I had to make the containing div of CollapsiblePanel relatively positioned).
This works great in every browser expect the current IE release, IE8. In IE8, after closing the panel, the more tab (CollapsiblePanelTab div) momentarily moves approx 16px up and flicks back down again.
You can view the bug at work here:http://www.wakerleybrothers.co.nz/problem/ (view it in IE8).
The CSS file is here: http://www.wakerleybrothers.co.nz/pr...siblePanel.css (with just the few positioning changes to DW's default as described above)
Any thoughts/suggestions much appreciated - Thanks!