Styles Don't Seem To Apply Correctly (Or At All)

Frontend Web Development: The Big Nerd Ranch Guide Chapter 3: Styles
1

Folks;

I’m working through Chapter 3 and I’m having some problems with the styles given in the book. First, I’m using 61.0.3163.100 on macOS Sierra 10.12.6. I’m seeing two issues after adding the styles to the images:

  1. the images don’t resize and
  2. the whitespace below the images does not go away as the author suggests. If I add the property in the debugger, then it applies.

Here are my CSS and HTML files. Anybody seeing this and know a workaround?

styles.css

body {
font-size: 10px;
background: rgb(149, 194, 215);
}

a[href=’#’] {
text-decoration: none;
}

.thumbnail-list {
list-style: none;
}

.thumbnail-item {
border: 1px solid rgb(100%, 100%, 100%);
border: 1px solid rgba(100%, 100%, 100%, 0.8);
}

.thumbnail-image: {
display: block;
width: 100%;
}

.thumbnail-title {
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
font-size: 18px;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ottergram</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <header>
        <h1 class="logo-text">Ottergram</h1>
    </header>
    <ul class="thumbnail-list">
        <li class="thumbnail-item">
            <a href="#">
                <img class="thumbnail-image" src="img/otter1.jpg" alt="Barry the Otter">
                <span class="thumbnail-title">Barry</span>
            </a>
        </li>
        <li class="thumbnail-item">
            <a href="#">
                <img class="thumbnail-image" src="img/otter2.jpg" alt="Robin the Otter">
                <span class="thumbnail-title">Robin</span>
            </a>
        </li>
        <li class="thumbnail-item">
            <a href="#">
                <img class="thumbnail-image" src="img/otter3.jpg" alt="Maurice the Otter">
                <span class="thumbnail-title">Maurice</span>
            </a>
        </li>
        <li class="thumbnail-item">
            <a href="#">
                <img class="thumbnail-image" src="img/otter4.jpg" alt="Lesley the Otter">
                <span class="thumbnail-title">Lesley</span>
            </a>
        </li>
        <li class="thumbnail-item">
            <a href="#">
                <img class="thumbnail-image" src="img/otter5.jpg" alt="Barbara the Otter">
                <span class="thumbnail-title">Barbara</span>
            </a>
        </li>
    </ul>
</body>

</html>
2

Here’s a picture of what the Chrome debugger says about the applied styles.

cdstyles
cdstyles.png672×1041 86.5 KB

3

Can you post the file structure where your index.html and stylesheets folder which should contain your style.css file?

1 Like
4

Me too I have the same issue. Been stuck without CSS styles working for days.
could the authors respond with a solution.

Screenshots of my issue below:

Selection_010
Selection_010.png889×199 13 KB

5

I’ve been having similar issue with this. How to resolve this guys?