Javascript JQuery UI对话框-更改标题颜色仅部分有效

我使用的是JQuery UI的对话框模块，所有功能都正常工作，并且基本上都可以将其设置为ok，但有一两个奇怪之处我无法理解：

1） 我正在尝试将标题栏的颜色从默认更改为紫色。这是我的CSS：

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

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

它工作了一半：字体改变了，我在单词后面得到了一个紫色的矩形，但其余的部分保持默认颜色。更改.widget标题没有帮助

2） 我正在尝试更改容器边框颜色。这是我的CSS：

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

同样，它也起到了一半的作用——大部分边框都是紫色的，但还有两条小白线。我试着确保我也改变了调整大小的控制柄，这使线条变细，但并没有完全去除它们

下面是一个屏幕截图，显示我目前得到的信息：

下面是我创建对话框的代码，以防我在这一点上搞砸了什么（尽管我看不出是什么）：

//单击“演示”按钮调用
函数演示（）{
var$dialog=$（'Coming Soon'）；
var$title=“演示”；
对话框（$dialog，$title）；
....    
函数对话框（对话框，标题）{
$title=标题；
$dialog=dialog；
$dialog.dialog（{显示：{效果：“盲”，持续时间：500}，{title:$title}，{宽度：700}，
{height:400}，{modal:true}）；
$dialog.dialog（'open'）；
}

编辑以添加：以下是HTML以及调用对话框的按钮：

<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>

文件夹

编辑以再次添加：如果我删除#dialog div上的样式，这就是我所拥有的：

---

？？？

您只需更改以下内容：

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

致：

---

看起来你在标题栏中选择了错误的元素。如果没有HTML标记，很难判断。试着定位

.ui dialog titlebar

的父元素，这不是我的外观->adeneo2，我将#dialog设置为灰色背景，因此我的背景是灰色的……不过我对白色中间部分很好奇，我假设没有#对话框样式，你最终会变成紫色…嗯，很有趣…是的，如果我去掉#对话框样式，我会得到白色条纹…我猜这解释了边缘的细白线，但我不知道为什么白色条纹会出现在第一位…我不能投票给你，因为我没有足够的代表，但谢谢你：D

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

.ui-dialog { background:#330033; }