title: Difference between source code and "inspect element"
body: <p>I can't find a specific style element in my code which I've been able to edit by using the code editor in both Chrome and Firefox (firebug).  Which brings me to my question, why is the view source so different from the actual code?  I know JQuery and Javascript are doing something to it (adding classes and junk...) because I'm using the modal from the JQuery UI, but why can't I find the style elements???  Where are they???</p>
  
  <p><strong>Source Code:</strong></p>
  
  <pre><code>&lt;div id="modalEmail-ESI" title="Email - ESI" class="infoModal"&gt;
  </code></pre>
  
  <p><strong>From Code Editor:</strong></p>
  
  <pre><code>&lt;div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-modalEmail-ESI" style="display: block; z-index: 1004; outline: 0px; position: absolute; height: auto; width: 800px; top: 205px; left: 577px;"&gt;&lt;div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"&gt;&lt;span class="ui-dialog-title" id="ui-dialog-title-modalEmail-ESI"&gt;Email - ESI&lt;/span&gt;&lt;a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"&gt;&lt;span class="ui-icon ui-icon-closethick"&gt;close&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;div id="modalEmail-ESI" class="infoModal ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 282px;" scrolltop="0" scrollleft="0"&gt;
  </code></pre>
  
  <p>In the "inspect element" code, there is a style attribute <code>width:800px;</code> that I want to change, but I've searched for it in the code and it's apparently non-existent.  </p>
  
  <p>Is that style attribute dynamically generated?</p>
  
  <p><strong>UPDATE:</strong> Based on your feedback, how can I update the width of the email modal when the style attribute is dynamic?</p>