Take a look at the attached files and tell me why the background isn't positioned correctly.
Thanx.2 problems:
1) image is bigger than content area
2) background definition in #cont should be:
background: #fff url(../gfx/background.jpg) center center no-repeat;Interesting.
The background image being bigger, must be because of the borders, right?
According to W3 specs, isn't 50% 50% the same as center center?
Thanx.that wasn't the problem, i just use center because i like it better. the problem was the "fixed" position.
#cont is 700x450, the exact same as the image, thus centering really doesn't do anythingHmm...
Now I have another problem.
I have the div set to scroll based on length of content, but when it does, the image is now in the middle of the scroll instead of fixed at the top and not moving (in IE).
How do I fix that?
Thanx.Originally posted by stmasi
Hmm...
Now I have another problem.
I have the div set to scroll based on length of content, but when it does, the image is now in the middle of the scroll instead of fixed at the top and not moving (in IE).
How do I fix that?
Thanx.
Try this:
background: #fff url(../gfx/background.jpg) no-repeat fixed top left;Thanx...
But...
Is there a fix for those of us without the "helpful" hand of server-side assistants?
Thanx.you're going to have to use a little hack to get this to work right in IE and FF. Here it is:
#cont
{
background: #fff url(../gfx/background.jpg) center center no-repeat !important;
background: #fff url(../gfx/background.jpg) top left fixed;
height: 450px;
margin: 0;
overflow: auto;
padding: 0;
text-align: justify;
}Cool!
It works!!!
Thanx!!!!!
glad to helpWait a minute.
Now, when I use Netscape, and area overflows, as I scroll down, the background image moves upward and at the same time, underneath, is another background image that is fixed in place.
Huh?
Thanx.say what? got a screen shot? i don't think its possible that netscape is applying both rules, so i'm not quite sure whats happening here... what version of NS?Can't get a screenshot, sorry. But I can tell you that it is Netscape 7.1, their free Download .
Thanx.Okay, I have a screen shot now, but it's animated and even when it's zipped up, it's still almost 2MB. I've attached it to my test page so people can Download it and take a look...
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi">http://www.geocities.com/stmasi</a><!-- m -->
Let me know what you think.
Thanx.I think...
have you got a zip of your files as you are using to get that interesting effect?
Here they be...
Thanx.Well I've dropped in some fake latin and it works fine for me in
from 'about' option
Netscape 7.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)
and IE6.
Either they've updated the Download between one of us Download ing it or your graphics card is screwing up. try rebooting and opening it as the first file you open
Well...
It simply cannot be the graphics card as this problem (for lack of a better word) is occuring on five different workstations with five different video cards. These are the only ones I'm testing with.
Thanx.
P.S. My Netscape is...
Netscape 7.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)
Only having this problem in Netscape...works fine on EVERY other browser.LOL
What OS?Unfortunately, all machines I'm testing with are Windows XP Professional.
Thanx.I'm on XP home.
Try looking at the page I'm using: <!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/demo/stmasi/Here's">http://www.emdevelopments.co.uk/demo/stmasi/Here's</a><!-- m --> what I see under said version of Netscape (all other browsers just fine):
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasithis">http://www.geocities.com/stmasithis</a><!-- m --> is really wierd...
this is from XP Pro with NS 7.1
screenshot 1 (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/sample/stmasi1.jpg">http://www.medford.k12.or.us/sample/stmasi1.jpg</a><!-- m -->): this is what it looked like initially.
screenshot 2 (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/sample/stmasi2.jpg">http://www.medford.k12.or.us/sample/stmasi2.jpg</a><!-- m -->): this is what it looked like when the window was vertically resised.
not sure what is causing this though...
NOTE: screenshots are 150kb each, may be long loadsFinally!!!
Someone else is seeing what I was seeing! I thought I was going to have to check myself in somewhere.
Whew!!!
So...what the heck is causing that?!
Thanx.I still can't figure this darn thing out!
I've even gone as far as deleting the files completely and working over from scratch. Still get the same results.
Any other ideas out there?
Thanx.So...
Everyone else is just as stumped as me, eh?
Good...I don't feel so bad about almost having a stroke over this one. No matter how many times I re-try this darn thing, I get the same two stupid results.
I truly am attempting to embrace CSS and all the wonders therein, but sometimes I just want to walk out to my shed, get my 40# sledgehammer and let loose on this machine.
Thanx for all your help guyz and galz.hmmm... since the viewport and the image are the same size, why not try removing the hack all together, and just using the definition we were giving to ie:
background: #fff url(../gfx/background.jpg) top left fixed;Nope.
Now only IE looks right.
Hmm...
Since I have a div within a div, perhaps I need to apply the background to the child div instead of the parent div?
Thanx.Nope.
Didn't make a difference.
Sheesh...may as well just go with no background image at all...save a whole lot of headaches.
Thanx.Any takers?
Last call...
Thanx.Going once...Check out my page again
<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/demo/stmasi/The">http://www.emdevelopments.co.uk/demo/stmasi/The</a><!-- m --> problem seems to have something to do with whether the browser window is maximised or not.Thanx, Dave.
Still looks weird in Netscape. Check out the attached screen-shot.
My Netscape browser is maximized vertically, but not horizontally.
Strange.When I've got more time I'll try and create the layout from scratch. Unfortunately that won't happen till the end of the week (easter hols has a stack of coursework deadlines before it unfortunately.)
going twice...Thanx, Dave.
Muchly appreciated.OK I've tested it using a cut down version, and from what I can gather the problem is that when you use the word 'fixed' in relation to your background it puts the background as it would from the edge of the browser window. I can't find a way to avoid this either.
Browser detection may be the only way around this.I lied...
Try two divs - one with your background in it, the same size as the background, then another nested inside, slightly smaller, with the contents and overflow: auto on it.
You then don't need to fix the background position because that div never overflows.
Brainwave struck at 11am yesterday
Thanx.2 problems:
1) image is bigger than content area
2) background definition in #cont should be:
background: #fff url(../gfx/background.jpg) center center no-repeat;Interesting.
The background image being bigger, must be because of the borders, right?
According to W3 specs, isn't 50% 50% the same as center center?
Thanx.that wasn't the problem, i just use center because i like it better. the problem was the "fixed" position.
#cont is 700x450, the exact same as the image, thus centering really doesn't do anythingHmm...
Now I have another problem.
I have the div set to scroll based on length of content, but when it does, the image is now in the middle of the scroll instead of fixed at the top and not moving (in IE).
How do I fix that?
Thanx.Originally posted by stmasi
Hmm...
Now I have another problem.
I have the div set to scroll based on length of content, but when it does, the image is now in the middle of the scroll instead of fixed at the top and not moving (in IE).
How do I fix that?
Thanx.
Try this:
background: #fff url(../gfx/background.jpg) no-repeat fixed top left;Thanx...
But...
Is there a fix for those of us without the "helpful" hand of server-side assistants?
Thanx.you're going to have to use a little hack to get this to work right in IE and FF. Here it is:
#cont
{
background: #fff url(../gfx/background.jpg) center center no-repeat !important;
background: #fff url(../gfx/background.jpg) top left fixed;
height: 450px;
margin: 0;
overflow: auto;
padding: 0;
text-align: justify;
}Cool!
It works!!!
Thanx!!!!!
glad to helpWait a minute. Now, when I use Netscape, and area overflows, as I scroll down, the background image moves upward and at the same time, underneath, is another background image that is fixed in place.
Huh?
Thanx.say what? got a screen shot? i don't think its possible that netscape is applying both rules, so i'm not quite sure whats happening here... what version of NS?Can't get a screenshot, sorry. But I can tell you that it is Netscape 7.1, their free Download .
Thanx.Okay, I have a screen shot now, but it's animated and even when it's zipped up, it's still almost 2MB. I've attached it to my test page so people can Download it and take a look...
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi">http://www.geocities.com/stmasi</a><!-- m -->
Let me know what you think.
Thanx.I think...
have you got a zip of your files as you are using to get that interesting effect?
Here they be... Thanx.Well I've dropped in some fake latin and it works fine for me in
from 'about' option
Netscape 7.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)
and IE6.
Either they've updated the Download between one of us Download ing it or your graphics card is screwing up. try rebooting and opening it as the first file you open
Well...It simply cannot be the graphics card as this problem (for lack of a better word) is occuring on five different workstations with five different video cards. These are the only ones I'm testing with.
Thanx.
P.S. My Netscape is...
Netscape 7.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)
Only having this problem in Netscape...works fine on EVERY other browser.LOL
What OS?Unfortunately, all machines I'm testing with are Windows XP Professional.
Thanx.I'm on XP home.
Try looking at the page I'm using: <!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/demo/stmasi/Here's">http://www.emdevelopments.co.uk/demo/stmasi/Here's</a><!-- m --> what I see under said version of Netscape (all other browsers just fine):
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasithis">http://www.geocities.com/stmasithis</a><!-- m --> is really wierd...
this is from XP Pro with NS 7.1
screenshot 1 (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/sample/stmasi1.jpg">http://www.medford.k12.or.us/sample/stmasi1.jpg</a><!-- m -->): this is what it looked like initially.
screenshot 2 (<!-- m --><a class="postlink" href="http://www.medford.k12.or.us/sample/stmasi2.jpg">http://www.medford.k12.or.us/sample/stmasi2.jpg</a><!-- m -->): this is what it looked like when the window was vertically resised.
not sure what is causing this though...
NOTE: screenshots are 150kb each, may be long loadsFinally!!!
Someone else is seeing what I was seeing! I thought I was going to have to check myself in somewhere.
Whew!!!
So...what the heck is causing that?!
Thanx.I still can't figure this darn thing out!
I've even gone as far as deleting the files completely and working over from scratch. Still get the same results.
Any other ideas out there?
Thanx.So...
Everyone else is just as stumped as me, eh?
Good...I don't feel so bad about almost having a stroke over this one. No matter how many times I re-try this darn thing, I get the same two stupid results.
I truly am attempting to embrace CSS and all the wonders therein, but sometimes I just want to walk out to my shed, get my 40# sledgehammer and let loose on this machine.
Thanx for all your help guyz and galz.hmmm... since the viewport and the image are the same size, why not try removing the hack all together, and just using the definition we were giving to ie:
background: #fff url(../gfx/background.jpg) top left fixed;Nope.
Now only IE looks right.
Hmm...
Since I have a div within a div, perhaps I need to apply the background to the child div instead of the parent div?
Thanx.Nope.
Didn't make a difference.
Sheesh...may as well just go with no background image at all...save a whole lot of headaches.
Thanx.Any takers?
Last call...
Thanx.Going once...Check out my page again
<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/demo/stmasi/The">http://www.emdevelopments.co.uk/demo/stmasi/The</a><!-- m --> problem seems to have something to do with whether the browser window is maximised or not.Thanx, Dave.
Still looks weird in Netscape. Check out the attached screen-shot.
My Netscape browser is maximized vertically, but not horizontally.
Strange.When I've got more time I'll try and create the layout from scratch. Unfortunately that won't happen till the end of the week (easter hols has a stack of coursework deadlines before it unfortunately.)
going twice...Thanx, Dave.
Muchly appreciated.OK I've tested it using a cut down version, and from what I can gather the problem is that when you use the word 'fixed' in relation to your background it puts the background as it would from the edge of the browser window. I can't find a way to avoid this either.
Browser detection may be the only way around this.I lied...
Try two divs - one with your background in it, the same size as the background, then another nested inside, slightly smaller, with the contents and overflow: auto on it.
You then don't need to fix the background position because that div never overflows.
Brainwave struck at 11am yesterday