Caption past images in Firefox
-
When I use meta slider on the following pages:
http://clari.buffalo.edu/
http://clari.buffalo.edu/index.php/about-clari/history/It looks great in Explorer and Chrome but the caption extends past the images in Firfox as seen here.
How can I fix this issue?
-
Hi Trinker,
Thanks for this report! I’ll try and work out a fix for it in the next version – it won’t be simple as it appears to be more of an issue with the way firefox handles the inline-block css rule.
In the mean time, you can add this css to your themes style.css file which should fix it:
#metaslider_container_623 .cs-title { width: 228px; } #metaslider_container_327 .cs-title { width: 600px; }Regards
TomThanks for the reply Tom. I the temporary fix you suggested above by adding:
#metaslider_container_623 .cs-title { width: 228px; } #metaslider_container_327 .cs-title { width: 600px; }to a child theme of twentytwelve but this did not appear to have an effect.
Hi, did you add it to this file?
http://clari.buffalo.edu/wp-content/themes/clari_child/style.css?ver=3.5.1
I can’t see it in there. If you could add it back in I’ll take another look 🙂
Regards,
Tom.Yes. Hmm let’s give it time as I’m doing it remotely through FTP. I’ll keep you posted.
It appears the css file has updated but the problem is not fixed. Let’s give it a bit more time.
Ah, I see it now 🙂
Almost there, I didn’t take into account the padding:
#metaslider_container_623 .cs-title { width: 208px; } #metaslider_container_327 .cs-title { width: 580px; }Regards
TomPerfect. That worked. Thank you so much.
No problem. Sorry it took me a while to reply and thanks for the report – I’ll get a fix into the next version.
Please consider leaving a review if you get a few minutes.
Regards
Tom.Tom, that resolved it for firefox but now it’s short on Chrome, explorer. I’m not a programmer but is there an if/else sort of way to detect the browser to do this?
Hi, you could detect the browser, but I think it’s almost there.
Attempt 3!
#metaslider_container_623 .cs-title { width: 208px; box-sizing: content-box; } #metaslider_container_327 .cs-title { width: 580px; box-sizing: content-box; }Regards,
Tom.I did this and checked on IE, Firefox and Chrome and all appear as expected. Thank you for you help in this matter. Much appreciated!
You’re going to hate me. That fixed the caption but some of the pictures have now been re-sized. You weren’t kidding that this problem is a bit complex.
My apologies.
Hi Trinker, not at all!
Can you post some screenshots please? I’ve checked in FF and Chrome and it looks correct to me (the css should only affect the titles also)
Regards,
Tom.Yes thank you. Here are two screen shots from Chrome:
https://dl.dropboxusercontent.com/u/61803503/Errors/zoomed1.PNG
https://dl.dropboxusercontent.com/u/61803503/Errors/zoom2.PNGThis problem occurs on chrome, firefox and explorer.
Hi, I think its unrelated.
Have you unchecked/checked the ‘smart crop’ setting? Are there any red error messages when you view the slideshow in WordPress?
Regards,
Tom.
The topic ‘Caption past images in Firefox’ is closed to new replies.