Captions randomly appearing or not

At http://www.compassuk.org I'm using the Boutique template and finding that captions sometimes appear, and sometimes don't. I'm using Joomla 2.5.6, News Show Pro GK4 v3.1.1, and the data source is K2 articles - K2 is on version 2.5.7.

Weirdly the behaviour seems different with different browsers, based on a few dozen refreshes of each:
Internet Explorer 9.0.8 - captions always seem to display
Firefox 14.0.1 - captions never seem to display (although "read more" links always do)
Chrome 20.0.1132.57 - captions sometimes display and sometimes don't!

What could be the issue, and what can I do to fix?

Try adding following css to your override.css file located in templates/gk_templatename/css/override.css and enable it in template settings > advanced settings > css override "on".

Code: Select all

.banner .nspArt .nspContainer .readon + .nspHeader  {
    right:0;
}
.banner .nspArt .nspContainer .readon + .nspHeader a {
    display: table-caption;
}


See you around...

Thanks! That got me started, but there were a couple of problems which I've now fixed - here's how.

First, the CSS override applied only to the right hand module with the "Read More"s, so I duplicated those lines and applied to .banner .nspArt .nspContainer .nspHeader - that fixed everything in Chrome and Firefox.

Internet Explorer took on a new problem (see screenshot) - it looks like something goes wrong in the width calculation when the width for .banner .nspArt .nspContainer .nspHeader is set to "auto". I've bodged a solution by defining this width in override.css, which is OK for my current captions (and has the nice side effect of harmonising the layout a bit) but will obviously need checking if I use any long words in future!

Here is the final code which now appears in my override.css, which makes things look the same in Firefox, Chrome and IE (and Safari on iPhone):

Code: Select all

.banner .nspArt .nspContainer .readon + .nspHeader  {
    right:0;
    width: 75px!important;
}
.banner .nspArt .nspContainer .readon + .nspHeader a {
    display: table-caption;
}
.banner .nspArt .nspContainer .nspHeader  {
    right:0;
    width: 75px!important;
}
.banner .nspArt .nspContainer .nspHeader a {
    display: table-caption;
}

Thanks for your help. I would love to know if there is a better solution which preserves a dynamic width calculation and works in all browsers!

Well it is difficult to support all browsers all at once with a single code so trying to support all of them will increase coding / required css / or js which will increase size and loading times.

If it works for you just use it as it is.

See you around...