Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

Hernan Martin Demczuk
Hernan Martin Demczuk
1,264 Points
Posted by Hernan Martin Demczuk
Hernan Martin Demczuk
1,264 Points

Inspect Element Tool

I have this problem where I can't see in the Chrome Inspect Element Tool the anchor element that has the "logo" identifier. It's the exactly same code that is shared in the video. Any idea why is not highlighted in the browser when I click on <a href="index.html" id="logo">?

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding:0 5%;
}  

#logo {
  text-align: center;
  margin: 0;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demczuk, H. | Estudiante</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Hernan Martin Demczuk</h1>
        <h2>Estudiante</h2>
      </a>    
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="acercade.html">Acerca de</a></li>
          <li><a href="contacto.html">Contacto</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt=""> 
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt=""> 
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt=""> 
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt=""> 
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt=""> 
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href=""><img src="img/facebook-wrap.png" alt="Facebook Icon"></a>
        <a href=""><img src="img/twitter-wrap.png" alt="Twitter Icon"></a>
        <p>&copy; 2014 - Hernan Martin Demczuk.</p>
      </footer>
    </div>
  </body>
</html>

2 Answers

Michael Williams
Michael Williams
13,005 Points
Michael Williams
Michael Williams
13,005 Points

Hi Hernan Martin Demczuk,

Hopefully, I can make light of this.

The "header" element and the "a" element do not have an initial width or height value. In other words, they are not block level elements or sectioning elements.

In this particular instance for the id of logo or a#logo, it is not inside a block level element to give it a width or height value. It wraps around the two block level elements but the a#logo itself has the dimensions of 0px by 0px.

In regards to the Chrome Inspector tool, it will not provide the additional highlighting (such as blue or orange) for an element of zero dimensions. It does however display a callout box where the a#logo is located and its dimensions of 0px by 0px.

You will see the differences with the other "a" elements in your HTML.

Regards, Michael Williams

Hernan Martin Demczuk
Hernan Martin Demczuk
1,264 Points
Hernan Martin Demczuk
Hernan Martin Demczuk
1,264 Points

Thanks, Michael. That was pretty clear, so it's not like if I don't see some element highlighted in the browser it means that I have an error in the code right? It just doesn't have a height specified.

Michael Williams
Michael Williams
13,005 Points
Michael Williams
Michael Williams
13,005 Points

Hi Hernan, you're welcome. From my understanding, if an error exists in the code, the element will not display correctly. In your markup, everything presented itself as clean code.

The colors do have meaning behind them in the Chrome Inspector tool as seen in its box model option:

Blue is the content; Green is the padding; Orange is the border; Red is the margin

The course "Website Optimization" was helpful in taking a deeper dive.

In addition, I find it a good practice to use a validator for my HTML & CSS, such as the validators offered by W3C.

HTML validator

CSS validator

Regards, Michael Williams

Hernan Martin Demczuk
Hernan Martin Demczuk
1,264 Points
Hernan Martin Demczuk
Hernan Martin Demczuk
1,264 Points

I see, I will take a look to those validators. Thanks for your time, Michael!