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


#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.


#3

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