HTML/CSS Formatting Issue

I need to create the following 2 buttons:

http://i.stack.imgur.com/3QrlQ.png
http://i.stack.imgur.com/Yllsw.png


**In Page Help:**

This should be floated to the right of the nav menu. I cannot see it in my current code - http://jzm.co.nz/clients/dev but if I upload the current code to jsfiddle it works fine.

How would I create an arrow that size?

How would I position the icon? - http://jzm.co.nz/clients/dev/_assets/images/infoButton.png


**HTML:**

<div class="options">
<nav class="mainOptions">
<ul>
<li><a class="composer" href="#"><img src="http://jzm.co.nz/clients/dev/_assets/images/composer.png" /> Composer</a></li>
<li><a href="#">Address Books</a></li>
<li><a class="active" href="#" target="_self" title="View Messages Scheduled for Future Delivery">Scheduled Messages</a></li>
<li><a href="#" target="_self" title="Message Templates for you or your organisation">Templates</a></li>
</ul>
</nav>​

<div class="pageHelp"><p>In Page Help</p></div>
</div>

**CSS:**

.pageHelp{
float:right;
margin:10px 20px 0 0;
width:85px;
height:25px;
border-radius:3px;
background-color:#354E69;
position: relative;
}
.pageHelp:after, .pageHelp:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.pageHelp:after {
border-left-color: #354E69;
border-width: 5px;
top: 50%;
margin-top: -5px;
}
.pageHelp:before {
border-left-color: ##354E69;
border-width: 16px;
top: 50%;
margin-top: -16px;
}
.pageHelp p{
color:#000;
padding:5px;
text-align:center;
}

**Alert:**

This Icon should be situated to the left of the text. How could I get the placement of the icon correct as I [cannot seem to ode - http://jzm.co.nz/clients/dev

**HTML:**

<div class="scheduledTop">
<h3>Scheduled Messages</h3>
<p class="alert">Alert Message Area</p>
</div>

**CSS:**

.scheduledTop .alert{
width:200px;
height:50px;
float:right;
margin: -30px 20px 0 0;
color:red;
text-align:right;
font-weight:bold;
background:url('../images/alert.png') no-repeat 0 8px;
border:1px solid red;
}

To me it looks like you are trying to use :before and :after, in order to position .pageHelp.

Their purpose is mainly to add some text, styled or not, before or after the element.

And your styling of it makes no sense at all.

height: 0;
width: 0;
makes it virtually non-existing.
position:absolute;takes it out of the flow.
left:100%;position it to the far right.

Effect: You are placing a non-existing and non-affecting " "s , to the far right.