CODEWITHSUNDEEP
htmlcss
Scrungepipes
Scrungepipes

Reputation: 37581

Text being displayed with a blue underlining, where is it coming from?

I'm displaying some white text on a back background but the text is displayed with a blue line underneath it (regardless of the browser). Where is this coming from?

body {
    position:relative;
    background-color:black;
    font-family: Helvetica; 
    margin: 0;              /* Amount of negative space around the outside of the body */
    padding: 0;             /* Amount of negative space around the inside of the body */
}

#main_header {
    position: relative;
}


#logo {
    position:absolute;
    top: 6px;
    left: 140px;
    height: 50px;
    width: 50px;
}

#main_title {
    position:absolute;
    font-size: 15px;
    color:white;
    top: 50px;
    left: 40px;
    text-decoration:none;
    text-align:center;
    display:block;
}

<body>
    <a href="http://theurl">
    <div id = "main_header" >
        <img id = "logo" src="logo.png"/>       
        <h2 id = "main_title">Title</h2>
    </div>
    </a>

enter image description here

Upvotes: 0

Views: 2509

Answers (2)

Kermit
Kermit

Reputation: 34054

Anchor tags (<a>) cannot contain block elements such as div or h2 in HTML 4.01. This may be causing the effect you are seeing. Read on.

You can rewrite your <a> tag to surround inline elements (below) only or specify that your document type is HTML5. Here are other solutions.

<body>
    <div id = "main_header" >
        <a href="http://theurl"><img id = "logo" src="logo.png"/></a>      
        <h2 id = "main_title">Title</h2>
    </div>
</body>

Upvotes: 2

Jirka Kopřiva
Jirka Kopřiva

Reputation: 3099

try to set:

a img { border: none; }

a { text-decoration: none; }

Upvotes: 0

Related Questions