Inspecting an item and viewing the source code show two different things.

Question

I am using Inspect Element in Google Chrome to find out what controls the size of the buttons of the slide show controller under the slide show of this website template:

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

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

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

However, when I look at the source code of the page, such a line does not exist! 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 using JavaScript; "Inspect Element" always shows the current form of the document.

EDIT: Again, sometimes things are not complicated. See 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> 

Then it is further modified by JS.

Answer 2

This list is created by JS. Check out js/playSlider.js starting at line # 335.