After writing some code, I encountered a situation where I have multiple jQuery UI modal dialogs. I decided to remove the default title bar provided by jQuery in these modal dialogs. The code snippet I used within the create function in the dialog code to achieve this was:
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").css("display","none");
Subsequently, I populated the content of these modal dialogs in the following manner:
HTML
<div id="helpdialog" class="helpbox">
<header id="helptitle">Help</header>
<p id="helptext">
The objective of the game is to navigate through the maze by constructing a correct sentence that ends on one of the edges of the grid.<br><br>
You can only move from each square to one of the highlighted squares. Choose the appropriate word that can follow the word in the current square and proceed by clicking on it. Move one square at a time, forming a sentence, until you reach an edge of the grid or cannot extend the sentence any further. Click on Submit.<br><br>
To deselect a word, click on the squares in the reverse order in which they were selected (they will be numbered).<br><br>
Clicking on Reveal will briefly display the sentence for two seconds, allowing you to resume playing afterwards.<br><br>
In the Single player game, strive to find all the sentences in the shortest time possible.
</p>
</div>
CSS
#helptitle {
height: 1.5em;
width: 100%;
background-color: #d9d3ed;
text-align: center;
font-size: 1.3em;
font-family: Dejavu, Verdana, Arial, sans-serif;
}
#helptext {
font-size: 0.9em;
padding: .5em;
font-weight: normal;
margin-top: 0;
}
However, I encountered an issue with the CSS attributes not being applied to the header tag, specifically in older versions of Internet Explorer. Surprisingly, the CSS for the p tag is being applied correctly. This problem seems to be isolated to older IE versions, as it works fine in other browsers. Is there a need for more specific selectors, or could there be another underlying problem?