7 Replies Latest reply on Aug 24, 2007 11:15 AM by Newsgroup_User

    CSS trouble

    spdorsey6969 Level 1
      Hello

      I'm working on a page template that is giving me a hard time.

      It has a DIV box which contains other DIV boxes. This main DIV needs a dotted line going vertically down the middle, separating two virtual columns. I used a "repeat-y" background to accomplish this, and ot works great - but only in MSIE Win. In Firefox and Safari, it is not there at all.

      I placed a background color in the DIV, and it also only appears in MSIE Win. I'm not sure why this is.

      The page is at:

      http://www.dorseygraphics.com/review/topaz/

      and the CSS is at:

      http://www.dorseygraphics.com/review/topaz/css/main.css

      I believe the offending part of the CSS is the "rightContent" element.

      The CSS has not been optimized or cleaned up at all yet. The page is just now nearing the end of its first development phase.

      All I need is for the background to show up in all browsers. If you can help, PLEASE review the code and clue me in. I'm not sure what's wrong.

      Thanks,

      ----------------------S



        • 1. Re: CSS trouble
          Level 7
          First thing you would need to do would be to fix these 117 errors -

          http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.dorseygraphics.com%2Freview%2 Ftopaz%2F

          Many of them arise because you have specifies XHTML in the doctype, but you
          have not use XHTML syntax for your tags....

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "spdorsey" <webforumsuser@macromedia.com> wrote in message
          news:famt3s$b0r$1@forums.macromedia.com...
          > Hello
          >
          > I'm working on a page template that is giving me a hard time.
          >
          > It has a DIV box which contains other DIV boxes. This main DIV needs a
          > dotted line going vertically down the middle, separating two virtual
          > columns. I
          > used a "repeat-y" background to accomplish this, and ot works great - but
          > only
          > in MSIE Win. In Firefox and Safari, it is not there at all.
          >
          > I placed a background color in the DIV, and it also only appears in MSIE
          > Win. I'm not sure why this is.
          >
          > The page is at:
          >
          > http://www.dorseygraphics.com/review/topaz/
          >
          > and the CSS is at:
          >
          > http://www.dorseygraphics.com/review/topaz/css/main.css
          >
          > The CSS has not been optimized or cleaned up at all yet. The page is
          > just
          > now nearing the end of its first development phase.
          >
          > All I need is for the background to show up in all browsers. If you can
          > help, PLEASE review the code and clue me in. I'm not sure what's wrong.
          >
          > Thanks,
          >
          > ----------------------S
          >
          >
          >
          >
          >


          • 2. Re: CSS trouble
            spdorsey6969 Level 1
            Is it correct to assume that you are referring to the absence of XHTML syntax in my code?

            I believe I have remedied that by adding self-closing tags and thusly bringing my W3C errors from 117 to 9. I'm working on getting rid of those pesky 9 right now.

            I have not yet validated the CSS, as it is still being written. I plan to do that in the next day or 2.

            After fixing 108 of the W3C errors, the background is still not drawing correctly in the "rightContent" DIV in Safari/Firefox.

            Any ideas?

            ------------------------S



            • 3. Re: CSS trouble
              Level 7
              > Is it correct to assume that you are referring to the absence of XHTML
              > syntax
              > in my code?

              Yes. DW will do that for you, you know? Use FILE | Convert....

              All of your divs are position:relative - why is that?

              I believe your image problem is this -

              rightContent {
              position:relative;
              float: none;
              width: 640px;
              margin: 8px 0px 0px 16px;
              padding: 0px 0px 0px 0px;
              z-index: 9;
              background-color: blue;
              background:
              url("file:///http|//www.dorseygraphics.com/review/topaz/images/separator_v.gif");
              background-repeat: repeat-y;
              background-position: center;
              }


              You have used the background (shorthand) style with just an image
              specification. I believe that you MUST supply a color if you are going to
              use the shorthand. Try changing that to background-image, or add the blue
              to the style, e.g.,

              background: blue url(...);

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.dreamweavermx-templates.com - Template Triage!
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
              ==================


              "spdorsey" <webforumsuser@macromedia.com> wrote in message
              news:famvtu$e5p$1@forums.macromedia.com...
              > Is it correct to assume that you are referring to the absence of XHTML
              > syntax
              > in my code?
              >
              > I believe I have remedied that by adding self-closing tags and thusly
              > bringing my W3C errors from 117 to 9. I'm working on getting rid of those
              > pesky
              > 9 right now.
              >
              > I have not yet validated the CSS, as it is still being written. I plan
              > to do
              > that in the next day or 2.
              >
              > After fixing 108 of the W3C errors, the background is still not drawing
              > correctly in the "rightContent" DIV in Safari/Firefox.
              >
              > Any ideas?
              >
              > ------------------------S
              >
              >
              >
              >
              >


              • 4. Re: CSS trouble
                spdorsey6969 Level 1
                The HTML check out on W3C now.

                I have also adjusted the CSS so that it only yields warnings, no errors.

                The background problem is still occurring.

                --------------S
                • 5. CSS trouble
                  spdorsey6969 Level 1
                  Looks like we both posted at the same time there.

                  I just saw your post about using the shorthand. I removed the shorthand syntax (was not aware that a background color must be used with shorthand, that's a handy tip!) but problem still exists.

                  I commented the "background-repeat" tag in order to make the BG more visible in Safari/FF, and it is not showing up at all.

                  I'm also open to better ways of creating that vertical line, in case using a background image is not the best way.

                  ----------S
                  • 6. Re: CSS trouble
                    spdorsey6969 Level 1
                    Just spoke with the Client.

                    It looks like this vertical separator would need to work also on uneven column widths, so the background centered image will not do the trick.

                    Not sure what to do.

                    Thanks,

                    ---------------------S


                    • 7. Re: CSS trouble
                      Level 7
                      Get rid of the relative positioning for starters....

                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.dreamweavermx-templates.com - Template Triage!
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                      ==================


                      "spdorsey" <webforumsuser@macromedia.com> wrote in message
                      news:fan6qi$lkl$1@forums.macromedia.com...
                      > Just spoke with the Client.
                      >
                      > It looks like this vertical separator would need to work also on uneven
                      > column widths, so the background centered image will not do the trick.
                      >
                      > Not sure what to do.
                      >
                      > Thanks,
                      >
                      > ---------------------S
                      >
                      >
                      >
                      >