...

View Full Version : Tiling background not working in IE7, works everywhere else.



edoky145
05-09-2007, 10:00 PM
Hello everyone,

So i went to great lengths to figure out how to tile a background in my main container div so that I could tile a background horizontally in the body tag and then tile a background vertically in the container div.

I did this using a the code

html {height: 100%;} /* this is key for a centered fixed width layout */

body {
background: url(bg_inside.gif) repeat-x top #969A9C;
margin:0;
padding:0;
height:100%; /* this is the key! */
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color: #333333;
}

#container {
position:relative;
margin-left:auto;
margin-right:auto;
width: 852px;
height:100%;
background: url(bg_container.gif) repeat-y center;
}



I got it to work for the most part and it's look pretty good in IE6 and Firefox, safari. BUT it's not working in IE7.

http://www.aramiinteractive.com/elliott/demo/

I can't figure out either why the background stops tiling where it stops tiling. You would figure it would at least stop tiling at the end of the content, ie the end of the footer, but it's not doing that either. I would understand if the div tag was absolutely positioned but it's not it's relatively positioned.

Anyhelp with this would be greatly appreciated!

thanks so much.

koyama
05-10-2007, 12:38 AM
I can't figure out either why the background stops tiling where it stops tiling. You would figure it would at least stop tiling at the end of the content, ie the end of the footer, but it's not doing that either. I would understand if the div tag was absolutely positioned but it's not it's relatively positioned.
I don't see the issue in IE7. Both background images are tiling fine. No big difference between IE7 and Firefox 2 rendering. Can you provide a screen shot of what you are seeing?

edoky145
05-10-2007, 06:16 PM
Really you don't see the issue? I have posted a screen shot here

http://www.aramiinteractive.com/elliott/demo/Elliottscreen.jpg

Is it possible you could send me a screenshot of what you are seeing in IE7?

thanks
eddie

danielwarner
05-10-2007, 06:35 PM
i dont know if this is going to fix anything but to avoid errors i used to get i used to forget compiling all the background elements into one tag and now use the full -color, -position, -image etc... that might fix it.

koyama
05-10-2007, 10:05 PM
Is it possible you could send me a screenshot of what you are seeing in IE7?
My IE7 screen shot is here (http://i173.photobucket.com/albums/w54/koyama_01/arami_screenshot_ie7.png)

The link you posted to your screen shot is not working.

edoky145
05-11-2007, 08:53 PM
Hello again,

thanks for all the help koyama. I can't understand why it was only an issue on my coworkers laptop. strange.

I asked a few other people to look at if for me in IE7 and they said it looked fine. WTF?

thanks again

_Aerospace_Eng_
05-12-2007, 02:08 AM
Hello again,

thanks for all the help koyama. I can't understand why it was only an issue on my coworkers laptop. strange.

I asked a few other people to look at if for me in IE7 and they said it looked fine. WTF?

thanks again

Were any of them on Windows Vista? People have said IE7 on XP and IE7 on Vista have slight differences. This could be one of them. If thats the case then the background position in the background declaration is missing left, right, or center though default is top left. You have just top in there. No point having that. That could also be the issue.

edoky145
05-18-2007, 08:32 PM
Were any of them on Windows Vista? People have said IE7 on XP and IE7 on Vista have slight differences. This could be one of them. If thats the case then the background position in the background declaration is missing left, right, or center though default is top left. You have just top in there. No point having that. That could also be the issue.

Nobody i even know has windows vista yet haha. So i couldn't really be sure if that is a difference between them. Thanks for the tip. Must have left that in there by accident.

edoky145
05-18-2007, 08:37 PM
So i've finally managed to recreate the problem I was having. It seems that if all the content fits on the page (no scroll bar) then the background image tiles fine in all browsers. However, if the content does go beneath the fold and the window requires a scrollbar then the tile does not always tile correctly. Here is what I have found out.

1. IE6 - everything works fine (for once!)

2. Firefox and IE7 - the background image will only tile as far as the bottom of the fold. Once you scroll down beneath the fold then you can see that is where the background stops scrolling. For example on the following page. The content is a little longer.

I guess the "100%" only accounts for 100% of the current screen for those browsers for some reason and not anything past the fold.

http://www.aramiinteractive.com/elliott/demo/quick_quote_request.htm

I've run out of things that i can try. Any suggestions?

Thanks for all the help.

_Aerospace_Eng_
05-18-2007, 08:47 PM
Use min-height:100%; instead of height:100%; on #container. You will need to give a height of 100% to IE6 since it doesn't support min-height.

/*targets IE6 and below and hides from IE Mac\*/
* html #container {
height:100%;
}
/*end fix*/
Some people will say not to use the above because it breaks in IE7 but in this case we aren't even trying to target IE7 so why not use it?

edoky145
05-18-2007, 09:15 PM
Hmmm this worked. But created the reverse problem.

For the pages that don't require the scroll bar ( ie no content below the fold ) now the background doesn't tile all the way to the bottom of the page.

thanks for the effort though!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum