Remove the Underline from text inside a div where the div is enclosed in <a> tags

Question

I am currently formatting alongside using jquery UI. I have a div that has the "ui-state-error" class and the text within it has the "ui-state-error-text" class. Here is my code:

<div class="ui-widget">
     <a href="http://www.mobilehealtherecords.com/blog/news-announce/2014/06/faq-
     page/" target="_newtab" style="font-decoration: none">
          <div class="ui-state-error ui-corner-all" id="questionAlert" style=
          "margin: auto">
               <p class="ui-state-error-text"><span class="ui-icon ui-icon-alert" 
               style="float: left; margin-right: .3em;"></span><span style="
               color: font-weight: bold">Alert:</span> The "questions" page has
               been permanently removed. Click here for more information.</p>
          </div>
     </a>
</div>

I don't want to list all the different resources I am using, so I am including a jsfiddle . What I am trying to do is eliminate that annoying blue underline. If you notice I have already tried to remove it from the tag by inserting a Style with text-decoration: none.

Answer 1

I updated your fiddle and removed jQuery UI references for simplicity.

jsFiddle

Just added the following CSS rule

a {
    text-decoration: none;
}