We Keep Coding

How to change tooltip background color?

I have created a tooltip in my html file like this:
<span title="" class="duedate-warning-msg"></span>
And I set the CSS property like this:
.duedate-warning-msg{
background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
border-color: #f5c7c7;
padding: .5em 0.25em 0.5em 2.5em;
title:"my tooltip";
color: #D11006;
}
span:hover{
position:relative;
}
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
The above style created tooltip perfectly. Only problem which I am facing is that I want background color of tooltip is blue. But it always shows gray. Why it is happening so?

Remove the background-image and add background, like so:
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background: #00F;
}

Easy, in background-image property replace #cccccc with a color of your choice, assuming that you want to keep the fade-to-almost-white (#eeeeee) gradient.

Remove the background image from span[title]:hover:after
Here is the working Demo

Create a DIV onclick

I have a div and a button which are laid out fine. When I click the button, how can I make the same div spawn again and again. I have tried adding an onclick function but I do not know how I would implement adding the div to it.
HTML
<div class="note" contenteditable="true">
<span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
<img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span>Keep clicking this text to select
</div>
<a href='#' class='button'>Create Note</a>
Javascript
<script type="text/javascript">
$(function() {
$(".note").resizable();
$(".note").keyup(function() {
$(this).css('height', '100%');
});
$(".note").draggable()
.click(function() {
$(this).draggable({
disabled: false
});
}).dblclick(function() {
$(this).draggable({
disabled: true
});
});
});
</script>
CSS
.note {
width: 280px;
height: 100px;
padding-top: 40px;
margin-top: 60px;
margin-left: 35px;
word-break: break-word;
font-family: Note;
font-size: 30px;
background-image: url("images/stickynote.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.note img{
position:relative;
position: absolute;
top: 0px;
right: 0px;
}
.button {
position: fixed;
top: 160px;
margin-left: 44%;
border: 1px solid #000000;
background: #f2ad24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24));
background: -webkit-linear-gradient(top, #ffff92, #f2ad24);
background: -moz-linear-gradient(top, #ffff92, #f2ad24);
background: -ms-linear-gradient(top, #ffff92, #f2ad24);
background: -o-linear-gradient(top, #ffff92, #f2ad24);
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%);
padding: 13px 26px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #000000;
font-size: 35px;
font-family: Note;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #f08d24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f08d24);
background: -moz-linear-gradient(top, #ffe194, #f08d24);
background: -ms-linear-gradient(top, #ffe194, #f08d24);
background: -o-linear-gradient(top, #ffe194, #f08d24);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%);
color: #212121;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #f09424;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f09424);
background: -moz-linear-gradient(top, #ffe194, #f09424);
background: -ms-linear-gradient(top, #ffe194, #f09424);
background: -o-linear-gradient(top, #ffe194, #f09424);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%);
color: #fff;
}

Here is a simple example of how you can use jQuery accomplish what it is you're trying to do. Obviously this is not exactly tailored to your needs, but will give the basis for you to learn how it might work. You're likely going to want to look at the jQuery Clone method and jQuery AppendTo method.
CSS
.note {
margin-bottom: 10px;
background-color: yellow;
width: 100px;
height: 100px;
}
jQuery
$(function() {
$('button').on('click', function() {
$('.note:last').clone().appendTo('.wrapper');
});
});
HTML
<div class="wrapper">
<div class="note">Content in div</div>
</div>
<button>Add note</button>
JSFiddle Example

Do you mean something like this?
$(window).ready(function(){
$('.button').click(function(e){
e.preventDefault();
var html = $('.template').html();
$('#notes').append('<div style="position:relative;">'+html+'<div>');
});
})
.note img{
position:relative;
position: absolute;
top: 0px;
right: 0px;
}
.button {
position: fixed;
top: 160px;
margin-left: 44%;
border: 1px solid #000000;
background: #f2ad24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24));
background: -webkit-linear-gradient(top, #ffff92, #f2ad24);
background: -moz-linear-gradient(top, #ffff92, #f2ad24);
background: -ms-linear-gradient(top, #ffff92, #f2ad24);
background: -o-linear-gradient(top, #ffff92, #f2ad24);
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%);
padding: 13px 26px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #000000;
font-size: 35px;
font-family: Note;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #f08d24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f08d24);
background: -moz-linear-gradient(top, #ffe194, #f08d24);
background: -ms-linear-gradient(top, #ffe194, #f08d24);
background: -o-linear-gradient(top, #ffe194, #f08d24);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%);
color: #212121;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #f09424;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f09424);
background: -moz-linear-gradient(top, #ffe194, #f09424);
background: -ms-linear-gradient(top, #ffe194, #f09424);
background: -o-linear-gradient(top, #ffe194, #f09424);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%);
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notes">
<div class="template" style="position:relative;">
<div class="note" contenteditable="true"> <span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
<img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span>Keep clicking this text to select</div>
</div>
</div>
<a href='#' class='button'>Create Note</a>

Css/javascript position

Well, this is my problem:
I need the red box behind the number , not above.
My css:
[data-counter]:after {
background-color: #FF6969;
background-image: -webkit-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -moz-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -o-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -ms-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: linear-gradient(#FF6969 0%, #ff0000 100%);
height: 8px !important;
margin-top: 4px;
content: attr(data-counter);
top: -10px;
position: absolute;
padding: 1px 4px;
box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset;
background-clip: padding-box;
font:bold 10px "Helvetica Neue", sans-serif;
color: white;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.6);
margin-left: -10px;
}​
My javascript(lol)
$(function () {
$('head').append('<style>#numberMps {display:none !important; }#sizeMps { color: red; width: 5px; margin-left: -7px; } </style>');
$('#inbox_link').prepend('<div id="numberMps"></div>');
var newMPs = ".main-content .statused .tcl.tdtopics:has(img[src='http://illiweb.com/fa/empty.gif?NEW']) a[href*='/privmsg?folder=inbox&mode=read&p']";
$('#numberMps').load('privmsg?folder=inbox ' + newMPs, function () {
$('#numberMps').after('<div id="sizeMps"></div>');
var sizeMPs = $('#numberMps a').size();
if (sizeMPs == '0') return;
$('li a[href^="/privmsg?folder=inbox?BOX"]').attr('data-counter', ''+sizeMPs+'');
});
});
Look, the javascript obatin the number of messages, and the css draw this.
Anyone have tips or a solution?

Try useing z-index, it should help.

jQuery ajax load function doesn't include custom javascript file

I have made a custom jquery popupbox for "Tell a friend" application on my website. It uses the jQuery load function to include a php file from Modules folder and display it into the popupbox. The CSS Works fine but when I bind Javscript to it, It doesn't work at all.
The code below popups the "Tell a friend Form from module folder"
/* Popup for Email to a friend*/
$("#emailtoafriend").click(function (){
$("#overlay").removeClass("overlayHide");
$("#overlay").addClass("overlayShow");
$("#overlay").fadeIn("slow");
$("#popup").load('modules/mod_tellafriend/default.php');
return false;
});
This code below, fires off when a user clicks on the Close Button. This doesn't work
$(".btnClose").click(function (){
alert("Works");
$("#overlay").fadeOut("slow");
$("#overlay").removeClass("overlayShow");
$("#overlay").addClass("overlayHide");
return false;
});
And below is the CSS am using on this popupbox
.overlay{
width: 100%;
height: 100%;
position: absolute;
}
.overlayHide{
display: none;
}
.overlayShow{
display: block;
background: url(../images/overlay.png) repeat;
z-index: 1;
}
.popups{
border: 1px solid #666;
background-color: #FFF;
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
padding: 10px;
-webkit-box-shadow: 0px 1px 14px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 1px 14px rgba(255, 255, 255, 1);
box-shadow: 0px 1px 14px rgba(255, 255, 255, 1);
}
.popupTitle{
font-weight: bold;
font-size: 16px;
border-bottom: 1px solid #CCC;
padding-bottom: 5px;
}
.popupdescription{
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
}
.btnsubmit{
width: 100px;
line-height: 20px;
font-weight: bold;
background-color: hsl(120, 69%, 17%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#23c123", endColorstr="#0d490d"); background-image: -khtml-gradient(linear, left top, left bottom, from(#23c123), to(#0d490d)); background-image: -moz-linear-gradient(top, #23c123, #0d490d); background-image: -ms-linear-gradient(top, #23c123, #0d490d); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #23c123), color-stop(100%, #0d490d)); background-image: -webkit-linear-gradient(top, #23c123, #0d490d); background-image: -o-linear-gradient(top, #23c123, #0d490d); background-image: linear-gradient(#23c123, #0d490d); border-color: #0d490d #0d490d hsl(120, 69%, 10%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.46); -webkit-font-smoothing: antialiased;
}
.btncancel{
width: 100px;
line-height: 22px;
font-weight: bold;
color: #000;
border: 1px solid #CCC;
background: #FFF;
}
What's wrong?
Why does CSS works fine and JavaScript doesn't. All my Javascripts are being loaded in the bottom of the page (Not on the head).

$.load can't load jsfile or javascript.
you can put the jsfile in parent page who call load ;
and put js in $.load function ,like:
$("#popup").load('modules/mod_tellafriend/default.php',function(){
//javascript
});

IE8: element:first-child deosn't work (selects parent of what I actually want)

Works in chrome, not ie8: http://jsfiddle.net/a7rXZ/2/
so, when you click on accepted, decline, or open, it changes the text adjacent to the little click menu (while maintaining styling of the text on the left (this is ideal)). but in IE, it seems to be replacing the parent element (cause the styling of the text doesn't remain the same)
any ideas for how to get this to behave in IE8?
this is the code in question:
$j('.change_option').click(function() {
$j('#change_status_menu').fadeToggle("fast");
$j(".status .status_header span:first-child").attr("class", $j(this).html());
$j(".status .status_header span:first-child").html($j(this).html());
$j('#proposal_status').val($j(this).attr("name"));
unsaved_changes = true;
});

I suspect IE just has a problem with mark-up in class attributes. I wouldn't blame IE though since it's totally invalid. The solution is really a case of making the mark-up cleaner and copying only the relevant sections of text/mark-up from the options to the status header.
I've cleaned up the mark-up a little and re-worked the jQuery to select only the text() and class necessary for manipulating the status-header element. Basically, I've turned the options into an unordered list, rather than using a combination of <div> and <span>. So it might not be exactly what you are after, since I am not sure if you can change the mark-up and I have also removed the the .badge class.
The problems were mainly that the JavaScript was adding HTML content into the class attribute of the .status-header span element, but also a lot of the text in the example was outside any element, so the JavaScript was actually selecting too much content each time. The other problem I could see was that you had already duplicated the mark-up for the secondary status heading, so rather than replacing this HTML each time, it was easier to just extract the one class ('Open', 'Accepted' or 'Declined') and the text of the option.
There is more that can be done to simplify the code, for example the .class and text() being copied to the header are now exactly the same so should be simplified.
Here is a demo which is working for me in Chrome and IE8
For completeness, here is all the code:
HTML
<div class="proposal_status">
<div id="change_status_menu" style="">
<div class="change_status_menu">
<ul class="container">
<li class="Open" name="1">Open</li>
<li class="Accepted" name="2">Accepted</li>
<li class="Declined" name="3">Declined</li>
</ul>
</div>
<div class="arrow_border_2"></div>
<div class="arrow_border"></div>
<div class="arrow"></div>
</div>
<input id="proposal_status" name="proposal[status]" type="hidden" value="2">
<div class="status">
<div class="status_header">
<span class="Accepted">Accepted</span>
<div class="action_button change_status">Change Status</div>
</div>
<div class="info">
<div class="prop-status-details">
Accepted by
<strong>aoei eui</strong> from
<strong>127.0.0.1</strong>
</div>
</div>
</div>
</div>
JavaScript
$j = jQuery.noConflict();
$j(function() {
$j(".change_status").click(function() {
$j('#change_status_menu').fadeToggle("fast");
});
$j('li').click(function() {
$j('#change_status_menu').fadeToggle("fast");
$j(".status .status_header span").attr("class", $j(this).attr('class'));
$j(".status .status_header span").html($j(this).text());
$j('#proposal_status').val($j(this).attr("name"));
unsaved_changes = true;
});
});
CSS
.no_padding{
padding: 0px !important;
}
.properties-shell {
background: #f3f3f3;
width: 930px;
position: relative;
border-right: solid 10px #f3f3f3;
border-left: solid 10px #f3f3f3;
}
.properties-shell-top {
margin-top: 15px;
background: url(../images/bucket_wide_bg.gif) no-repeat;
width: 950px;
height: 10px;
overflow: hidden;
}
.properties-shell-bottom {
background: url(../images/bucket_wide_bg.gif) 0 -10px no-repeat;
width: 950px;
height: 10px;
overflow: hidden;
}
.properties-main {
background: #FFF;
display: table;
border-left: solid 1px #e5e5e5;
}
.properties_header{
border-right: solid 1px #e5e5e5;
display: block;
height: 38px;
border-top: rgb(229,229,229);
background: #e5e5e5;
background: -webkit-gradient(linear, left bottom, left top,
color-stop(0%,#e5e5e5),
color-stop(96%,#f2f2f2),
color-stop(97%,#ffffff),
color-stop(98%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* W3C */
}
.properties_first_col{
padding: 20px;
width: 415px;
float: left;
display: inline-block;
}
.properties_second_col{
padding: 20px;
padding-right: 15px;
width: 210px;
float: left;
display: inline-block;
}
.properties_options{
background: #F7F7F7;
float: right;
padding: 20px;
width: 187px;
border-left: solid 1px #e1e1e1;
border-right: solid 1px #e1e1e1;
border-bottom: solid 1px #e1e1e1;
min-height: 268px;
}
.option_select{
padding: 5px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 13px;
color: #747474;
}
.proposal_status {
position: absolute;
top: 266px;
right: 0px;
margin-right: 1px;
}
.change_status_menu {
border-radius: 5px;
background: rgba(235,235,235, 0.95);
border: 1px solid #d3d3d3;
width: 142px;
height: 110px;
position: absolute;
z-index: 1000;
right: 10px;
bottom: 77px;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
.change_status_menu .container{
border: 1px solid white;
padding: 5px;
border-radius: 4px;
}
.change_status_menu .container li {
display: block;
width: 120px;
padding:5px 0 5px 10px;
margin:0;
}
.change_status_menu .container li:hover{
background: -webkit-linear-gradient(top, #ffffff 2%, #e9e9e9 96%, #F3F3F3 85%, #e9e9e9 96%, #ffffff 98%); /* Chrome10+,Safari5.1+ */
border: 1px solid #d7d7d7;
border-radius: 3px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 9px;
}
.arrow {
z-index: 1003;
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
right: 38px;
bottom: 60px;
}
.arrow_border {
z-index: 1001;
border-color: #d3d3d3 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
right: 38px;
bottom: 58px;
}
.arrow_border_2 {
z-index: 1002;
border-color: #fff transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
right: 38px;
bottom: 59px;
}
.proposal_status .status{
width: 227px;
}
.proposal_status .status .status_header,
.proposal_status .status .Unpublished{
background: #e5e5e5;
background: -webkit-gradient(linear, left bottom, left top,
color-stop(0%,#e5e5e5),
color-stop(96%,#f2f2f2),
color-stop(97%,#ffffff),
color-stop(98%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* W3C */
width: 227px;
height: 30px;
}
.proposal_status .status .status_header .change_status{
width: 88px;
font-size: 9px;
float: right;
display: inline-block;
margin: 5px;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
.proposal_status .Accepted,
.proposal_status .Declined,
.proposal_status .Open{
margin: 5px;
display: inline-block;
text-transform: uppercase;
font-size: 14px;
color: #848484 !important;
text-shadow:#fff 0px 1px 0, #fff 0 -1px 0;
}
.proposal_status .Accepted .badge,
.proposal_status .Declined .badge,
.proposal_status .Open .badge,
.proposal_status .Unpublished .badge{
width: 17px;
height: 17px;
display: inline-block;
position: relative;
top: 3px;
}
.proposal_status .Accepted .badge{
background: url(/images/header_status_green.png) no-repeat;
}
.proposal_status .Declined .badge{
background: url(/images/header_status_blue.png) no-repeat;
}
.proposal_status .Open .badge{
background: url(/images/header_status_grey.png) no-repeat;
}
.proposal_status .Unpublished .badge{
background: url(/images/header_status_white.png) no-repeat;
}
.proposal_status .status .info{
background: #F2F2F2;
background: -webkit-gradient(linear, left bottom, left top,
color-stop(0%,#F2F2F2),
color-stop(100%,#D6D6D6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* Opera11.10+ */
background: -ms-linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2F2F2', endColorstr='#D6D6D6',GradientType=0 ); /* IE6-9 */
background: linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* W3C */
box-shadow: inner 0 2px 2px #bbb;
-moz-box-shadow: inset 0 2px 2px #bbb;
-webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
.prop-status-details {
padding: 10px;
color: #5F5F5F;
line-height: 15px;
}
.proposal_status .status .Unpublished{
margin-top: 95px;
text-transform: uppercase;
text-indent: 10px;
line-height: 30px;
font-size: 14px;
color: #818181;
text-shadow:#fff 0px 1px 0, #fff 0 -1px 0;
box-shadow: none;
}
.action_button {
font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
background: #FCFCFC;
border: 1px solid #DCDCDC;
border-radius: 4px;
padding-left: 5px;
padding-right: 5px;
font-size: 10px;
line-height: 18px;
color: #8B8B8B !important;
text-transform:uppercase !important;
/* text-shadow: #555 0px -1px 1px;*/
/* letter-spacing:1px;*/
font-size: 11px;
font-weight: bold;
line-height: 18px;
}
.action_button:hover{
text-decoration: none;
background: #f4f4f4;
border: 1px solid #ccc;
}

The problem is that you're setting the class attribute with html content. I've done a quick workaround:
http://jsfiddle.net/a7rXZ/4/
Simply changing .html() with .text(). The original returns a value that looks like the following (yes, including all the whitespace):
<div class="badge"></div>
Declined
But you're expecting just the text Declined, which is retrievable by the new version. You might like to consider a slightly stronger tactic (whitespace removal would be a start, but I'm referring to something more rigid), even though for now the new version works.