Inspect Element and View Source Code are showing two different things

Question

I'm using Inspect Element in Google Chrome to figure out what is controlling the size of the slideshow controller buttons underneath the slideshow of this template website:

http://themefuse.com/demo/html/Medica/index-slider-2.html

When I click Inspect Element over the button "Cardiology" I see a line in the HTML code saying:

<li style="width: 192px; overflow: hidden;"><a href="#" rel="1" class="">Cardiology</a></li>

However, when I view source code of the page, no such line exists! This is a problem for me because I would like to edit the size of the button and the text inside it.

Please help! Thanks!

Answer 1

"Source code" is what the browser received from the server. It can be changed by JavaScript; the "Inspect Element" always shows the current shape of the document.

EDIT: Then again, sometimes things are not complicated. Look what I found in the source code:

<li>
    <div class="textHolder">
    <h3>Cardiology</h3>
    <p><span><strong><a href="#">Cardiac Rehabilitation Center</a></strong> We helped Glade Inc. design their latest fragrance for household perfumes </span></p>
    </div>
    <img src="images/temp/slider_img_01.jpg" alt="" /> 
</li>

It is then further modified by JS.

Answer 2

This list generated by JS. Check js/playSlider.js starting from line #335.