CODEWITHSUNDEEP
htmlcsstitle
Justin Widener
Justin Widener

Reputation: 63

HTML <title> tag appearing on page

I am working on a webpage right now and have JUST started working on the content/css. I've built many webpages in the past and am using two different CSS files (reset.css and styles.css) to style the pages that I will be creating.

However, when I created this most recent page, the <title> tag is displaying in the webpage when I test it. Is there any way I can get around this?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<title>HOME _ JWD</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header-logo"></div>
            <div class="header-navbar">

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

RESET CSS html { font-family: 'Open sans', sans-serif; }

body {
    margin: 0px;
}
* {
    display: block;
    text-decoration: none;
}

STYLES CSS

.container {
    width: 100%;
}
.header {
    width: 100%;
    height: 75px;
    background-color: #666666;
    display: block;
    line-height: 75px;
}
.header-logo {
    background-image: url(../images/logo_fullwidth.png);
    background-repeat: no-repeat;
    height: 75px;
}
@media screen and (max-width: 480px) {
    .header-logo {
    background-image:url(../images/logo_mobile.png)
    }
}

Upvotes: 5

Views: 5774

Answers (3)

dwkd
dwkd

Reputation: 2896

This is your culprit

* {
    display: block;
    text-decoration: none;
}

title is part of * (everything)

You may want to be more specific with what displays as a block

I suspect you only need things inside the body tag to display as such

body * {
        display: block;
        text-decoration: none;
    }

Furthermore, I would like to point out that <div> elements do display as blocks by default so you don't need to explicitly declare the display:block property unless you want to override a previously declared display property

Upvotes: 1

Alastair McBain
Alastair McBain

Reputation: 399

Title tags by default are display: none;

By adding a selector for everything, *, to set them to block you've inadvertently asked the browser to display it. Either select the title tag and set it back to none or change your existing selector to be more specific.

However, setting everything to block is not a good idea. There are plenty of tags, such as spans, which you likely would not like to be block elements during later development. As such I would go with making the existing selector more specific.

Upvotes: 2

biziclop
biziclop

Reputation: 14596

You have:

* { display: block; }

<head>
  <title>HOME _ JWD</title>
</head>

Your css implicitly contains this too:

head, title { display: block; }

Do you see what you did? :) If you really want to blockify everything, you could fix it by writing:

body * { display: block; }

Upvotes: 6

Related Questions