1 reply [Last post]
csslover
csslover's picture
Offline
newbie
Minnesota
Last seen: 9 years 37 weeks ago
Minnesota
Timezone: GMT-5
Joined: 2012-05-09
Posts: 1
Points: 2

Hello,

I've been designing a website with Wordpress and began doing testing in different browsers, and discovered, frustratingly, that the main background image of my header is not displaying in IE9, IE8, or IE7 - and most probably, not in IE6 either. I am relatively new to CSS, and cannot figure out what the problem is. I've been searching help topics, and haven't found the answer to my particular issue. I also do not understand the validation's results very well, thus those have not been too helpful.

Thanks in advance!

Here's the link to the site: http://www.godlygirlhood.org/sandbox

Here's the CSS code:

/*
/* =Structure
-------------------------------------------------------------- */
* {margin: 0pt; padding: 0pt; }
body {
	margin: auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background:#351d19;
	line-height:18px;
	background-image: url(<a href="http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/bg-wallpaper_1400px.png" rel="nofollow">http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/bg-wallpaper_1400px.png</a>);
	background-position: top center;
	background-repeat: no-repeat;
}
 
#page {
	display: block;
	width: 1015px;
	background-color:#f2e9b3;
	text-align: left;
	margin: auto;
	padding:0;
	position: relative;
	z-index: 1000;
}
 
#branding {
	width: 1015px;
	height: 559px;
	margin: auto;
	background-color: #f2e9b3;
	background-image: url(<a href="http://godlygirlhood.org/sandbox/wp-content/uploads/2012/01/GG-header_1015px.png" rel="nofollow">http://godlygirlhood.org/sandbox/wp-content/uploads/2012/01/GG-header_1015px.png</a>);
	background-repeat: no-repeat;
}
 
a:link{
	color: #412925;
	text-decoration: underline;
} 
 
#social {
	text-align: right;
	width: 172px;
	float: right;
	margin-top: 335px;
	margin-right: 15px;
}
 
#primary {
	float: left;
	margin: 0 -240px 0 0;
	width: 1015px;
}
#content {
	margin: 0 280px 0 0;
	padding-right: 15px;
	padding-bottom: 40px;
	padding-left: 35px;
	width: 700px;
}
 
.entry-title{
	font-color: #351c18;
	font-size: 22pt;
	font-family: 'Questrial', sans-serif;
	text-shadow: 0px 1px 1px white;
}
 
.entry-title a{
	color: #351c18;
	text-decoration: none;
}
 
#main .widget-area {
	float: right;
	overflow: hidden;
	width: 230px;
	padding-right: 10px;
}
#colophon {
	clear: both;
	display: block;
	width: 1015px;
	padding-top: 20px;
	padding-bottom: 5px;
	text-align: center;
	background-color: #eee099;
	background-image: url(<a href="http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/bg-footer.png" rel="nofollow">http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/bg-footer.png</a>);
	background-position: bottom;
	background-repeat: no-repeat;
	border-top: 1px solid #e4cf73;
	font-size: 8.5pt;
	font-family: 'Questrial', sans-serif;
	text-shadow: 0px 1px 1px white;
	text-transform: uppercase;
}
 
blockquote {
	background:transparent url(<a href="http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/blockquote_2.png" rel="nofollow">http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/blockquote_2.png</a>) no-repeat scroll left top;
	color:#000000;
	font-style:italic;
	margin:0 0 1em;
	min-height:1.5em;
	overflow:auto;
	padding:30px 10px 13px 18px;
}
blockquote p.source {color:#999999; font-size:11px; font-style:normal;}
blockquote cite {margin: 5px 0 0; display: block;}
 
h2 {
	font-family: 'Questrial', sans-serif;
	font-size: 17.5px;
	font-color: #351c18;
}
h3 {
	font-family: 'Questrial', sans-serif;
	font-size: 15.5px;
	font-color: #351c18;
	font-weight: bold;
 
}
 
.widget-title {
	font-family: 'Questrial', sans-serif;
	font-size: 16.5px;
	font-color: #351c18;
	text-transform: uppercase;
	margin-top: 10px;
	margin-bottom: 5px;
	text-shadow: 0px 1px 1px white;
	text-align: center;
}
 
.textwidget {
	margin-top: 15px;
}
 
#secondary {
	background-image: url();
	background-repeat: repeat-y;
}
 
#secondary ul {	
	list-style-type: disc;
	color: #351c18;
}
#secondary li {
	float: none;
	width: auto;
	border-bottom: 1px dashed #fffbdd;
	padding-bottom: 5px;
	list-style-type: disc;
}
 
#secondary ul li a {
	background-image: url(<a href="http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/bullet_7.png" rel="nofollow">http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/bullet_7.png</a>);
	background-repeat: no-repeat;
	background-attachment: initial;
	background-position: left;
	background-origin: initial;
	background-clip: initial;
	background-color: initial;
	padding: 4px 0 4px 15px;
}
 
 
#vslider_optionscontainer {
	padding-bottom: 40px;
	padding-left: 25px;
	width: 725px;
}
 
ol {
	display: block;
	list-style-type: none;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 40px;
}	
 
#text-8 .widget .widget-text {
	padding-right: 8px;
}
 
 
/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content,
.error404 #content {
	margin: 0;
}
 
/* Text meant only for screen readers */
.screen-reader-text,
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
 
/* Alignment */
.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
 
 
/* =Header
-------------------------------------------------------------- */
 
#site-title {
	font-size: 2em;
	font-weight: bold;
	margin: .67em 0;
}
#site-description {
	font-size: 1em;
	font-weight: normal;
	margin: 0 0 1em;
}
 
 
/* =Menu
-------------------------------------------------------------- */
 
#access {
	display: block;
	float: left;
	margin-top: 45px;
	width: 800px;
	padding-left: 298px;
	text-align: left;
	font-family: 'Questrial', sans-serif;
	font-size: 14pt;
	font-color: #f2e9b3;
	text-transform: uppercase;
}
#access ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
#access li {
	float: left;
	position: relative;
}
#access a {
	display: block;
	line-height: 2em;
	padding: 0 1em;
	text-decoration: none;
	color: #f2e9b3;
}
#access ul ul {
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: right;
	position: absolute;
	top: 2em;
	left: 0;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #dedede;
	line-height: 1em;
	padding: .5em .5em .5em 1em;
	width: 10em;
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: none;
	color: #f8f0cc;
}
#access ul ul a:hover {
	background: none;
	color: #f8f0cc;
}
#access ul li:hover > ul {
	display: block;
}
 
 
/* =Content
-------------------------------------------------------------- */
 
.sticky {
}
.entry-meta {
	clear: both;
	display: block;
	margin-top: 5px;
	margin-bottom: 30px;
}
.single-author .entry-meta .byline {
	display: none;
}
 
.entry-content{
	margin-top: 10px;
	padding-top: 3px;
	padding-right: 2px;
	padding-bottom: 10px;
	padding-left: 2px;
}
#content nav {
	display: block;
	overflow: hidden;
}
#content nav .nav-previous {
	float: left;
	width: 50%;
}
#content nav .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
#content #nav-above {
	display: none;
}
.paged #content #nav-above,
.single #content #nav-above {
	display: block;
	padding: 20px;
	font-family: 'Questrial', sans-serif;
	font-size: 15.5px;
	font-color: #351c18;
	text-transform: uppercase;
	margin-bottom: 10px;
 
}
#nav-below {
	margin: 1em 0 0;
	display: block;
	padding: 20px;
	font-family: 'Questrial', sans-serif;
	font-size: 15.5px;
	font-color: #351c18;
	text-transform: uppercase;
}
.page-link {
	clear: both;
	margin: 0 0 1em;
}
.page .edit-link {
	clear: both;
	display: block;
}
 
/* 404 page */
.error404 .widget {
	float: left;
	width: 33%;
}
.error404 .widget .widgettitle,
.error404 .widget ul {
	margin-right: 1em;
}
.error404 .widget_tag_cloud {
	clear: both;
	float: none;
	width: 100%;
}
 
/* Notices */
.post .notice,
.error404 #searchform {
	background: #eee;
	display: block;
	padding: 1em;
}
 
/* Image Attachments */
.image-attachment div.entry-meta {
	float: left;
}
.image-attachment nav {
	float: right;
	margin: 0 0 1em 0;
}
.image-attachment .entry-content {
	clear: both;
}
.image-attachment .entry-content .entry-attachment {
	background: #eee;
	margin: 0 0 1em;
	padding: 1em;
	text-align: center;
}
.image-attachment .entry-content .attachment {
	display: block;
	margin: 0 auto;
	text-align: center;
}
 
/* Aside Posts */
.format-aside .entry-header {
	display: none;
}
.single .format-aside .entry-header {
	display: block;
}
.format-aside .entry-content,
.format-aside .entry-summary {
	padding-top: 1em;
}
.single .format-aside .entry-content,
.single .format-aside .entry-summary {
	padding-top: 0;
}
 
/* Gallery Posts */
.format-gallery .gallery-thumb {
	float: left;
	margin: 0 1em 0 0;
}
 
/* Image Posts */
.format-image .entry-header {
	display: none;
}
.single .format-image .entry-header {
	display: block;
}
.format-image .entry-content,
.format-image .entry-summary {
	padding-top: 1em;
}
.single .format-image .entry-content,
.single .format-image .entry-summary {
	padding-top: 0;
}
 
 
/* =Images
-------------------------------------------------------------- */
 
a img {
	border: none;
}
p img {
	margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img,
.wp-caption {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
img.alignleft {
	margin-right: 1em;
}
img.alignright {
	margin-left: 1em;
}
.wp-caption {
	padding: .5em;
	text-align: center;
}
.wp-caption img {
	margin: .25em;
}
.wp-caption .wp-caption-text {
	margin: .5em;
}
.gallery-caption {
}
.wp-smiley {
	margin: 0;
}
 
 
/* =Forms
-------------------------------------------------------------- */
 
#searchform label {
	display: none;
}
#searchform input#s {
	width: 60%;
}
input[type=text],
input#s {
	margin: 0 1em 0 0;
	width: 60%;
}
textarea {
	width: 80%;
}
 
/* Class for labelling required form items */
.required {
	color: #cc0033;
}
 
 
/* =Comments
-------------------------------------------------------------- */
#comments {
	margin-top: 15px;
	margin-bottom: 15px;
	 -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
 
}
 
 
#comments-title {
	margin-top: 15px;
	margin-bottom: 15px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px white;
}
 
article.comment {
	display: block;
}
 
#reply-title {
	margin-top: 20px;
	margin-bottom: 5px;
}
 
#respond .comment-notes {
	margin-bottom: 15px;
	font-style: italic;
}
 
#respond input[type=text] {
	display: block;
	width: 60%;
	padding: 6px 8px;
	font-family: Georgia, serif;
	font-size: 10.5pt;
	margin-bottom: 12px;
}
 
#respond textarea {
	display: block;
	margin: 0 0 1em;
	width: 80%;
	padding: 6px 8px;
	font-family: Georgia, serif;
	font-size: 10.5pt;
	margin-bottom: 12px;
}
#respond .form-allowed-tags {
	clear: both;
	width: 80%;
}
#respond .form-allowed-tags code {
	display: block;
}
 
#respond .form-submit {
	margin-top: 15px;
}
 
.commentlist ol {
	list-style-type:none;
	margin: 0;
}
 
.commentlist li .avatar {
	background: white;
background-image: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-position-x: initial;
background-position-y: initial;
background-origin: initial;
background-clip: initial;
background-color: white;
float: left;
margin: 0 10px 0 10px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
border: 1px solid #CCC;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
border-image: initial;
}
 
.comment-author cite, .comment-author cite a {
	font-family: 'Questrial', sans-serif;
	font-size: 13pt;
	font-color: #351c18;
	text-shadow: 0px 1px 1px white;
	font-style: normal;
}
 
.reply {
	text-transform: uppercase;
	margin-bottom: 40px;
	float: right;
}
 
.comment-content {
	margin-top: 10px;
	margin-bottom: 35px;
	margin-left: 85px;
	margin-right: 15px;
}
 
#content li.comment {
	background: #FDF3C0;
	margin: 20px;	
	padding: 10px 0;
	border: 1px solid #D0C899;
	width: 650px;
	background-image: url(<a href="http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/bg-wallpaper-copy.png" rel="nofollow">http://godlygirlhood.org/sandbox/wp-content/uploads/2012/02/bg-wallpaper-copy.png</a>);
	background-repeat: no-repeat;
}
 
.children ul {
	padding-left: 50px;
}
 
 
/* =Widgets
-------------------------------------------------------------- */
 
.widget {
	display: block;
}
.widget-area .widget_search {
	overflow: hidden;
}
.widget-area .widget_search input {
	float: left;
}
 
 
/* =Footer
-------------------------------------------------------------- */
 
#colophon {
	margin: auto;
	width: 1015px;
}
 
#site-generator {
	text-shadow: 0px 1px 1px white;
	padding-bottom: 10px;
	padding-right: 20px;
	font-color: #351c18;
	font-size: 8pt;
	font-family: 'Questrial', sans-serif;
	text-shadow: 0px 1px 1px white;
	text-transform: uppercase;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 6 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Fixed?

Did you fix it? I got an ok rendering in IE7-9.

You do have html errors, though, that need to be fixed. IE has been less tolerant of errors than other browsers (a Good ThingĀ® imo). Start at the top of the error list and fix in order as you can. Often, there is an error cascade that goes away once the initial problem is fixed. Errors that you don't understand, bring back to the forum. We'll try to help you with them.

WP templates can be a pain because they try to be so generic and cover all the bases. That can make finding the source of your woes a search for a small sharp object in a large pile of grain detritus.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.