CODEWITHSUNDEEP
htmlcssopera
Joe Half Face
Joe Half Face

Reputation: 2333

CSS triangle, Opera wrong display:

CSS for elements, fiddle 

#scroll_jump 
{
        margin-top: 310px;
        position: fixed;
        margin-left: 20px;
        display: none;
}

#jump_link 
{
        display: block;
        width: 70px;
        height: 20px;
        background: #BBDAF7;
        color:white;
        font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        padding-left: -1px;
}

#jump_link:after 
{
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border: 35px solid;
        border-bottom-color:#BBDAF7;
        border-top-color:white;
        border-left-color:#ffffff ;
        border-right-color: #ffffff;

        top: 0;
        margin-top: -70px;
        left: 49%;
        margin-left: -35px; /* adjust for border width */
}

Correct display: Chrome, Firefox, IE.

How it looks in Opera:

enter image description here

P.S. So far Opera created much more troubles, than IE!!!

Upvotes: 1

Views: 187

Answers (2)

David Gilbertson
David Gilbertson

Reputation: 4863

It's about your :after pseudo-element. For 'left' you're using a percentage. Most browsers take this to mean a percentage of the main element, Opera will take this a percentage of the parent. Use pixels if you can for the left position (e.g. 35px).

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

Instead of this:

#jump_link:after{
    left: 49%;
    margin-left: -35px;
}

all you need is this:

#jump_link:after{
    left: 0;
}

and then it works just fine in grand ol' Opry (as well as the other browsers). :-)

Upvotes: 1

Related Questions