I am struggling to style the close tag in my jQuery dialog box. I have looked through the documentation and tried various CSS alterations, but nothing seems to be working. Any suggestions or insights would be greatly appreciated. My code is provided below for reference:
HTML:
<div id="column1">
<h2>Features</h2>
<p>Click an image below to view more information on our products.</p>
<a href="#" id="x-button"><img src="../Images/lockIcon.png" alt="Security"/></a>
<div id="dialog" style="display:none;">
<p class="innerTitle">This is content!</p>
</div>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function(){
// Initialize my dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 450
});
// Bind to the click event for my button and execute my function
$("#x-button").click(function(){
Foo.DoSomething();
});
var Foo = {
DoSomething: function(){
$("#dialog").dialog("open");
}
}
});
</script>
CSS
/* -------------------- ADDITIONAL -------------------- */
#dialog
{
width: 550px;
height: 550px;
background-color: #c8c8c8;
background-image: url("../Images/orangeDivider.png");
background-repeat: repeat-x;
background-position: top left;
}
.innerTitle
{
padding-top: 10px;
font-size: 14px;
font-weight: bold;
color: #808080;
}
Your help and advice are much appreciated!