CODEWITHSUNDEEP
htmlcss
Aravind Suresh Thakidayil
Aravind Suresh Thakidayil

Reputation: 1193

Seeing small dashes under image

I have a html document in which a menu I've made using uls is showing little dashes below the line. This is my html source code:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="keywords" content="Connet, Consult, Consultation, Netconsultation">
    <meta name="description" content="Website of Connet Consultancy Services.">
    <meta name="author" content="Connet development team">
    <title> Connet. Connect. Through the internet. </title>
    <link rel="stylesheet" href="/page_files/css/Main.Style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
    <script src="/page_files/js/Default.Interactivity.js"> </script>
    <script src="/page_files/js/Default.Processing.js"> </script>
    <noscript title="Could not connect to script">
        We can't get our scripts. Reloading the page might fix it.
    </noscript>
  </head>
    <body>
        <div class="Wrapper">
            <nav>
                <ul class="NavList">
                    <li>
                        <a onclick="location.reload();">
                            <img src="/page_files/media/home-icon.png" alt="Home"/>
                        </a>
                    </li>
                    <li>
                        <a href="/Login.html">
                            <img src="/page_files/media/user-icon.png" alt="Login" />
                        </a>
                    </li>
                    <li>
                        <a href="/Conroot.html">
                            <img src="/page_files/media/connect-icon.png" alt="Enter consultation" />
                        </a>
                    </li>
                    <li>
                        <a href="/Blog.html">
                            <img src="/page_files/media/blog-icon.png" alt="Blog" />
                        </a>
                    </li>
                    <li>
                        <a href="/Careers.html">
                            <img src="/page_files/media/careers-icon.png" alt="Careers" />
                        </a>
                    </li>
                    <li>
                        <a href="/Contact.html">
                            <img src="/page_files/media/contact-icon.png" alt="Contact us" />
                        </a>
                    </li>
                    <li>
                        <img src="/page_files/media/search-icon.png" alt="Search" />
                    </li>
                    <li>
                        <input type="text" id="SearchBox" placeholder="Search...">
                    </li>
                </ul>
            </nav>

            <header>
            </header>

            <div class="Sections">
                <section class="TopSect">

                </section>
                <section class="MidSect">

                </section>
                <section id="NewSect">

                </section>
                <section class="LogSect">

                </section>
            </div>
        </div>   
    </body>
</html>

This is my css:

/* CSS DOCUMENT */
body {
    background-color: #fff;
    color: #0094ff;
    font-family: 'Segoe UI Light', 'Tahoma', Geneva, Verdana, sans-serif;
    font-size: 24px;
    font-weight: 100;
    text-decoration: none; 
}

ul.NavList {
    list-style-type: none;
    text-decoration: none;
    text-align: center;
    padding: 20px 20px 0 0;
}

ul.NavList li {
    display: inline;
    text-decoration: none;
}

I'm using Microsoft Edge, and these are the dashes I'm talking about:

It works fine in IE11:

But not in Chrome: enter image description here

I can't get any clear idea bout what these "dashes" are. Help???? (Thanks in advance.)

Upvotes: 0

Views: 60

Answers (1)

Anthony Astige
Anthony Astige

Reputation: 1969

They are the remnants of links.

Try something like 

ul.NavList li a {
    text-decoration: none;
}

Upvotes: 2

Related Questions