0

This is my first time heavily modifying a Bootstrap3 framework with JS (something I'm only passingly familiar with), so I'm pretty confused as to why certain elements (like carousels) on my soon-to-launch website are displaying differently or not at all.

Specifically, I have problems with background images and pop-up sliders functioning fine in Chrome but not rendering on the Target Species section of my pages in Firefox, of all things.

And then the Video thumbnails on the Media page, which also display perfectly well on Chrome, work on neither Firefox nor IE!

I work for a non-profit organization, and we don't have access to any other tech gurus, so any help or advice people can give would be really, really appreciated! Thanks for your time, everyone!

Improve this question
6
  • If you check the Web Console you'll get a specific error message: TypeError: $(...).raccordion is not a function. I'd give $(document).ready a try instead of using $(window).load Commented Aug 13, 2015 at 18:13
  • Thanks ahoffner-- I tried that, but it didn't seem to make a difference. The background images and pop-up sliders are actually CSS driven, not JS, which makes this even more perplexing. Commented Aug 14, 2015 at 15:41
  • So, I found the problem with the Videos section thumbnails on the Media page was the file-type I was linking to. Chrome recognized it as an image file, but Firefox and IE didn't. Replacing those thumbnails with PNG versions of the same picture resolved this part of the issue! Commented Aug 14, 2015 at 15:42
  • Ah-hah! Another discovery, it looks like adding '-moz-transition' has fixed the slide-up. Now, the question comes to... why won't the 'img' with the background-image style display? :P Commented Aug 14, 2015 at 16:12
  • Actually, now that I've figured out what the other problems are, I'll open a new question with just this one issue... Thanks everyone for looking! Commented Aug 14, 2015 at 16:22

1 Answer 1

Reset to default
1

The TL:DR of the trial-and-error in the comments above:

Adding -moz-transition to the CSS activated the CSS hover feature on the Target Species page. Adding display:block to the img CSS forced the empty img to render.

IE and Firefox didn't recognize the type of image file I was trying to link to. Uploading and linking to .PNG versions of the same file resolved the issue.

Ta-daaa!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.