Inspect Element and View Source Code are showing t

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.