Issue with image displaying in CSS

  1. “What will pollution do to us?” This statement is not getting underlined whenever you hover upon it.
  2. The 3 lists below “Titanic letter…” are having incorrect list-style. LIVE in red box isn’t even showing before “BBC News Channel”.
    I am unable to fix them. Please help.

MY HTML:
<!doctype html>

<title>Learning CSS</title>

<meta charset="utf-8" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">

    body {

        margin: 0;

        font-family: ReithSans, Arial, Helvetica, freesans, sans-serif;

    }

    #topbar {

        background-color: #BB1919;

        width: 100%;

        height: 40px;

        color: white;

    }

    .fixedwidth {

        width: 1200px;

        margin: 0 auto;

    }

    #logodiv {

        padding-top: 5px;

        float: left;

        border-right: 1px solid rgb(0, 0, 0);

        padding-right: 10px;

    }

    #signin {

        font-weight: bold;

        font-size: 0.9em;

        padding: 9px 80px 13.2px 20px;

        border-right: 1px solid rgb(0, 0, 0);

        float: left;

    }

    #signin img {

        padding-right: 8px;

    }

    #topmenu {

        float: left;

    }

    #topmenu ul {

        margin-top: 0;

        padding: 0;

    }

    #topmenu li {

        list-style: none;

        font-weight: bold;

        font-size: 0.9em;

        border-right: 1px solid rgb(0, 0, 0);

        padding: 10px 20px 12.5px 20px;

        float: left;

    }

    #searchbar {

        float: left;

        padding: 8px 0 0 20px;

    }

    #searchbar input {

        height: 20px;

        border: none;

        padding-left: 5px;

        font-size: 1.1em;

        background-image: url("https://drive.google.com/thumbnail?id=1XQ1WOTujJGYpDStoLl3stZ_-ucTADbCJ"); /*search icon*/

        background-repeat: no-repeat;

        background-position: right center;

    }

    #newsbar {

        background-color: #8C0003;

        width: 100%;

        height: 90px;

        color: white;

    }

    .clear {

        clear: both;

    }

    #newsbar p {

        margin: 0;

        padding: 0;

        padding-top: 10px;

        float: left;

    }

    .newsheader {

        font-size: 3em;

    }

    #uk {

        font-size: .7em;

        padding-left: 20px;

    }

    #rss {

        float: right;

        margin-top: 40px;

    }

    #topicmenu ul {

        background-color: #3A0711;

        margin: 0;

        padding: 5px 0 0 5px;

        height: 20px;

    }

    #topicmenu li {

        list-style: none;

        font-size: .8em;

        border-right: 1px solid white;

        float: left;

        background-color: none;

        padding: 0 6px 0 6px;

    }

    .selected {

        background-color: rgb(237, 237, 237);

        color: rgb(102, 102, 102);

        height: 21px;

        position: relative;

        top: -5px;

        padding-top: 4px !important;

    }

    #content {

        width: 100%;

        color: rgb(83, 83, 83);

        font-size: .75em;

    }

    .date {

        font-weight: bold;

    }

    h1 {

        color: #1F4F82;

        font-size: 2.5em;

    }

    .headlineimage {

        float: left;

    }

    .newsites {

        position: relative;

        left: 10px;

        bottom: 15px;

        width: 280px;

        float: left;

        font-size: 1.1em;

    }

    .newsites a {

        color: rgb(31, 79, 130);

    }

    a {

        text-decoration: none;

    }

    a:hover {

        text-decoration: underline;

    }

    .video {

        background-image: url("https://drive.google.com/thumbnail?id=19LXSl7359529HxPms6ofoLVLUFJxGBT5"); /* triangle icon*/

        background-size: 17px;

        background-repeat: no-repeat;

        background-position: left center;

        padding: 20px;

    }

    .links {

        line-height: 1.6em;

    }

    .sound {

        background-image: url("https://drive.google.com/thumbnail?id=1WkGNgjo3EB-EdR61G-DmaRbytn1yv9-6"); /* sound icon*/

        background-size: 19px;

        background-repeat: no-repeat;

        background-position: left center;

        padding: 20px;

    }

    #watchlisten {

        background-color: #EEEEEE;

        float: right;

        width: 480px;

        position: relative;

        bottom: 80px;

    }

    h2 {

        color: rgb(80, 80, 80);

        margin: 10px 0 10px 10px;

        font-size: 1.8em;

    }

    .boxes {

        float: right;

        margin: 20px 10px 0 0;

    }

    .leftarrow {

        float: left;

        border-right: 1px solid white;

    }

    .wlblock {

        float: left;

        background-color: #D1700E;

        width: 204px;

        border-right: 1px solid white;

    }

    .wlblock a {

        color: white;

    }

    .wlblock p {

        margin: 10px 19px 16px 15px;

        /* align : right; */

    }

    .wlblock2 {

        float: left;

        background-color: #D1700E;

        width: 204px;

        border-right: 1px solid white;

    }

    .wlblock2 a {

        color: white;

    }

    .wlblock2 p {

        margin: 10px 10px 16px 15px;

    }

    #watchlisten li {

        list-style: none;

        background-image: url("https://drive.google.com/thumbnail?id=1bWTaZQZgR2cUrCHRyYRvbF5BgcUIVdUK"); /*live in red box*/

        background-repeat: no-repeat;

        background-position: left center;

        background-size: 25px;

        padding: 5px 0 5px 20px;

    }

