Sometimes the top part of the page is obscured (see screenshots).

First screenshot is of Acquia Prosper. Browser is Firefox 3.6 on Mac. Page is a comment-reply page - /comment/reply/3372#comment-form

Second screenshot is Fusion Starter showing same issue - title is completely obscured.

Third attachment is source code from second screenshot, showing title is present, so probably CSS issue?

Third screenshot is comparison of same site/same url as (2), using garland

issue.

Comments

lyricnz’s picture

StatusFileSize
new16.72 KB

Heheh, d.o didn't like the filename of third attachment - here it is again.

jeremycaldwell’s picture

Assigned: Unassigned » sociotech

Thanks lyricnz, this issue has come up before and is quite rare in our testings. We'll look into this a bit more and see what might be causing things. Thank you for the screenshots too, very helpful.

trevorleenc’s picture

I have also run into this intermittently, I'll keep a closer eye on it and report back the conditions under which it happens.

isopharius’s picture

same issue on my website http://tactiqc.com/ using chrome browser

any link to a specific comment will truncate the top of the node, use the rightside block for example

Opera, Firefox, Kmeleon work right

tsi’s picture

Title: Some page elements (eg: node titles) obscured on some pages » Titles obscured on some pages (eg: comment reply)
StatusFileSize
new60.13 KB

I noticed the same issue when navigating to a comment url on my site, as in http://www.rtl-themes.co.il/content/ערכת-הבסיס-המושלמת#comment-32 at first I guessed it was an RTL issue (stranger things has happned), but then I noticed it was happening on your site too, see attached screenshot.
Happened with Chromium/Linux and Google chrome/Win XP.

jeremycaldwell’s picture

For those having issues with the titles not displaying properly can you please try adding this bit of CSS to your "local.css" file in your theme's /css directory?

h1.title {
  display: block;
  position: relative;
}

I'm not sure if that will fix it but it is worth a try. Thanks!

tsi’s picture

I think the issue tiltle here is a bit confusing, this is not really about the titles, this is what visibly happen but actually it's the #main div that is being chopped, so the last post about h1 will not help here.
IMO it is caused by the clearfix given to #main-inner, deleting it in chrome fixes the issue (might be causing others though, I didn't noticed any)

jeremycaldwell’s picture

That sounds like it could be the issue for sure. I wish I could replicate this but I haven't been able to get my content cut off on any of my local development so would you mind removing the clearfix from that div and giving it a try on your site? That'd be great if we can get this issue nailed down as a few people have reported it and can see it consistently but I'm just not able to replicate it for some reason..

lyricnz’s picture

Title: Titles obscured on some pages (eg: comment reply) » Some page elements (eg: node titles) obscured on some pages

TSI: agree that the ultimate cause may be #main being chopped, but this issue was raised against a user-observable symptom, rather than the root cause. How's this?

tsi’s picture

Title: Titles obscured on some pages (eg: comment reply) » Some page elements (eg: node titles) obscured on some pages

@lyricnz - that's better, I would put "main div is chopped on #comment paths" but it doesn't really matter.
@eternalistic - how come you can't replicate the issue ? just fire up chrome/chromium and press here.

Some testing results - the problematic clearfix is not on #main (there is none) but on #main-inner, removing it had some effect (a few more visible pixels) but not enough, I had to also remove clearfix from #main-group-inner, #main-group-inner, #main-content-inner, #content-group-inner and #content-region-inner.
At this point I can see the hole title but #content-group-inner is still chopped in a way that the rounded corners (.corner-top) are still hidden.

What are the implications/side-effects of removing clearfix from all those divs ?

BTW, Tendu has a similar issue

sociotech’s picture

lyricnz, TSI,

I've been looking into this issue extensively and think I've finally found a potential fix. The issue seems to be extra spacing that can be introduced with the css in the standard clearfix solution combined with webkit browsers that have a possible bug in handling that spacing with an anchor link (e.g., a comment link).

In the latest 6.x-1.x-dev version (dated 2010-Apr-24 or later) I've modified the clearfix method to further reduce possible extra spacing by setting the line-height:0 and overflow:auto for the clearfix:after element.

(Another solution would be to remove overflow:hidden for rows and blocks, but that's a pretty major change that could have unforseen effects for existing subthemes that use Fusion, so I'd rather not force that on folks. That said, I'm going to see if we can go that route in our D7 version of Fusion.)

So, could you try the 6.x-1.x-dev version and let me know if it resolves the issue of node titles being cut off?

Thanks for your assistance.

isopharius’s picture

issue seems to be fixed with latest -dev

thank you

stephthegeek’s picture

Status: Active » Fixed

Great, thanks for the report! Marking this fixed and will go in the next full release.

gmclelland’s picture

fix worked for me too

a5342346’s picture

fyi, using latest 6.x-1.x-dev, i'm seeing this in GoogleChrome vs, e.g., Firefox

http://img412.imageshack.us/img412/27/chromequirk.png

suggested in #irc that it's the same issue ... if so, then unresolved.

sjtout’s picture

subscribing

tsi’s picture

Status: Fixed » Needs work

according to #17 this is not fixed

sociotech’s picture

BenDJ,

I'm not able to reproduce the cut-off effect in your image. Can you provide more information about which pages this occurs on, what kind of region layout you have, what subtheme you're using, what modifications (if any) you've made to the css, etc.

Thanks

a5342346’s picture

Version: 6.x-1.0-rc1 » 6.x-1.x-dev

> Can you provide more information about which pages this occurs on

seemingly, any page with a heading. here's a 'simple' "about" page -> http://tinyurl.com/33mu7gr

note the difference in both the menubar items' positioning, as well as the top-cropping of the "About" header text

> what kind of region layout you have

I'm not clear what you're asking here. In the example above, the two affected regions are a menubar and a one-column body ...

> what subtheme you're using

It's a customized fusion_starter subtheme,

drush pm-list | grep -i fusion
Other Fusion Core (fusion_core) Theme Enabled 6.x-1.x-dev
Other Fusion Starter (fusion_starter) Theme Disabled 6.x-1.x-dev
Other Fusion Starter Lite (fusion_starter_lite) Theme Disabled 6.x-1.x-dev
Other BenDJ Fusion (bendj_fusion) Theme Enabled 6.x-1.x-dev

> what modifications (if any) you've made to the css, etc.

plenty, of course. short of zipping up my site -- what is it specifically you're looking for?

lyricnz’s picture

BenDJ: can you reproduce this problem with the unmodified starter theme?

a5342346’s picture

lyricnz: switched, per suggestion, to unmodified starter theme. of course, virtually everything's missing from the displayed page ... BUT, the "About" header, which *does* show up, is NOT cropped in the GoogleChrome instance.

which suggests something in my subtheme styling or region usage has 'hit' a GoogleChrome quirk.

I've checked as many browsers as I can get my hands on, and -- so far -- it's only GoogleChrome that displays the cropping, as described above.

Oh, and of course, IE6 is its usual nightmare ... but I'm not going to worry abt _it_.

Still trying to narrow down what the problem might be ... I've been "single stepping" through various options in Chrome's Firebug-esque developer tools. So far, haven't stumbled on the cause.

a5342346’s picture

Status: Needs work » Active
sociotech’s picture

Assigned: sociotech » Unassigned
Category: bug » support
a5342346’s picture

Status: Active » Closed (won't fix)

bug report » support request

??

stephthegeek’s picture

Status: Closed (won't fix) » Active

Ben, it doesn't need to be marked "won't fix", but since you said the issue was in your custom subtheme then it's no longer a bug report for Fusion itself, but a support request for your particular case. I believe the original issue is actually fixed here.

If that's not the case, can you elaborate?

sociotech’s picture

Status: Active » Fixed

Bug fixed in 6.x-1.0 release.

If there is still a related support request, a new issue should be opened.

a5342346’s picture

lyricnz, just fyi as it's "your" bug ...

worksforsome, i suppose. just not here.

http://img208.imageshack.us/img208/5448/chromex.png

grep Id sites/all/themes/fusion/fusion_core/fusion_core.info
; $Id: fusion_core.info,v 1.1.2.9 2010/07/04 01:48:17 sociotech Exp $

rpm -qa | grep -i chrome
google-chrome-unstable-6.0.458.1-51742.x86_64

fwiw, no problems with any other browser. no problems with any non-fusion (sub)theme.

stephthegeek’s picture

BenDJ, the screenshot you've linked shows that you've got some custom typography in your subtheme, which may mean you need to adjust line heights further. This fix in Fusion is really only a workaround for what is actually a Chrome bug, and will only work so far, depending on the line height of your titles.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

dddbbb’s picture

Version: 6.x-1.x-dev » 6.x-1.0
Component: User interface » Code
Category: support » bug

Sorry to dig this one back up but...

I can replicate this title chopping bug in Firefox & Chrome with Panels. If you add comments to a panel page, clicking on a comment title will chop the top off of the page title (h1 title).

Trying the same thing without Panels doesn't produce the same results (works as expected). I'm using a Fusion sub theme with no custom CSS.

I know that bringing Panels into this is getting a little complex - wasn't sure whether to post here or over at Panels issues (I'm guessing it's something to do with all the extra markup that Panels brings to the party).

I didn't change the issue status - I'm fairly new to this and got told off last time :)

dddbbb’s picture

Adding the following CSS to local.css seems to fix it but does have abvious consequences:

h1.title {
  padding-top: 20px;
}
jeremycaldwell’s picture

@dixhuit, have you tried adding this bit of CSS to your theme's local.css file?

.row,
.nested,
.block {
  overflow: visible;
}

If not, give that a try and is should fix things for you. You can then remove the "h1.title" padding-top you are using now.

dddbbb’s picture

That did it (#35). Thanks very much!

jeremycaldwell’s picture

Very cool, sometimes you need to use this fix/hack to get things working correctly in your theme. Not all themes are affected by this so apply only as needed. Glad I could help.

jenyum’s picture

Just encountered the same thing, and

display: block;
clear:both;

on the .title element did the trick.

lolandese’s picture

Some blocks weren't visible but only on Mozilla Firefox (both 3.6 and 4.0).
#35 messed some things up. #38 wasn't effective. Combining #35 and #38 solved my issue on Mix & Match and Acquia Slate.
Trial and error brought me to the following:

.block {
  clear: both;
  overflow: visible;
}

More info on CSS clear and overflow property.

Thanks to both #35 and #38 authors.