Daniel Adams Daniel Adams - 9 days ago 6
CSS Question

My CSS isn't being applied to elements with IDs

I am trying to have a background box behind my text and I cant get it to work. I have done this before and it worked fine, but I can't see where I have gone wrong this time. I have checked to make sure I have linked the CSS to the HTML correctly by changing the

background-color
, which worked.

HTML:

<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body>
<h2><center><a href="Digital Portfolio.html"><font color="orange" size="7">Navigation</font></a></center></h2>
<center>
<div id="1"><a href="The Online World.html">The Online World</a></div>
<div id="2"><p><a href="Animation.html">Animation</a></p></div>
<div id="3"><p><a href="Creating a app.html">Creating an app</a></p></div>
<div id="4"><p><a href="minigame.html">Mini Game</a></p></div>
<div id="5"><p><a href="Gallery.html">Gallery</a></p></div>
<div id="6"><p><a href="Be Creative.html">Be Creative</a></p></div>
<div id="7"><p><a href="About me.html">About me</a></p></div>
</center>
</body>
</html>


CSS:

body {
color: black;
background-color: black;
margin: 0;
}

#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}

Answer

While ids can technically be numbers (in HTML5), it's got weird support in browsers because of backwards compatibility with the HTML4 spec.

ids should start with a letter for compatibility.

<div id="a1"><a href="The Online World.html">The Online World</a></div>

and

#a1{
    width: 7%;
    margin: 50px auto 50px auto;
    padding: 2%;
    background-color: white;
    box-shadow: 0px 0px 1px rgba(0,0,0,.90);
    position: relative;
}

works as expected.

Comments