JQuery UI dialog - changing title color only partially works

Question

I'm using JQuery UI's dialog module, got it all working, and am mostly able to style it ok, but there are one or two oddities that I can't figure out:

1) I am trying to change the color of the title bar from default to purple. Here is my CSS:

.ui-dialog-title {
font-family: 'Andika', sans-serif;
color: #FFFFCC;  
background-color:#330033;
}

.ui-dialog-titlebar {
   background-color:#330033;
}

It half-works: the font changes, and I get a purple rectangle behind the words, but the rest of the bar stays the default color. Changing .widget-header doesn't help.

2) I am trying to change the container border color. Here is my CSS:

.ui-dialog {
background-color:#330033;
}

Again it half-works - most of the border goes purple, but there are two little white lines left. I've tried making sure I also change the resize-handles, which made the lines thinner but didn't get rid of them completely.

Here's a screenshot to show what I'm currently getting:

And here's the code where I create the dialog box, just in case I'm messing something up at this point (though can't see what):

//called by 'Demos' button onclick
function demos() {
var $dialog = $('<div id="dialog">Coming Soon</div>');
var $title = "Demos";
dialog($dialog, $title);

....    

function dialog(dialog, title) {
$title = title;
$dialog = dialog;
$dialog.dialog({show: {effect: "blind", duration: 500}}, {title:$title}, {width:700},     
{height:400}, {modal: true});
$dialog.dialog('open');
}

Edit to add: here is the HTML with the buttons that call the dialog:

<div id="portfolio" class ="grey">
        <b>PORTFOLIO</b>
        <br />
        <div id="buttonHolder">
        <input type="button" class="button" value="Websites" onclick="websites()">
        <input type="button" class="button" value="Apps" onclick="apps()">
        <input type="button" class="button" value="Demos" onclick="demos()">
        <input type="button" class="button" value="Games" onclick="games()">
        <input type="button" class="button" value="Resources" onclick="resources()">
        </div>            
    </div>

Edit to add again: this is what I have if I remove the styling on the #dialog div: ???

Answer 1

You just need to change this:

.ui-dialog { background-color:#330033; }

to:

.ui-dialog { background:#330033; }