[Twine 1/Sugarcube 2] z-index working in Chrome, but not in Firefox

Question

What it says on the tin! Not a Twine-specific question, I suppose, but very irritating all the same. Hoping you guys can help me with it. Here are the relevant CSS bits, pared down for clarity:

.circle {
    z-index: 1;
    width: 2px;
    height: 2px;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    background: rgba(255, 255, 115, 0.3);
    box-shadow: 0 0 70px 120px rgba(255, 255, 115, 0.3);
    }

table {
    border: 60px black solid;
    z-index: 10;
    }

Very simple! The table's black border should cover up the edge of the yellow circle. And yet, in Firefox (even when I used !important in my desperation), it refuses to tuck the circle underneath... Here are my screenshots of the issue.

Do I need to use something else for Firefox? Is there something within the Sugarcube generic layout that's conflicting with the z-index? Send help.

 

edit: And here's the HTML for the page.

<table>

<tr><td></td><td></td><td><div id="left">[img[left][203c]]</div></td><td class="toprighttext"><<popup "R" "203minibar">> @@white-space:pre;    @@ <<popup "P" "203plant">>

<div class="circle"></div></td></tr>
<tr><td></td><td></td><td></td><td><div id="down">[img[down][203h]]</div></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>

</table>

 

Answer 1

When asking for advice on how to style passage content it helps to supply an actual example of the passage content being styled, otherwise the person trying to give advice has to guess the current HTML structure of the page, how the supplied example CSS is being used, and what existing (web-browser or story-format level) CSS may be effecting the current layout / styling.

I can't tell from your example images if the blank area to the right (in which the unwanted bleed effect is occurring) is being generate by one of the story-format's standard elements (html, body, #story, #passages, .passage) or by the contents of the current passage being shown, this makes if difficult to know if the background colour in that area is black or transparent which could effecting how other background colours are shown.

Comments

Added the HTML to original post! Sorry about that.

The blank area is the black border of the table element (or it should be).

---

As I understand it because of the table's default of border-collapse of collapse the border is made up of the borders of all the child elements as well as the table's (the other elements just don't currently have borders, or at least they shouldn't)

Based on information from this Firefox bug report as well as other searches, it seems that there maybe z-index related implementation disagreements related to backgrounds and borders for a table (and related children) elements.

I personally don't have the experience to solve your issue although I did try some of the possible solutions suggested but didn't find one that worked in your particular use-case. Maybe someone more experienced will know of a work around.