Always helps to zero out defaults with
Code:
* {
margin: 0;
padding: 0;
}
Try making your CSS look like this:
Code:
#content {
background:#ffcccc ;
margin : 1px 0 0 0;
height : 700px;
width : 600px;
padding : 0 1px 0 2px;
border-top : 0;
border-right: 0;
border-bottom : 0;
border-left : 5px solid #ff0000;
}
#sidebar {
height : 712px;
width : 246px;
background : #ffcccc url(../media/a_red_b_bas.gif) repeat-y top right;
float : right;
margin: 0 4px 0 0;
}
* {
margin: 0;
padding: 0;
}
#sidebar ul {
color:#ffffff;
margin:0 2px 0 0px;
width:246px;
height:20px;
text-decoration:none;
list-style:circle;
}
#sidebar li {
width:246px;
height:20px;
font-weight:bold;
background:#FF9999;
border-bottom:solid 1px #FF0000;
padding-top:5px;
text-align:center;
text-decoration:none;
list-style:none;
}
.bar {
height : 21%;
width : 246px;
}
.bar ul {
margin:0 0 0 0;
width:248px;
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
text-decoration:none;
list-style:none;
}
.bar li {
width:248px;
height:20px;
}
.bar li li {
width:248px;
height:20px;
}
.bar h3 {
height : 20px;
width : 100%;
background : url(../media/a_red_ba.gif) repeat-x top left;
color : #ffffff;
text-align : center;
padding : 3px 0 0 0;
margin : 1px 0 0 0;
font-family : Arial, Helvetica, sans-serif;
font-weight : 600;
font-size : 1em;
}
Check the CSS validator.
I like the looks of this page - striking.