Footer problem with I.E. browser

image in footer dosent dispaly correctly

[acepro95]

newbie issue
footer displays correctly in chrome & ff but it doesn't in ie. The footer image does not repeat across page horizontally completely.

[div id="page-bot" class="c28" style="background-image:url('images/footer_bg.jpg');">
<div id="footer" class="c28" style="background-image:url('images/footer_bg.jpg');">
<p class="c22"><a href="#"><span class="c21"><img src="images/flogo.png" width="210" height="78" alt="logo" border="none" align="left"></span></a></p>
<div class="text2">
<p><strong><span class="c21"><br></span></strong></p>
<p class="c27"><strong><span class="c23"> ACME INC. &copy; 2012 ALL RIGHTS RESERVED</span><span class="c25"><span class="c19"> | </span><span class="c24">WEB DESIGN BY</span></span></strong> <strong><span class="c23"><a href="http://www.example.com" class="c5" target="_blank">ACME</a></span><span class="c26"><o:p></o:p></span></strong></p>
</div>
<div class="clr"></div>

doctype is HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN

thx

[penders]

If you are wanting a horizontally repeating background shouldn't you be setting

background-repeat:repeat-y;

somewhere? (Maybe you are if it's working in Chrome and FF?)

[Marshall]

If you are wanting a horizontally repeating background shouldn't you be setting background-repeat:repeat-y; somewhere?

Not necessary. Repeating along 'x' and 'y' is default behavior. repeat-x and repeat-y is only needed if you do not want it to repeat in the other direction.

Marshall

[penders]

Ha, yes of course - well spotted! :) (And I meant to write "repeat-x", not "repeat-y"!). I obviously wasn't awake this morning!

[Marshall]

Ha, yes of course - well spotted!

I was impressed that I saw it :)

Marshall

[acepro95]

here is another area of the page where the footer is refrenced. I hope this helps

body {
background-color: #F8F8F8;
}
div.c28 {background-image:url('images/footer_bg.jpg');background-repeat: yes-repeat}
p.c27 {text-align: center}
span.c26 {font-family: Arial; font-size: 10pt}
span.c25 {font-family: Arial}
span.c24 {font-family:Arial,sans-serif; font-size:10pt; color:white;}
span.c23 {color: white; font-family: Arial; font-size: 10pt}
p.c22 {margin-left:25pt;}
span.c21 {color: white}
td.c20 {background-color: #FAF8F9; background-repeat: no-repeat}

[penders]

div.c28 {background-image:url('images/footer_bg.jpg');background-repeat: yes-repeat}

"yes-repeat" is an invalid value. The correct value is simply "repeat". But as Marshall correctly points out, this is actually the default behaviour, so you perhaps don't need to specify the background-repeat rule at all, unless you need to override another rule?

If the CSS is invalid then browsers can potentially behave differently, which appears to be what is happening here.

[penders]

"yes-repeat" is an invalid value.

Actually, I'm not convinced that this is the source of your problem!? I just did a quick test and both Chrome and IE (versions 6-9) correctly ignore this value.

[div id="page-bot" class="c28" style="background-image:url('images/footer_bg.jpg');">

I've just noticed, but maybe this is a typo(?), your opening DIV tag is malformed.

[penders]

I just did a quick test and both Chrome and IE (versions 6-9) correctly ignore this value.

Sorry, correction (again!)... "IE8+ correctly ignores this value. However, IE6-7 appear to treat 'yes-repeat' like 'repeat' and results in a repeating background!?" - although I still don't think this helps you much.

(I really should get more sleep!)