some biblio titles abnormalities in Safari & Chrome [#517412]

For a biblio view (as a block, node title, grouped by year of publication), the titles on a number of biblio nodes overflow the sidebar in Safari & Chrome (not noted in IE, FF, Opera)

I am unable to ascertain why, whether it is a bug in biblio, views or the theme.

It appears Biblio is the source as a similar view for a different content type has no such issues.

Anyone noted this as well?

The page in question is http://colin.salter.id.au/research.html

Any thoughts/comments would be appreciated.

thx

Comments

Comment #1

pkiff commented 13 July 2009 at 13:38

I haven't noted this elsewhere, but don't have enough experience with biblio to say one way or another.

However, I would nevertheless guess that the issue is one with the theme. And in particular, if I had to guess, I would say that the use of the "justify" text attribute inside the sidebar-right with those large margins being used to shift the text around is somehow related to the problem.

Have you tried getting rid of the justified text in order to troubleshoot it?

Phil.

Comment #2

avolve commented 14 July 2009 at 02:17

Thanks for having a look.

Changing the text-align to left prevents the massive overflow issue, though some of the posts overflow the .block-inner padding-right.

Changing the text-align to right sees some posts similarly right-align outside the .block-inner padding-right.

[only checked in Safari]

I have created an bug report with the Zen theme, though as it only appears for Biblio node types I thought worth posting here as well...

Comment #3

pkiff commented 14 July 2009 at 03:59

I'm using Zen on the site I'm working with, and I doubt that the problem is in Zen itself. I think it has to do with the way you have applied text-align: justify, which isn't something that is present in the original Zen.

I can't quite figure out how you are padding the right sidebar items with the bullet point. It looks like you are adding padding to the left of each item to compensate for the background image bullet, but then you are relying on text-overlow: hidden in order to push the second line of text over to the left edge of the sidebar beneath where the background image is. If this is close to what you are doing, then I would suspect this as your culprit. When combined with Zen's use of negative margins, the code may be getting confused.

Oh wait, I see that on the Teaching page, you're using text-indent as well. But I don't see a corresponding text-indent for the Research page. Maybe I'm missing it. Or maybe I am missing an extra pseudo-attribute padding somewhere? (see in around lines 1602 & 1609)

Also, I notice that you are using text-align: justify on the body element as well as on the specific research and teaching divs. I would recommend trying to remove that text-align and making it specific to the content area div that is producing your middle column content. By putting it on the entire body, you may also be confusing some browsers.

Hope you are able to track this one down.

Phil.