</style>
<div id="container">

    <div id="topbar">

        <div class="fixedwidth">

            <div id="logodiv">

                <img src="https://cdn.vox-cdn.com/thumbor/ULiFcktJYhW42omnYNr1zlkTv5A=/1400x1050/filters:format(jpeg)/cdn.vox-cdn.com/assets/1005382/bbc_logo_red.jpg"

                    width="40px" /> <!--bbc logo -->

            </div>

            <div id="signin">

                <img src="https://drive.google.com/thumbnail?id=1gLIcd5CncQg9cDjVYc_ElBQ0YeYk0VBF" width="10px" /> <!--signin logo -->

                Sign in

            </div>

            <div id="topmenu">

                <ul>

                    <li>News</li>

                    <li>Sport</li>

                    <li>Weather</li>

                    <li>IPlayer</li>

                    <li>TV</li>

                    <li>Radio</li>

                    <li>More...</li>

                </ul>

            </div>

            <div id="searchbar">

                <input placeholder="Search" />

            </div>

        </div>

    </div>

    <div class="clear"></div>

    <div id="newsbar">

        <div class="fixedwidth">

            <p class="newsheader">NEWS<span id="uk">UK</span></p>

            <div id="rss">RSS</div>

            <div class="clear"></div>

            <div id="topicmenu">

                <ul>

                    <li>Home</li>

                    <li>World</li>

                    <li class="selected">UK</li>

                    <li>England</li>

                    <li>N. Ireland</li>

                    <li>Scotland</li>

                    <li>Wales</li>

                    <li>Business</li>

                    <li>Politics</li>

                    <li>Health</li>

                    <li>Education</li>

                    <li>Sci/Environment</li>

                    <li>Technology</li>

                    <li style="border-right: none;">Environment & Arts</li>

                </ul>

            </div>

        </div>

    </div>

    <div class="clear"></div>

    <div id="content">

        <div class="fixedwidth">

            <p><span class="date">2 April 2014</span> Last updated at 15:23</p>

            <h1>Pollution to spread across England</h1>

            <img class="headlineimage" src="https://drive.google.com/thumbnail?id=1jrUt_ZuKBeNRwIWTLX7jtkbfW8u_CIFw"

                width="392px" /> <!--car mirror -->

            <div class="newsites">

                <p>Health warnings have been issued by the government as pollution spreading across England is

                    forecast to hit high levels.</p>

                <p class="links"><a class="video" href="">Why are pollution levels so high?</a></br>

                    <a class="video" href="">Sahara dust visible on cars</a></br>

                    <a class="video" href="">How Saharan dust reached the UK</a></br>

                    <a href="">What will pollution do to us?</a><br>

                    <a class="sound" href="">Air pollution a 'serious issue'</a></br>

                </p>

            </div>

            <div id="watchlisten">

                <img class="boxes" src="https://drive.google.com/thumbnail?id=1owu1Yk2iq66pBlAqwXgbDJ5UHvqykq5q"

                    width="59px" /> <!--watchlisten right 4 boxes -->

                <h2>Watch/Listen</h2>

                <img src="https://drive.google.com/thumbnail?id=14NUKX4A3ZXWZcf__2jjDC00xRF9P2NAR"

                    class="leftarrow" /> <!--left arrow-->

                <div class="wlblock">

                    <img src="https://drive.google.com/thumbnail?id=1XLOQfooGTFwZkDS3VY2ceStwKT6WaEcf" /> <!--Titanic letter-->

                    <p><a href="">Titanic letter could fetch &pound;100,000</a></p>

                </div>

                <div class="wlblock2">

                    <img src="https://drive.google.com/thumbnail?id=1Nycz5BoDrBd-W0Pw9y-cnD-SbPiNWgNA" /> <!--Cameron defends-->

                    <p><a href="">Cameron defends 'Muppet' remark</a></p>

                </div>

                <img src="https://drive.google.com/thumbnail?id=1O2hb3lvmV8Z3wGyUN_YHH_G5gp5QiL6A" 

                    class="leftarrow" /> <!--right arrow-->

                <p>

                    <ul>

                        <li><a href="">BBC News Channel</a></li>

                        <li><a href="">Radio 5 Live</a></li>

                        <li><a href="">Osborne questioned on budget</a></li>

                    </ul>

                </p>

            </div>

        </div>

    </div>

</div>
![must look like|640x360](upload://tHMaRqTKhOInzteUKPSB1Y7RMYH.jpeg)
  1. I suggest instead of using “list-style: none; " and " background-image: url()” for the LIVE red box, use the " list-style: url()"

  2. About “Titanic letter…” are having incorrect list-style. What exactly do you mean by ’ incorrect list-style '.

  3. The statement “What will pollution do to us?” i didn’t see anything wrong with it.

Thank you.

#WATCHLISTEN
Thanks, it did work.
But can I increase the spacing between the LIVE image bullet & the text following it?

I think you can add a padding-left to your <a> links or simply type a &nbsp; before the text.

1 Like

Mark it as solved :slight_smile: