Chrome vs Firefox issue

Bortas
Bortas
edited April 2015 in Campaign Portal Building
So this bit of code loads fine on chrome, but in firefox, the image never shows. I've gone to the image URL directly, and firefox can display it, it just won't show in my OP page. Any thoughts?

CSS:
@.banner {
width:90%;
position:relative;
margin:0 auto;
box-shadow:0 10px 10px 4px rgba(0,0,0,0.3);
content: url("http://bortas.net/storage/OP_Morwindl/animated_banner.svg");
} /* Class for calling the campaign title banner, but with a drop shadow*/@

HTML:
@@

TIA,
-bort
"Morwindl":https://morwindl.obsidianportal.com/

Comments

  • Abersade
    Abersade
    Posts: 417
    I'm testing this now. I get the drop shadow but no image, using Firefox version 37.0.2. So far I haven't had any luck but I'll keep trying things.

    -Abersade
    DM of "Rise of the Durnskald - Wrath of the Fallen Goddess":https://rise-of-the-durnskald.obsidianportal.com/

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited April 2015
    Doing a little bit of reading, _content_ was originally supposed to be used only with :before and :after selectors, and support for using it in a normal class like that is a CSS3 feature that's not yet supported in Firefox. It's not ideal in terms of maintainability, but your best alternative is probably to use an _img_ tag with 90% width and your other settings.
    Post edited by ChainsawXIV on
  • Abersade
    Abersade
    Posts: 417 edited April 2015
    Ok, I can't get it to work in Firefox no matter which workaround I try. The best I've come up with is to nest another div inside the first one and to use a standard png/jpg of the same image so that if the svg fails to load for some reason the banner is still there, it just isn't moving. I confirmed that this works in Firefox.

    CSS:

    bc. /* Banner Test Bort */
    .bannertestbort {
    width:90%;
    position:relative;
    margin:0 auto;
    box-shadow:0 10px 10px 4px rgba(0,0,0,0.3);
    content: url("http://bortas.net/storage/OP_Morwindl/animated_banner.svg");}
    .bannerboxmin{
    content: " ";
    display: block;
    height: 160px;
    background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/62189/assets/450843/bannerbort.jpg?1429637117);
    width: 100%;
    background-size: 100% 100%;}

    HTML:

    bc.


    I realize that this isn't terribly helpful, sorry I couldn't do more but I think ChainsawXIV is right.

    EDIT: I couldn't get the bc. method described by Chainsaw to work so I've done it using the "@" symbol.
    EDIT #2: Using "http://txstyle.org/doc/4/block-code":http://txstyle.org/doc/4/block-code I figured out what the issue was. To use the "bc. " code you cannot place it on the first line of code, it has to be on the "title" line (in this case the lines that say CSS: and HTML:). Neat!
    EDIT #3: It looks like Bortas used it on the first line of code, as "CSS" isn't in the block. When I tried that it didn't work at all.
    EDIT #4: Eureka! So, to use it correctly you CAN place it on the first line of your code block, but there must be a line break in between your code block and whatever line is above it.
    This means that this doesn't work:

    bc. CSS:
    bc. /* Banner Test Bort */

    which looks like this:
    CSS:
    bc. /* Banner Test Bort */

    Hopefully that is helpful for anyone who should happen upon this thread.


    -Abersade
    DM of "Rise of the Durnskald - Wrath of the Fallen Goddess":https://rise-of-the-durnskald.obsidianportal.com/
    Post edited by Abersade on

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417
    On a side note, what am I doing wrong with the code tags?

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    The forums don't respect HTML. To get a code block you need to use _bc._ (with a space after) at the start of the first line of your block. The block will end at the first blank line.
  • Abersade
    Abersade
    Posts: 417
    Thanks ChainsawXIV, I've been stressing over that for awhile now.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Bortas
    Bortas
    Posts: 645
    I just wanted to offer up a belated thanks; been out of the loop for a while, and I still need to dive into this one!

    -bort
    "Morwindl":https://morwindl.obsidianportal.com
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions