...

View Full Version : Background images not showing in IE??



cozzy1984
10-26-2009, 07:40 PM
Hi, I'm starting to mess around with a design for wordpress and have started to make the html first, yet for some reason the background images arent showing in Internet Explorer. They work with everything else, any ideas?


<div id="container">
<div id="header">

<div id="header_title">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Who's Who</a></li>
<li><a href="#">What's On</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- End header_title -->
</div><!-- End header -->

<div id="wrapper">
<div id="main_content">
<div class="post">
<div class="date">
<div class="day">21</div><div class="month">AUG</div><div class="year">2009</div>
</div><!-- End date -->

<div class="post_content">

</div><!-- End post_content -->

</div><!-- End post -->



</div><!-- End main_content -->

<div id="footer">

</div><!-- End footer -->


</div><!-- End wrapper -->
</div><!-- End container -->

CSS is


/* ---
Author: Aaron Cosgrove
--- */

/* --- CSS RESET --- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul { list-style: none; }
:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; }
a{text-decoration:none; outline:none;}
/* --- END OF CSS RESET --- */


body{
margin: 0 auto;
width:100%;
font-family:"National", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:1.5em;
background:#2D2B25;
color:#2A2821;
}

#container{width:100%;}

#header{ width:100%; height: 280px; margin:0 auto; background:url('../images/head.jpg');}
#header_title{ background:url('../images/header_2.jpg') no-repeat; width:600px; height:280px; margin:0 auto; text-align:center;}

ul#nav{ float:left; margin:200px 0 0 5px; height:41px; line-height:41px; width:100%;}
ul#nav li{float:left; display:block; text-align:center; font-size:16px; color: #fff; font-weight:bold; font-family: Verdana, sans-serif;}
#nav a{color:#fff; display:block; padding:0 10px;}
#nav a:hover{background:#8B4543;}

#wrapper{ width:950px; margin: 0 auto; background:url('../images/top.gif')no-repeat; overflow:hidden;}
#main_content{ background:url('../images/middle.gif')repeat-y; width:950px; height:400px; margin-top:30px;}
#footer{ background:url('../images/footer.jpg')no-repeat; width:950px; height:375px;}

.post{width:646px; height:200px;}

.date{background:url('../images/date.gif'); width:109px; height:35px; float:left;}
.day{font-size:30px; font-family: Arial; font-weight:bold; border-right:2px solid #501B1A; padding: 0 2px 0 10px; float:left; line-height:35px;}
.month{font-size:14px; font-family: Arial; font-weight:bold; padding: 0 5px; float:left; line-height:17px;}
.year{font-size:14px; font-family: Arial; font-weight:bold; padding: 0 5px; float:left; line-height:18px;}

.post_content{ width:537px; height:200px; float:left;}

#test{ width:950px; margin: 0 auto; background:url('../images/footer.jpg')no-repeat; height:30px;}

you can see it at http://www.stcolumbasportadown.co.uk/Test/

SB65
10-26-2009, 07:59 PM
In your css you have:


#wrapper{ width:950px; margin: 0 auto; background:url('../images/top.gif')no-repeat; overflow:hidden;}
#main_content{ background:url('../images/middle.gif')repeat-y; width:950px; height:400px; margin-top:30px;}
#footer{ background:url('../images/footer.jpg')no-repeat; width:950px; height:375px;

In all of these you need a space after the bracket containing the url of the image before the repeat statement. IE doesn't like the absence, everything else seems to accommodate it.

Excavator
10-26-2009, 08:04 PM
That's kind of funny, the validator doesn't mind the lack of a space there at all.

SB65
10-26-2009, 08:05 PM
Yeah, another IE "feature". Same in IE7 as well...haven't tried IE8.

Excavator
10-26-2009, 08:06 PM
Yes, IE8 too. I edited my earlier post.:o

cozzy1984
10-26-2009, 09:15 PM
In your css you have:


#wrapper{ width:950px; margin: 0 auto; background:url('../images/top.gif')no-repeat; overflow:hidden;}
#main_content{ background:url('../images/middle.gif')repeat-y; width:950px; height:400px; margin-top:30px;}
#footer{ background:url('../images/footer.jpg')no-repeat; width:950px; height:375px;

In all of these you need a space after the bracket containing the url of the image before the repeat statement. IE doesn't like the absence, everything else seems to accommodate it.

Something so simple. Didnt even notice i hadn't put a space after it in the first place!!

Cheers mate.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum