5. Use classes to add class... what am I doing wrong?


#1

I keep getting the error code: "Opps, try again. Did you remember to give you .friend class a border of 2px dashed #008000?"

I can't figure out what I'm doing wrong to save my life!

HTML

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<div class="friend" id="best_friend"><p>Rodger</p></div>
		<div class="friend"><p>Roy</p></div>
		<div class="family"><p>Ron</p></div>
		<div class="enemy"><p>Ray</p></div>
		<div class="enemy" id="archnemesis"><p>Rida</p></div>
	</body>
</html>

CSS:

div {
display: inline-block;
margin-left: 5px;
margin-top: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px;
text-align: center;
position: relative;
}

best_friend {

border: 4px solid #008000;

}
.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}

archnemesis {

border: 4px solid #FF0000;

}


#2

Your best_friend and archnemesis overwrite your friend and enemy, causing problems in the checking script


#3

How do I correct the problem? I don't understand how "best_friend" and "archnemesis" are overwriting "friend" and "enemy"


#4

Well, some of your divs to both have a class and id, the id styling will be applied, so some of your friend and enemy div's have the wrong border. You could turn the #best_friend and #archnemesis into a comment


#5

I just removed the class from those div lines and left the IDs and everything worked. Thanks!


#6

That will also work.