Welcome to WebmasterWorld Guest from 54.163.166.22

Forum Moderators: incrediBILL

Message Too Old, No Replies

Footer problem with I.E. browser

image in footer dosent dispaly correctly

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

New User

joined:Feb 18, 2012
posts: 2
votes: 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
8:37 am on Feb 18, 2012 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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?)
12:44 pm on Feb 18, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2179
votes: 19


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
3:20 pm on Feb 18, 2012 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


Ha, yes of course - well spotted! :) (And I meant to write "repeat-x", not "repeat-y"!). I obviously wasn't awake this morning!
5:39 pm on Feb 18, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2179
votes: 19


Ha, yes of course - well spotted!


I was impressed that I saw it :)

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

New User

joined:Feb 18, 2012
posts: 2
votes: 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}
9:39 pm on Feb 18, 2012 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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.
10:29 pm on Feb 18, 2012 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


"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.
12:02 am on Feb 19, 2012 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members