Posted by avolve on July 4, 2009 at 5:02am
Jump to:
| Project: | Zen |
| Version: | 6.x-1.0 |
| Component: | layout.css |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Anyone experience sidebar content overflowing (to the right, from a right sidebar)?
I am having this with safari only. If is for a view (block) based on the biblio module/content type. It does not happen for similar pages with views based on other content types, so might be related to biblio — thought i would check here first.
The page in question is http://colin.salter.id.au/research.html.
The issue is not seen in IE of FF...
Comments
#1
An update: the issue is also present in Chrome, changing to bug report.
Some other test results in Safari
Changing text-align to left makes the overflow problem (mostly) non-existent. Some views fields extend beyond the padding-right for .block-inner.
Changing the text-align to right makes some posts similarly right-align outside the .block-inner padding-right.
It appears that this only happens to fields of a certain character length (not the longer or shorter ones, roughly those that have one word on the second line)... It only seems to happen for the biblio CCK type though.
I am still unable to ascertain why...
#2
Browser text size settings seem to make a difference.
I recently experienced the right sidebar overlap problem with our site (http://heartwoodtmn.org) in several browsers. We do use a customized theme under the Zen directory. I cannot remember if I used the fixed width layout or the liquid layout. It was too long ago.
The first occurrence was with my FireFox browser. I had the browser setting to display larger Text. Changed the setting and the problem was gone.
Shortly after that I was on a PC running the latest version of Windows IE to do a demonstration and saw the same effect. I checked the Text size and it was set to Normal. I lowered it to the next setting and the overlap disappeared.
Ash
#3
Hi,
I am not sure if this issue has been addressed in Zen 6x 2.0 but I am currently running an earlier version of Zen. I am having content overflow issues using Firefox 3.5 when using a block.
On the page where the issue is showing up, I have an CCK custom form as a block on the right side, the text input fields overflow through the block and completely outside the body. I have tried modifying the CSS such as padding etc. yet the problem still exists. I am not sure whether reducing the size of the text box will fix the issue (how do I change text box dimensions?).
Is it possible to change to width of the block/sidebars in Zen? How?
Thanks
#4
You can easily change the width of sidebars in a Zen subtheme.
The CSS that Zen uses requires a little more thought in changing width values (for no sidebars, sidebar left, sidebar right) .
I am not sure if this will fix the issue you are experiencing...
#5
avolve,
Thanks for the suggestion. I have looked into my subtheme's CSS file and located the sidebar divs though I am unsure about which values to adjust. Could you explain what I need to adjust, please?
Also, will the sidebar's width overflow the website body or will the main body adjust automatically, accordingly?
Thanks
#6
Zen can be a little tricky. There are some helpful comments in the CSS file, though you need to ensure you change all corresponding values.
For example, in layout.css (based on layout-fixed.ss in the Zen folder)
.sidebar-left #content
{
width: 760px;
margin-left: 200px; /* The width of #sidebar-left. */
margin-right: -960px; /* Negative value of #content's width + left margin. */
}
.sidebar-right #content
{
width: 760px;
margin-left: 0;
margin-right: -760px; /* Negative value of #content's width + left margin. */
}
.two-sidebars #content
{
width: 560px;
margin-left: 200px; /* The width of #sidebar-left */
margin-right: -760px; /* Negative value of #content's width + left margin. */
}
needs to match with the below values (i.e. #sidebar-left width below = .sidebar-left #content margin-left above)
#sidebar-left
{
float: left;
width: 200px;
margin-left: 0;
margin-right: -200px; /* Negative value of #sidebar-left's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-left-inner. */
}
#sidebar-right
{
float: left;
width: 200px;
margin-left: 760px; /* Width of content + sidebar-left. */
margin-right: -960px; /* Negative value of #sidebar-right's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #sidebar-right-inner. */
}
Paying particular attention to the inline comments is required. It takes some getting your head around.
#7
With the Chrome and Safari problem, it is a problem with Webkit and Views.
#8
Thanks for the tips, avolve.
I think I may have figured it out, I don't think it is a sidebar issue. Well actually, I am not entirely sure whether it is a sidebar issue or even if my subtheme has sidebars (how can I tell?). The content that is overflowing is actually in a block (right side).
Would you happen to know how to adjust block width? I do have the Block Theme module installed by the way, but no custom theme has been applied to the block in question (Drupal default).
Thanks again
#9
This is an oldie but a goodie.
Zen 7.x-3.1 out of box (no changes)
and Views 3
and Drupal 7 (fresh install)
the Views 3-column layout overflows the browser frame.