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

PHP Build a Basic PHP Website (2018) Building a Media Library in PHP Adding Active States to the Navigation

Richard Hall
Richard Hall
9,139 Points
Posted by Richard Hall
Richard Hall
9,139 Points

Getting a weird alignment glitch

In the <ul class="items"> section, if I split up the code in the following:

<ul class="items">
                    <li><a href="details.php?id=201"><img src="img/media/forest_gump.jpg" alt="Forrest Gump"><p>View Details</p></a></li><li><a href="details.php?id=204"><img src="img/media/princess_bride.jpg" alt="The Princess Bride"><p>View Details</p></a></li><li><a href="details.php?id=302"><img src="img/media/elvis_presley.jpg" alt="Elvis Forever"><p>View Details</p></a></li><li><a href="details.php?id=303"><img src="img/media/garth_brooks.jpg" alt="No Fences"><p>View Details</p></a></li>
                </ul>

and change it to:

    <ul class="items">
        <li>
          <a href="details.php?id=201">
            <img src="img/media/forest_gump.jpg" alt="Forrest Gump">
            <p>View Details</p>
          </a>
        </li>
        <li>
          <a href="details.php?id=204">
            <img src="img/media/princess_bride.jpg" alt="The Princess Bride">
            <p>View Details</p>
          </a>
        </li>
        <li>
          <a href="details.php?id=302">
            <img src="img/media/elvis_presley.jpg" alt="Elvis Forever">
            <p>View Details</p>
          </a>
        </li>
        <li>
          <a href="details.php?id=303">
            <img src="img/media/garth_brooks.jpg" alt="No Fences">
            <p>View Details</p>
          </a>
        </li>
                </ul>

The Garth Brooks album drops down from the row and creates a second row. I didn't delete anything from the code (that I could find) I simply added some spacing, and now it's getting rendered differently. This makes 0 sense to me as to why this would happen.

2 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Robert,

The list items have a display of inline-block in the css.

If there is any whitespace between inline elements in the html source it will produce a gap between those elements on the rendered page. By reformatting the code, you're creating whitespace between the list items. The items on the page now have a small gap between them and there isn't quite enough room for the 4th item to fit and so it drops down to the next row.

The following css tricks article illustrates the problem and shows a few different methods to fix it: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

In the case of this project, you'll be outputting that html with a php foreach loop later on. It can be output as 1 long line like you have in your first code block. And that is one way to eliminate the whitespace and fix the problem.

Richard Hall
Richard Hall
9,139 Points
Richard Hall
Richard Hall
9,139 Points

Bah! Thanks Jason! For whatever reason I didn't even look in the CSS to see if there was an something causing the problem.