Web Analytics Made Easy -
StatCounter Table background won't display in Firefox - CodingForum


No announcement yet.

Table background won't display in Firefox

  • Filter
  • Time
  • Show
Clear All
new posts

  • Table background won't display in Firefox

    Hello, I'm new here, so I guess I should introduce myself first. You can call me Brooke =)

    I'm not too advanced with coding, but I know HTML and some CSS. I've got this code for a table, but the background image doesn't show up on Firefox. However, it works fine in IE. Here is the code:

    p table, #blog3 { color: #fbf7e9; border-color: #fbf7e9; border-width: 2px; border-style: solid; font-family: verdana; font-size: 12px; width: 192px; background-image: url(http://img.photobucket.com/albums/v259/chococatlover43/blog3bg.png); filter: alpha(opacity=100); height: 150px; overflow: auto; background-attachment: fixed; background-repeat: no-repeat; scrollbar-arrow-color:fbf7e9; scrollbar-track-color: 555531; scrollbar-face-color:555531; scrollbar-highlight-color:555531; scrollbar-3dlight-color:555531; scrollbar-darkshadow-color:555531; scrollbar-shadow-color:555531; text-align: left; float: left; margin: 14px 0px 0px 0px; }
    <div id="blog3"><table>



    If anybody could point out what's wrong and tell me how to fix it, please let me know =)
    "Where words fail, music speaks."
    - Hans Christian Andersen

  • #2
    • The selector p table shouldn't be doing anything because, in the code you provided, the table is not a descendent of a paragraph. A table in a paragraph would be invalid code anyway.
    • The style element requires a type attribute.
    • The filter and scroll-bar properties only work in Microsoft's Internet Explorer. The standards-compliant equivalent of a filter: alpha() declaration is the opacity property. There is no equivalent for the scroll-bar properties.
    • Hexidecimal color codes must be preceded by a number sign (#). You can get away with this error when the page is displaying in backward-compatibility mode (for bad code), but it's still incorrect usage.
    • You should provide a generic font family (e.g., sans-serif) in addition to specific fonts in case the user doesn't have the named fonts installed.
    • A valid table must contain table row (tr) elements and, within those, have table cell (th or td) elements. You put the table's content inside the table cell elements.

    <style type="text/css">
      p table, #blog3 {
        float: left;
        filter: alpha(opacity=100); /* Proprietary to Microsoft */
        opacity: 1;
        width: 192px;
        height: 150px;
        overflow: auto;
        scrollbar-arrow-color: #fbf7e9; /* Proprietary to Microsoft */
        scrollbar-track-color: #555531; /* Proprietary to Microsoft */
        scrollbar-face-color: #555531; /* Proprietary to Microsoft */
        scrollbar-highlight-color: #555531; /* Proprietary to Microsoft */
        scrollbar-3dlight-color: #555531; /* Proprietary to Microsoft */
        scrollbar-darkshadow-color: #555531; /* Proprietary to Microsoft */
        scrollbar-shadow-color: #555531; /* Proprietary to Microsoft */
        margin: 14px 0 0;
        border: 2px solid #fbf7e9;
        background: url("http://img.photobucket.com/albums/v259/chococatlover43/blog3bg.png") no-repeat fixed;
        color: #fbf7e9;
        font: 12px Verdana, sans-serif; 
        text-align: left;
    <div id="blog3">
          <td>CONTENT HERE</td>
    Last edited by Arbitrator; Oct 8, 2006, 05:32 PM.


    • #3
      Thanks for showing me those problems. I fixed everything you told me to, but the background of the table still isn't showing up on Firefox. =/

      Is there anything in the coding that would explain why background of the table isn't showing up?
      "Where words fail, music speaks."
      - Hans Christian Andersen


      • #4
        Can anyone else help? =/
        "Where words fail, music speaks."
        - Hans Christian Andersen


        • #5
          Do you have a link to the page? It would help alot.


          • #6
            Yes, sorry:

            "Where words fail, music speaks."
            - Hans Christian Andersen


            • #7
              I seem to be getting some kind of a background image fine, on my version of Firefox (1.5.07, Windows). Maybe you've fixed it since posting, or maybe there's another one yourhave(ie more than one background) that I'm missing??

              A few little things though (which correcting them might help - they can't hurt):

              - You've used a "<body>" tag twice. Delete one of them. (prob the first one).
              - You can only use a "<style..." tag within a page's "<head>" section. Move the </head> tag down to just above your first "<table style=" line.

              in your top-level code you have:
              <style type="text/css">
              body{background-image: url(URL);
              background-attachment: fixed; 
              background-repeat: no-repeat; 
              background-position: right bottom;
              background-color: #555531;
              The "body{background-image: url(URL);" part is an empty string - you've specified no URL address in there at all. So either put the address to the image's location (replacing the upper-case "URL" text), or remove that line since it's not actually doing anything.

              in the following section (which you could actually add into the "<style ..." tags above instead of putting it into it's own style section) you have:
              <style type="text/css">
              a:link{color:#555531;font-family:10pt Verdana; text-decoration:none}
              a:visited{color:#555531;font-family:10pt Verdana; text-decoration:none}
              a:active{color:#555531;font-family:10pt Verdana; text-decoration:none}
              a:hover{color:#fbf7e9;font-family:10pt Verdana; text-decoration:none}
              The "font-family" tag is only for a list of font names. You've also included a font-size in there ("10pt"). You probably want the plain "font" tag instead which allows you to specifiy multiple font attributes. [see here]


              • #8
                is this image on another domain??.........also, have you tried to change the image to a .gif or .jpg...........png's are not a good format for the web........

                I cannot access the graphic on my firefox
                Last edited by ecompsp; Oct 10, 2006, 08:39 AM. Reason: forgot detail


                • #9
                  I see the background image, but being that I'm on dial-up, it takes some time to load at 336.63 kB. You may want to consider trimming the file size since Firefox typically indicates that a page has loaded when the background images have not actually finished loading, possibly leading to the impression that there are no background images if it's taking forever to load.

                  I also don't see any issue with using PNGs for the web unless you hand them over to some plug-in like QuickTime; that can cause problems as I found out after a friend complained that he was having problems with PNGs. There's also a color matching issue but that shouldn't prevent the image from displaying.

                  You may also want to take the time to correct erroneous code as that may be causing some problems. I realize that you're on a blog, so obviously you can only fix what they'll allow you to, but I would keep it as valid as you can. Resources:


                  • #10
                    First of all, thank you everyone who is helping me out =)

                    Well I went and fixed everything majo suggested (on my home page only). However, the background is still not showing up in Firefox (I have the latest version). It still works in Internet Explorer, though.

                    These are the backgrounds I am trying to view:

                    The backgrounds obviously don't make a drastic difference in being there as opposed to no background at all (making the tables look see-through), but they are have a greenish overlay on them. If you view the home page of the site (www.freewebs.com/brooke-music) on both Firefox and IE, you should be able to see the difference I'm talking about.

                    As for the png issue, I could use jpg images, but the problem is they would be a bigger file size. Also, how would I downsize the file size without sacrificing the quality of the images? I've heard that by not using tables, it saves loading time, but I don't really know how to change the coding of the site to make it not tables and still look the way I want it to =/

                    I didn't see a color-matching issue, but I changed the background so that it uses an image of the color I want rather than using color coding, so maybe that helped. If there are other color-matching problems, please point out to me where they are.

                    Arbitrator - I'm not on someone else's blog site, it's my own site, so I can control all of the coding =P The HTML and CSS Validators gave me different results, but they all seem to be pointing out problems that don't exist, so I dismissed those (like missing tags that were actually there, etc.). However, the HTML Validator said I don't have a Doctype declaration, but I'm not sure which one I'd use, especially since I have regular HTML and CSS in the coding. The CSS Validator pretty much said all of my scrollbar properties didn't exist, which didn't make sense to me. Here's an example:

                    Property scrollbar-track-color doesn't exist : #555531

                    I don't think either of these issues are major or are affecting how the background images show up on my tables. I updated the coding a bit now, though, so hopefully I eliminated most of the other problems to help get down to the main problem I'm trying to solve. Maybe it doesn't have to do with the coding, but with some setting on my computer, but I would like to try and fix this.
                    "Where words fail, music speaks."
                    - Hans Christian Andersen


                    • #11
                      Is anyone else not seeing the backgrounds?
                      "Where words fail, music speaks."
                      - Hans Christian Andersen


                      • #12
                        I can see the background fine in IE6 and FF1.0something.


                        • #13
                          Well, I've checked on two different computers, my desktop and my laptop, and I can't see the backgrounds in Firefox on either. Are you sure you're talking about the right background, Mark? I'm talking about the slightly lighter, more greenish backgrounds that go inside the seperate blog/table things...
                          "Where words fail, music speaks."
                          - Hans Christian Andersen


                          • #14
                            I see a background of leaves(?) in Firefox 2.0 RC2 and IE7 RC1. I'm also on a broadband connection though. . .

                            Nevertheless, I agree with the others. Trim down your file size if you can because not everybody can load 384 Kbps or higher.
                            PHP Code:
                            $hello file_get_contents('hello.txt'); echo $hello


                            • #15
                              I'm on broadband as well, so I really don't know what the problem is...again, are you talking about the background I was talking about before? (http://img.photobucket.com/albums/v2...43/blog1bg.png)

                              Like I said before, I would trim the file size, but I don't know how, especially without affecting quality.
                              "Where words fail, music speaks."
                              - Hans Christian Andersen