Solution for full-width-text arrow glitch in FF

[thosch71]

I like the triangle arrow of the full-width-text a lot. Adds a very nice touch. Unfortunately, Firefox (21.0) renders a thin dark bottom borderline which looks quite ugly (see first screenshot).

The following code in the custom-CSS field changed the size and position of the triangle so that it is attached to the bottom and does not sit in the box itself (see second screenshot):


.full-width-text:after {
border-top: 25px solid transparent;
border-right: 32px solid transparent;
border-left: 32px solid transparent;
margin-left: -32px;
}


The border is still there, but it looks acceptable in FF.

Greetings,

thosch

[Cosmin – SUPPORT]

Thanks @thosch, I’ll let Ed know about this when he gets back 🙂

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[thosch71]

Just an update for the CSS-Triangle-Border-Firefox-Bug:

I found out, how to eradicate this little bugger for good:

Basically the Mozilla render engine seems to have a problem with the ‘transparent’-value in the border-construct which generates the triangles. So I added


.full-width-text:after {
border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
}


in the Custom-CSS box and voilà… annoying grey border in Firefox is gone.

Best greetings,

thosch

[Cosmin – SUPPORT]

Cool, thanks for sharing 🙂

Regards,

————————————————————————————————————

Cosmin
Support Assistant