Originally posted by toicontien The only thing I caught in the code you posted was that the URL to the image was not in quotes. According to the standards, specifying a background image is as follows:
It sounds crazy, but not encasing that url in quotes might wig out more strictly standard compliant browsers (like every other browser than NS 4.x and IE/PC)
And what standard is that? According to the CSS1 Specification:
The format of a URL value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URL itself (as defined in ) followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. Quote characters that are not part of the URL itself must be balanced. http://www.w3.org/TR/REC-CSS1#url
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
—Tim Berners-Lee, W3C Director and inventor of the World Wide Web
I tried adding the whitespace before the "(" but this actually made the image dissapear entirely! I may still use the whitespace though, if I cant find a better solution, because IE 6 was unaffected by it. This will give me a way of keeping the backgrounds for browsers in which they display properly, while removing the eye-sores from Netscape, etc.
I removed the bogus CSS link from the index.htm page, but, unfortunately, this did not clear up the problem. It did however restore the CSS styles to the text links at the bottom of the page.
I also looked at incredible.css, and the closing "}" for .titlebox was there, albeit after a fair amount of whitespace. I took out the whitespace just to see, but it had no effect.
Nevertheless, thanks for taking the time to look at my source.--
One thing I have noticed is that Netscape seems to reference position from the center of the image, whereas IE references the top-left corner. That is why the .birdwm, which is postioned as left center, has it's center aligned with the left edge of the table cell. Obviously, vertical position is irrelevent since the scroll attribute changes this value.
So what I really need now is a way to fix the image, since positioning will have to be a compromise between the point in the image from which the different browsers reference the position.
1. First the browser would set the background image to be fixed.
2. Then the URL to the image was given, loading the image in the window.
3. The browser was told to not tile the image.
4. Lastly it centered the image in browser window, not within the table cell.
5. When the user scrolled, Mozilla, NS 7, etc. seemed to "recenter" the image according to the browser window itself, so when the window scrolled, it was automatically recentered in the window, thus making it seem like the browser was ignoring the background attachment rule.
Basically the browsers seem to have been repeating the last css rule you declared, which was background-position: center center;
I reordered the declarations the way that the W3C CSS 1 and 2 specs recommended:
But it centers the image in the browser window, not within the table cell. I tried setting the table's position property to static and relative, but that didn't center it within the table cell like you want. I also had the table cell with the BG image positioned relatively at the same time, which did nothing.
In CSS1 and 2 specs, the order of specifying background properties is written:
Sorry for the late reply. I didn't have time to try the fixes until just now.
As per your suggestion, I tried using the body selector rather than a unique identifier for the table, but the background image only showed up in the space between the layout tables in the body of the document. I have not had time to try removing all CSS (i.e. text formatting and non-background related styles) specific to the tables to see if they are overriding the body background declaration, so I will try that next.
I tried both of the variations in your last post:
Just replace the CSS on your page with the CSS below:
Unfortunately, neither shift got NS to fix the bg on my machine. I did not get the opportunity to test the solution on my Macintosh, but the Windows version treated it just the same as before.
I have been reading through the on-line NS documentation, FAQs, etc., and have not come across this issue, although many realted to CSS differences/incompatibilities between NS and IE.
I am beggining to wonder if I am the only one having this problem, since I have not found any other documented cases and since your fix worked on your system.
Unless Netscape differs regionaly, what fixed the bg in your version should do so in mine as well. I went digging through the Netscape preferences looking for something about CSS handling, but found nothing directly related.
By the way, thanks for including the note about Opera, as I was wondering about that myself.
Once again, my ability to overlook the obvious has astounded me.
All that was required was that I remove the "background-attachment: fixed;" declararation.
Thanks to toicontien and jdavia. It was your comments about the image being positioned relative to the document window/body that got me thinking on the right track.
The fixed attribute refers to fixing an object relative to the document window rather than to other objects in the page. Depending on how you look at it, either moving text scrolls over a fixed image or a moving image scrolls under fixed text.
Now all I have to sort out is the postion of the images on the page, but this will be easier since I now know that NS position is document relative rather than object relative.
Thanks again to all who contributed suggestions. Now you know why I am