Review.#25 - Navigation bar error. Why is the top cut off?


#1


I've gotten through the lessons without any errors but looking at the result of the Review chapter, my navigation bar seems to be a bit cut off at the top. I think the margin-top in #23 saying to set it to -10px makes it cut off. I've set my browser zoom to default and everything and doesn't seem to be a browser issue.

Is it just supposed to look like this?



body {
	background-color: #b7d1c4
}

h2 {
	font-family: Verdana;
	font-weight: bold;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 25px;
	color: #acd1b2;
}

img {
	height: 170px;
	width: 170px;
	box-shadow: rgba(0,0,0,0.2) 10px 10px;

}

#navbar {
	/*Add your CSS here!*/
	
	left:50%;
	margin-left:-254px;
	position:fixed;
	margin-top:-10px;
}

#header {
	position: relative;
	top: -10px;
	background-color: #3c4543;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

ul{
	list-style-type: none;
	position:fixed;
	margin:-10px;
}

li {
	/*Add your CSS here!*/
	
	border: 2px solid #000000;
	font-family: Futura, Tahoma, sans-serif;
	color: #ffffff;
	border-radius: 5px 5px;
	background-color: #cc0323;
	display:inline;
	padding:5px;
}

#left{
	/*Add your CSS here!*/
	float:left;
	width:45%
}

p {
	font-family: Tahoma;
	font-size: 1em;
}

#right{
	/*Add your CSS here!*/
	float:right;
	width:45%
}

table {
	border: #000000 1px solid;
	background-color: #acd1b2;
	float: right;
	margin-right: 10px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

td {
	height: 75px;
	width: 75px;
}

td img {
	height: 75px;
	width: 75px;
	box-shadow: none;
}

th {
	font-family: Verdana;
	font-size: 1em;
	font-weight: normal;
	color: #3c4543
}

#bottom_left{
	border-bottom-left-radius: 15px;
}

#bottom_right{
	border-bottom-right-radius: 15px;
}

#footer{
	/*Add your CSS here!*/
	
	position: relative;
	bottom: -20px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	height: 75px;
	background-color: #3c4543;
	clear: both;
}

#button{
	border: 2px solid #000000;
	float:left;
	position: relative;
	left: 229px;
	bottom: -20px;
	border-radius: 5px;
	background-color: #cc0323;
	height: 30px;
	width: 150px;
	
}

#button p{
	position: relative;
	bottom: 10px;
	font-size: 0.8em;
	color: #acd1b2;
	text-align: center;
}

.bold{
	font-family: tahoma;
	font-weight: bold;
	font-size: 1.2em;
	font-variant: small-caps;
	color: #ffffff;
}


#2

because of margin-top:-10px;


#3

I figured that was the problem, but that is the instructions in the lesson. Trying to change the px brings up an error. So is it just how it's supposed to look?


#4

i know, i personally think this instructions are wrong. Just pass the exercise, and know you can do better


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.