sdotbrucatoI've been designing a theme locally, using plain old html/css. Everything displays properly in all browsers.
Now when I brought everything to Wordpress, only some of the images are displaying properly, basically the background images.
As you see, locally I have navigation links, a separator in the middle banner, and H1 images in the content area.
[IMG]http://i14.photobucket.com/albums/a307/d3c1us/Picture3.png[/IMG]
On the Wordpress version I have none of that, but the other images are appearing.
[IMG]http://i14.photobucket.com/albums/a307/d3c1us/Picture3.png[/IMG]
Ive included my CSS, and bolded the sections that arent appearing.
body {
background: #000 url(img/background.jpg) no-repeat center top;
}
#wrapper {
margin: 0 auto;
width: 740px;
}
<strong>.hrintro {
background: url(img/hrintro.gif) no-repeat center center;
display: block;
height: 5px;
margin: 1em auto .7em;
width: 99px;
}</strong>
.hr {
background: url(img/hr.gif) no-repeat center center;
display: block;
height: 5px;
margin: 1em auto;
width: 99px;
}
.first {
margin-right: .2em;
}
/* defining floating element */
.first,
#nav li,
#extra,
#content,
#main
{
float: left;
}
#credits,
.up {
float: right;
}
#intro,
#footer {
clear: both;
}
/* Header */
h1 {
background: url(img/h1.jpg) no-repeat left top;
height: 166px;
margin-top: 18px;
}
/* Site navigation */
#nav {
background-image: url(img/nav.jpg);
height: 71px;
}
#nav a {
display: block;
height: 45px;
overflow: hidden;
}
<em>#home a {
background: url(img/home.jpg) no-repeat left top;
margin-left: 230px;
width: 71px;
}
#home a:hover {
background: url(img/home.jpg) no-repeat left bottom;
}
#homeh a {
background: url(img/home.jpg) no-repeat left bottom;
margin-left: 230px;
width: 71px;
}
#folio a {
background: url(img/portfolio.jpg) no-repeat left top;
margin-left: 20px;
width: 103px;
}
#folio a:hover {
background: url(img/portfolio.jpg) left bottom;
}
#folioh a {
background: url(img/portfolio.jpg) no-repeat left bottom;
margin-left: 20px;
width: 103px;
}
#contac a {
background: url(img/contac.jpg) no-repeat left top;
margin-left: 16px;
width: 69px;
}
#contac a:hover {
background: url(img/contac.jpg) no-repeat left bottom;
}
/* end nav */</em>
/* intro banner section */
#intro {
background: #68221a url(img/introback.jpg) repeat-y left top;
color: #f0eedf;
padding: 3px 0;
text-shadow: #3f0a0a 0 1px 3px;
}
#intro h2 {
background: url(img/introtop.jpg) no-repeat left top;
padding: 20px 20px 0 20px;
}
#intro p {
background: url(img/introbott.jpg) no-repeat left bottom;
padding: 0 20px 20px 20px;
}
#intro ul {
background: url(img/introbott.jpg) no-repeat left bottom;
padding: 0 20px 20px 20px;
}
#intro a {
border-bottom: 1px dotted #b27868;
color: #f0eedf;
}
#intro a:hover {
background: url(img/opacity.png) repeat;
color: #fff;
}
/* end intro */
#extra {
background:white url(img/backmain.jpg) repeat-y center top;
}
#rcborder {
padding: 0 3px;
border-left: 1px solid #c0beac;
border-right: 1px solid #c0beac;
}
#content {
background: url(img/mainbottom.jpg) no-repeat center bottom;
color: #474642;
padding: 20px 25px 40px;
text-shadow: #d6d5ca 0 1px 4px;
}
#content a {
color: #828079;
}
#content a:hover {
color: black;
}
#content h2, #content h3 {
margin-bottom: 1em;
margin-top: .2em;
}
/* Main column */
#main {
width: 690px;
}
#about {
margin-bottom: 3em;
}
#about h2 {
background: url(img/about.gif) no-repeat left top;
height: 31px;
width: 515px;
}
#contact h2 {
background: url(img/contact.gif) no-repeat left top;
height: 31px;
width: 515px;
}
/* Footer */
#footer {
background-color: #000;
color: #908f86;
height: 4em;
margin-bottom: 3em;
padding-top: .5em;
}
#footer a {
border-bottom: 1px dashed #484944;
color: #908f86;
}
#footer a:hover {
color: #f0eedf;
}
#secnav li {
display: inline;
margin-right: .5em;
}
<strong>#apple {
background: url(img/apple.gif) no-repeat right center;
margin-bottom: 1em;
padding-top: 2px;
padding-right: 18px;
margin-top: .2em;
}</strong>Any help would be greatly appreciated.
