Rounded corners break sidebars (IE)
| Project: | Zen |
| Version: | 5.x-1.0 |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active (needs more info) |
Jump to:
(Drupal 5.7, PHP 5.2.4, MySQL 5.0.45)
Figuring there is a remote possibility that this relates to Zen, I thought I might as well log something here. Having logged this previously over in the curvyCorners module as well as on the curvyCorners website, it looks like it could be a while before I get feedback there.
I have a Zen 5.7 theme (based on STARTERKIT) and am trying to use curvyCorners on my left and right sidebars. In my case, my sidebar-left contains a group of blockbars and within each blockbar there is a DHTML menu.
When I click to open a blockbar item on the left sidebar, the right sidebar jumps over to overlap with the left sidebar.
I have no idea if this is the fault of curvyCorners or not, but it seems logical. I have no workaround, except to remove curvyCorners entirely.
My code:
window.onload = function()
{
settings = {
tl: { radius: 11 },
tr: { radius: 11 },
bl: { radius: 11 },
br: { radius: 11 },
antiAlias: false,
autoPad: false
}
settings2 = {
tl: { radius: 11 },
tr: { radius: 11 },
bl: { radius: 11 },
br: { radius: 11 },
antiAlias: false,
autoPad: false
}
var divObj = document.getElementById("sidebar-left");
var divObj2 = document.getElementById("sidebar-right")
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
var cornersObj2 = new curvyCorners(settings2, divObj2);
cornersObj2.applyCornersToAll();
}
#1
Renamed "Sidebars issue when using blockbar, curvycorners and dhtml" --> "Sidebars issue"
This issue is exactly the same when using pure CSS. [Edit] I neglected to mention that this only a problem in IE7 (not sure about 5 or 6). All is well in the latest versions of other browsers.
My code:
CSS
/** sidebar-left **/
.sidebar-left-box
{
background: #ACCFB9;
}
.sidebar-left-top div
{
background: url(images/sidebar-left-top-left.png) no-repeat top left;
}
.sidebar-left-top
{
background: url(images/sidebar-left-top-right.png) no-repeat top right;
}
.sidebar-left-bottom div
{
background: url(images/sidebar-left-bottom-left.png) no-repeat bottom left;
}
.sidebar-left-bottom
{
background: url(images/sidebar-left-bottom-right.png) no-repeat bottom right;
}
#sidebar-left
{
background-color: #ACCFB9;
color: #000000;
border: 1px solid #E3E3E3;
}
#sidebar-left-inner
{
background-color: #FAF5DB;
border: 1px #231F20;
}
Page.tpl.php
<!-- sidebar-left -->
<?php if ($sidebar_left): ?>
<div class="sidebar-left-box">
<div class="sidebar-left-top"><div></div></div>
<div id="sidebar-left"><div id="sidebar-left-inner">
<?php print $sidebar_left; ?>
<div class="sidebar-left-bottom"><div></div></div>
</div></div></div> <!-- /#sidebar-left-inner, /#sidebar-left -->
<?php endif; ?>
<!-- end of sidebar-left -->
#2
#3
No wonder I was having deja vu when looking at this issue. I posted my response for this issue to the wrong node. Doh!
Here it is again…
Your method of applying rounded corners is the wrong one to use for Zen then. I've implemented rounded corners in a Zen theme without any issues using the faux columns method: http://www.alistapart.com/articles/fauxcolumns/
With the js solution, why not apply the rounded corners to the blocks rather than to the sidebar itself? Or do you want rounded corners on the sidebars as well? If you want rounded corners on the sidebar, and don't mind having the sidebars be different heights than the content div (a problem the faux columns method fixes), then you should try applying the js to sidebar-left-inner and sidebar-right-inner.
#4
Updating the javascript for the rounded corners module did the trick for me:
http://drupal.org/node/211998