Take away the padding height from the div height you currently have ;).
It's just the way the CSS is programmed to behave.
Ty rep, but now i have another prob, i make the margin of my top bar 0px from the top, and it stays where it is. Here's the code
<!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>
<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.style1 {
font-family: Verdana;
font-size: 11px;
color: #FFFFFF;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
body {
text-align: center;
background-image:;
}
#container {
width: 950px;
height: 38px;
left: 50px;
margin-top: 0px;
margin-left: 30px;
}
#top_bar {
background-image: url(images/top_bar.PNG);
height: 24px;
width: 950px;
float-top: 0px;
padding-top: 14px;
margin: 0px;
}
#banner {
background:url(images/banner1.PNG);
width: 950px;
height: 134px;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="style1" id="top_bar">This website is best viewed in <a href="http://www.mozilla.com/en-US/firefox/">Mozilla Firefox</a>.</div>
<div id="banner">
<p> </p>
</div>
</div>
</body>
</html>