Well I cant seem to figure out what the problem is. Here is all my code. Hope you guys can figure this one out.
HTML code
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
About Me
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
My Services
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
My Tools
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Now here is the CSS
/* CSS Reset */
* { margin: 0 auto; padding: 0;
outline: 0;
border:none;
list-style-type: none;
}
body {
background:url(images/bg.jpg) repeat-x;
font-family: Arial, Helvetica, sans-serif;
}
#container {
width: 960px;
margin: 0 auto;
}
#header {
position:relative;
width: 100%;
bottom: 6px;
}
#header h1 {
float:left;
width:365px;
height:115px;
margin-top: 35px;
}
#header h1 a {
height: 100%;
width: 100%;
}
#header ul li h6 {
font-size: 11px;
}
#nav {
clear: both;
height: 30px;
width: 100%;
}
#nav ul {
position: absolute;
right: 180px;
top: 20px;
}
#nav ul li {
display: inline;
float: left;
}
#nav ul li a {
color: white;
display: inline;
text-decoration: none;
font-size: 16px;
font-weight: normal;
font-family: calibri, georgia, garamond, arial;
text-transform: uppercase;
text-align: right;
float: left;
padding: 10px;
}
#nav li a span {
line-height: 28px;
height: 100%;
}
#nav li a:hover, #nav li {
color: #ffc000;
cursor: pointer;
text-decoration: none;
}
#featured {
padding: 10px;
height: 340px;
width: 940px;
border:1px dashed;
color: #ffe5c4;
background-color: #562e00;
}
#featured ul {
}
#featured ul li {
float: left;
display:block;
width: 630px;
}
#featured ul li a {
display: block;
height: 350px;
}
#featured ul li.ss1 img a {
background: url(/images/featured.jpg)
}
form#quote {
background: #ce9426;
background-image: -webkit gradient(
linear,
left top, left bottom,
from(#b37725), to (#e4ac27)
);
padding: 20px;
float: right;
width: 260px;
height: 300px;
}
form#quote h2 {
font: normal; "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}
form#quote label {
color: #ffffff;
font-size: 12px;
font-family: arial, verdana, georgia;
float: left;
width: 100%;
padding:5px;
}
form#quote input, form#quote textarea {
background-color: #303030;
color: white;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 7px 8px;
padding: 10px;
width: 240px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 4px 0 -6px #c4c4c4;
-moz-box-shadow:inset 0 0 6px #7a7a7a;
-webkit-box-shadow:inset 0 0 6px #7a7a7a;
box-shadow:inset 0 0 6px #7a7a7a;
resize: none;
}
form#quote textarea {
height: 50px;
}
form#quote input.btn {
width: auto;
border: none;
padding: 1px;
margin-top: 0px;
}
#content {
font-size: 12px;
list-style: none;
}
#content .col {
float: right;
width: 258px;
background: url(./images/col-bg.jpg) repeat-x;
height: 193px;
border: 1px solid #CCC;
padding: 10px;
margin-right: 830px;
margin-top: -225px;
}
#content .col h2 {
font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #b47825;
text-decoration: none;
}
#content .col h2 span {
color: #2f2f2f;
}
#content .col img {
border:1px opacity: 0.5; dashed; #d8d8d8;
padding: 2px;
float: right;
}
#content .col p {
line-height: 17px;
}
#content .col.noMargin {
margin-right: 510px;
}
#content .col.fr {
margin-right: 190px;
margin-top: -225px;
}
#twitter {
float:right;
position: absolute;
margin: -508 60 50 1025;
}
#facebook {
float:right;
position: relative;
margin-right: 184px;
margin-top: -597px;
}
textarea {
width: 200px;
max-width: 240px;
min-width: 240px;
height: 200px;
min-height: 45px;
max-height: 45px;
#footer {
clear: both;
background: url (/images/footer.jpg)
height: 100px;
width: 100%;
margin-top: 140px;
}
#footerContainer {
margin: 0 auto 0;
width: 960px;
font-size: 12px;
color: #ddd;
padding-top: 20px;
position: relative;
}
#footerContainer p {
margin: 8px 0 8px;
}
#footerContainer a {
color: #ddd;
text-decoration: none;
}
#footerContainer a:hover {
text-decoration: underline;
}
form#newsletter {
position: absolute;
right: 0;
top: 20px;
width: 300px;
}
form#newsletter label {
font-weight: bold;
color: #fff;
}
form#newsletter input {
background-color: #fff;
border:1px solid #ddd;
color: #666;
float: left;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 0 0;
padding: 8px;
width: 190px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
