Welcome to WebmasterWorld Guest from 54.196.248.186

Forum Moderators: incrediBILL

Message Too Old, No Replies

Footer problem with I.E. browser

image in footer dosent dispaly correctly

     

acepro95

7:42 am on Feb 18, 2012 (gmt 0)



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

8:37 am on Feb 18, 2012 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

12:44 pm on Feb 18, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

3:20 pm on Feb 18, 2012 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

Marshall

5:39 pm on Feb 18, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ha, yes of course - well spotted!


I was impressed that I saw it :)

Marshall

acepro95

5:45 pm on Feb 18, 2012 (gmt 0)



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

9:39 pm on Feb 18, 2012 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

10:29 pm on Feb 18, 2012 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



"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

12:02 am on Feb 19, 2012 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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!)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month