Trying to find the height of the html element specified below, I am utilizing Jquery as shown in the example. The expected result for variable x is greater than 40 pixels; however, it consistently returns 10. By adjusting the padding from 5 pixels to 6 on the element, x changes to 12, indicating that only the padding is being considered. This behavior is not what I desire, and despite trying different jquery methods, the outcome remains confusing.
If anyone can identify why this is happening, please share. Thank you :)
<section id=\"sophiaHeader\">Show Me Products I\'ll Like<p id=\"disclaimer\" style=\"top:' + disclaimerYPosition +'; right:'+ disclaimerXPosition +' ;\"><img id="sophiaLogo" src="https://d33f10u0pfpplc.cloudfront.net/perun/v1/images/bookmarklet/favicon.ico"></p> </section>
The CSS associated with this element is:
#sophiaHeader {
font-family: Arial, Helvetica, sans-serif;
background-color: #4c3290;
border: 0 none;
margin: 0;
cursor: pointer;
color: white;
font-size: 15px;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
Jquery
var x = jQuery('#sophiaHeader').outerHeight();
NOTE: The code is added to a container like so, where the above code equals sophiaCustomHeaderHTML
jQuery("#widget-container").append(sophiaCustomHeaderHTML)