Question

So I am trying to get this to working somthing like a List Bullet, but at the END of the Navigation Button.

I am having PROBLEMS WITH the Black Triangle positioning itself too far up. It raises higher than the text I have (w/ black BG).

Below is an example of my issue.

http://dabblet.com/gist/3483670

I have tried alot of different things, but I am completely stumped.
Probably something silly I am overlooking, but it might need a serious of work arounds I am not aware of.

Thanks for all the help.

Incase the Link does not work for you. See Below.

CSS

 a {font: 19px/26px 'Exo',Arial,sans-serif;
    list-style: none outside none;
    margin: 0 0 0 -10px;
    padding: 0 0 58px;
    font-weight:100;
    text-transform: uppercase;
    width: 100%;
    text-decoration:none;}

    a[rel="catagory"] { background:#000000; padding:0 5px 0 5px; color:#BAFF32;}

.triangle { width: 0;
    height: 0; 
    background:no-repeat right center;
    border-top: 0px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid black;
    display:inline-block;}

HTML

<a href="index.html" rel="catagory"><span class="plus">+</span> <span>HOME</span></a><span class="triangle"></span>

Answer 1

You can add

a[rel="catagory"] {
    vertical-align:middle;
    display:inline-block;
    width:auto;
    line-height:25px;
}
.triangle {
    vertical-align:middle
}

Explanation:

The part which aligns them is

a[rel="catagory"] {vertical-align:middle;}
.triangle {vertical-align:middle}

But anchor’s height is 22px, so we need

a[rel="catagory"] {
    display:inline-block;
    line-height:25px;
}

in order to make the height 25px.

But you have another rule (I wonder why):

a{width:100%}

Before setting display:inline-block the anchor has display:inline, so that rule does nothing.

But now it works and we want to disable it, so we need

a[rel="catagory"] {
    width:auto;
}