PDA

View Full Version : Problems With My Css Code


SLUGER
03-01-2010, 02:02 AM
Hello,
I'm wondering if someone might be able to help me with some problems I have with my CSS code. If you visit www.bmwheadlightrepairs.com (http://www.bmwheadlightrepairs.com) you will see some white spaces below and beside the navigation column- I want these spaces to be black. I am using Dreamweaver 8. Below is a copy of my CSS code. Thanks for any help.

/* CSS Document */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
background: #000000;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100.01%; /*governs colour outside my page*/
color:#000000; /*governs colour of p text in content sections*/
text-align: center;
background: #000000;
}
#wrapper {
width: 767px; /*governs colour around 'p' text*/
margin:10px auto;
border: solid #000000 1px; /*governs border around banner (possibly whole page)*/
text-align:left;
background: #000000 url(wrapper2_bg.gif) repeat-y;
}
#banner {
height: 110px;
background-image: url(repairs banner.jpg);
background: #000000 no-repeat;
}

#leftcol #nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 80%;
border: 1px solid #000000;/*this adds a second line to the bottom of the nav, if you prefer a single line you can remove it by uncommenting the other properties and commenting out this one. I think it gives a nice raised effect, the choice is your's :)*/
background: #000000;
color: #CCFF66;
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;*/
}

#leftcol #nav ul li {
padding: 0;
margin: 0;
background: #000000;
}
#leftcol #nav ul li a{
border-bottom: 1px solid #000000;
color: #000000;
display: block;
padding: 0px 0 6px 4px;
text-decoration: none;
height: 1%;
background: #FFCC00;
}

#leftcol #nav a:hover, #leftcol #nav a:focus {
background-color: #0033CC; /*colour of button when hovered over*/
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
color: #CCFF66;
}

#content{
margin-left: 128px; /*governs the width of the navigation column*/
width: 620px; /*governs the width of the paragraph text area*/
background: #ffffff;
}
#content p{
font-size: 80%;
margin: 20px;
background: #000000;
}
#content h1{
font-size: 130%;
color: #FFFFFF;
padding: 0;
margin: 20px;
}
#content h2{
font-size: 110%;
color: #FFFFFF;
padding: 0;
margin: /*100px 0 0*/ 20px;
}
.leftimage{
float: left;
margin-right: 10px;
border: 1px solid #000000;
}
.rightimage{
margin-bottom: 20px;
float: right;
margin-left: 15px;
border: 1px solid #000000;
width: 170px;
}
/*.clearit{
clear: both;
background-color:#00FF66;
width: 200px;
}*/

#footer{
border-top: 1px solid #000000;
background-color: #003366;
color: #FFFFFF;
clear: both;
}
#footer p {
font-size: 70%;
padding: 3px;
}
#leftcol{
margin-left: 1px;
margin-top: 0px;
width: 135px; /*governs the width of the navigation buttons*/
margin-bottom: 20px;
float: left;
background: #000000;


}
#content p.right{
float: right;
}
.container{
width: auto;
float:left;
background: #000000;
color: #000000;
}

edbr
03-01-2010, 02:27 AM
as far as i can see its caused by the image in the wrapper

SLUGER
03-01-2010, 03:54 AM
Thanks edbr- Brilliant!! Removal of the image in the wrapper solved the problem.