Results 1 to 4 of 4
  1. #1
    Join Date
    Oct 2010
    Posts
    178

    HTML 101 class week 3

    I am creating the first page of the html file that Nelson is showing us in the video/class. I decided to use the Chrome browser so I can use the console at the bottom (F12) to see padding and border etc. So far I only have the header and footer with the class of ".width-container" and the "header" styles in the .css file.

    When I update Chrome and look in the elements section down below on the webpage, I see all this styling that I do not see in Nelson's page. I did not add anything different to my HTML file than Nelson did.

    Here's the screenshot:

    Click image for larger version. 

Name:	Google Chrome_code.jpg 
Views:	240 
Size:	25.4 KB 
ID:	73686

    The code is:

    <embed id="kpmAutofillPlugin" type="application/x-npkpmautofillplugin" style="visibility: hidden; width: 0; height: 0; position: absolute;">
    <div id="window-resizer-tooltip"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div>

    Where did this code come from????? I just followed the video.
    I added:
    .width-container {
    max-width: 900px;
    min-width: 600px;
    margin: auto;
    }

    header {
    background: #111;
    }

    this is all I have added so far. Is there a setting in Chrome to get rid of that extra code? Maybe I should go back to Firefox.

    Edit: Weird. I closed Chrome and opened it again and all that extra code is gone. What the bloody hll is going on?

    Edit 2: It looks like I get that extra code when I use the XAMPP web server to view my HTML/CSS file (localhost/week3/Example2.html). If I use my Komodo Edit's preview button (opens up the Chrome or Firefox browser) to view my file, I do not get this extra code. Anyone know how to get rid of the extra code when using the web server? Nelson??
    Last edited by cyclingg; 05-22-2013 at 12:33 AM.

  2. #2
    Join Date
    Mar 2004
    Location
    Anacortes, WA
    Posts
    4,168
    Quote Originally Posted by cyclingg View Post
    I am creating the first page of the html file that Nelson is showing us in the video/class. I decided to use the Chrome browser so I can use the console at the bottom (F12) to see padding and border etc. So far I only have the header and footer with the class of ".width-container" and the "header" styles in the .css file.

    When I update Chrome and look in the elements section down below on the webpage, I see all this styling that I do not see in Nelson's page. I did not add anything different to my HTML file than Nelson did.

    Here's the screenshot:

    Click image for larger version. 

Name:	Google Chrome_code.jpg 
Views:	240 
Size:	25.4 KB 
ID:	73686

    The code is:

    <embed id="kpmAutofillPlugin" type="application/x-npkpmautofillplugin" style="visibility: hidden; width: 0; height: 0; position: absolute;">
    <div id="window-resizer-tooltip"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div>

    Where did this code come from????? I just followed the video.
    I added:
    .width-container {
    max-width: 900px;
    min-width: 600px;
    margin: auto;
    }

    header {
    background: #111;
    }

    this is all I have added so far. Is there a setting in Chrome to get rid of that extra code? Maybe I should go back to Firefox.

    Edit: Weird. I closed Chrome and opened it again and all that extra code is gone. What the bloody hll is going on?
    Chrome extensions are allowed to inject elements into the DOM, and, unfortunately, those elements still appear in the developer tools. It seems you may have a autofill extension installed based off of the markup.
    Need any help? Feel free to PM me - or send an email directly to nelson@3dbuzz.com!

  3. #3
    Join Date
    Oct 2010
    Posts
    178
    Ah, thanks Nelson. I don't use Chrome normally. I thought I would try it out. I will uninstall that extension.

  4. #4
    Join Date
    Jul 2013
    Location
    New York
    Posts
    12
    Well.. I think that Chrome is one of the advanced technologies that could be used for having the quick access of different websites and content. Thanks for sharing this stuff.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •