www.webdeveloper.com
Results 1 to 15 of 15

Thread: Fixing a BG in Netscape 7.0

  1. #1
    Join Date
    May 2003
    Location
    Florida
    Posts
    19

    Fixing a BG in Netscape 7.0

    I need to fix and position different bg "watermarks" on each page of a site. My CSS declaration is as follows:

    .emailbg {
    background-attachment: fixed;
    background-image: url(Assets/email_wm.jpg);
    background-repeat: no-repeat;
    background-position: -251px -48px;
    }


    Each page contains its own declaration as each page has different image, so url, classname, and postion coords are different for each instance.

    This style works fine in Windows IE 6, but the background-attachment and background-position attributes are ignored in the following browsers:
    • IE 5 for Mac OS X
    • Netscape 7.0
    • Various versions of Mozilla


    Is there a cross browser-compatible way to specify bg position and scroll attributes?

    thanks
    Mike Appleby

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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:

    background-image: url("url_to_image");

    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)

    Could you post a link to the page?

    I hope this helps
    Last edited by toicontien; 05-09-2003 at 12:00 AM.

  3. #3
    Join Date
    May 2003
    Location
    Florida
    Posts
    19
    Here is the link

    www.incrediblepets.net


    In the mean-time, I will try adding the quotes to the url.

    thanks
    Mike Appleby

  4. #4
    Join Date
    May 2003
    Location
    Florida
    Posts
    19
    I tried adding the quotes . . . No luck.
    Mike Appleby

  5. #5
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    The pages look same to me in IE5, NS7, Opera7.10. Have you sorted out your problem?

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    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:

    background-image: url("url_to_image");

    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 [11]) 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

  7. #7
    Join Date
    May 2003
    Location
    Florida
    Posts
    19

    Really?

    Originally posted by nkaisare
    The pages look same to me in IE5, NS7, Opera7.10. Have you sorted out your problem?
    The backgrounds are all still a mess in NS 7.0, IE 5.2.1, and Mozzilla 1.2b on my G4, and in NS 7.0 on my PC.

    interesting.....

    Can anyone else verify that the backgrounds remain fixed in the afformentioned browsers?

    www.incrediblepets.net

    Maybe it's just my machines.


    thanks
    Mike Appleby

  8. #8
    Join Date
    Dec 2002
    Location
    Lake Havasu City, Arizona
    Posts
    527
    This is whatI am using. A color, no-repeat, position, and fixed.

    background-image: url ( dash.jpg ); background-color: #344b29; background-repeat: no-repeat; background-position: bottom;background-attachment: fixed;}

    Works in NS7 and IE6 not NS4

    Maybe you need a space between url and (
    Last edited by jdavia; 05-11-2003 at 03:12 AM.

  9. #9
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    This is your CSS from incredible.css:
    Code:
    .textbox {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 39px 277px;
    font-weight: normal;
    }
    body {
    background-color: #FFFFFF;
    }
    .titlebox {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
    background-image: url(Template_assets/title_bg.gif);
    border: medium none #999966;
    padding: 0px 2px 8px 25px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    The href to your other CSS: "S_I_T_E/incredible.css" is incorrect. Also, you forgot the closing } for .titlebox

  10. #10
    Join Date
    May 2003
    Location
    Florida
    Posts
    19

    Errors Unresolved

    jdavia--

    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.

    --Thanks.



    nkaisare--

    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.

    Thanks again,
    Mike Appleby

  11. #11
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Found a partial fix - for most windows browsers anyway

    Just replace the CSS on your page with the CSS below:

    Code:
    background-image: url(http://www.incrediblepets.net/Assets/about_wm.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    All I did was change the order of the statements. Here's what I think was happening.

    ORIGINAL CSS

    Code:
    1. background-attachment: fixed;
    2. background-image: url(Assets/about_wm.jpg);
    3. background-repeat: no-repeat;
    4. background-position: center center;
    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:

    http://www.w3.org/TR/REC-CSS1#background

    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:

    background-color
    background-image
    background-repeat
    background-attachment
    background-position

    and I rewrote it so that it went:

    image
    repeat
    position
    attachment

    So the order that you write background properties does matter. I didn't know that until now either.

    * Just a note: Opera 6.04 still fixes the image on the page absolutely and it seems to float in the same position on the page no matter where you scroll.

  12. #12
    Join Date
    Dec 2002
    Location
    Lake Havasu City, Arizona
    Posts
    527
    Have you tried using body instead of emailbg That's where you want to fix it in't it. Without the (.)
    The code is not compatible with NS4.7 Shows blank

  13. #13
    Join Date
    May 2003
    Location
    Florida
    Posts
    19

    Declaration ordering

    Sorry for the late reply. I didn't have time to try the fixes until just now.

    jdavia--

    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.


    toicontien--

    I tried both of the variations in your last post:

    Just replace the CSS on your page with the CSS below:

    code:--------------------------------------------------------------------------------
    background-image: url(http://www.incrediblepets.net/Assets/about_wm.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    --------------------------------------------------------------------------------
    and

    I rewrote it so that it went:

    image
    repeat
    position
    attachment
    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.
    Mike Appleby

  14. #14
    Join Date
    May 2003
    Location
    Florida
    Posts
    19

    Issue Resolved!

    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

    the_idiot

  15. #15
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    Hi.. I am glad you got your problem fixed

    I still have problem though with the macintosh not wanting to display the background.

    It is just a simple backgrund url attachment for god sakes.. lol and I don´t have any "fixed" declaration, just a simple bg pic to atach within a div.

    Just noticed it is ONLY the IE on mac that does not show the backgrounds... but in Safari and Netscape it sure shows alright

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles