4 Replies Latest reply on Apr 27, 2006 4:27 PM by Newsgroup_User

    CSS Borders

    gretman
      I've received some good help on this forum...and now I need more!

      I'm creating a page that consists of the page and one large table that is containing the various elements being displayed. I'd like to change the bottom border of some of the rows to a grey color. I created the following CSS to do this:

      .bbgth {! important;
      border-bottom-color: #333333;
      border-bottom:3px;
      border-bottom-style:solid;
      }

      The problem is that when I apply this class the cell bottom is blue (#000064) and not grey. I've checked the code and I can't find any other codes that could be changing the color to blue. The class above is applied to the correct tags. I'm at a loss as to where I should look.
        • 1. Re: CSS Borders
          Baz J Level 1
          .bbgth {! important;
          border-bottom-color: #333333;
          border-bottom:3px;
          border-bottom-style:solid;
          }

          Take the word !;important out and add it as a comment above.

          I would use
          /* important grey border for bottom of container*/
          grey_bottom{border-bottom: solid 3px #333333)
          • 2. Re: CSS Borders
            Level 7
            I agree with Baz there, except I was always taught this order:

            border-bottom: 3px solid #333333

            I'm not sure if it matters or not. Take care.

            --
            Shane H
            shane@NOSPAMavenuedesigners.com
            http://www.avenuedesigners.com


            "Baz J" <webforumsuser@macromedia.com> wrote in message
            news:e2r629$s4l$1@forums.macromedia.com...
            > .bbgth {! important;
            > border-bottom-color: #333333;
            > border-bottom:3px;
            > border-bottom-style:solid;
            > }
            >
            > Take the word !;important out and add it as a comment above.
            >
            > I would use
            > /* important grey border for bottom of container*/
            > grey_bottom{border-bottom: solid 3px #333333)
            >
            >


            • 3. Re: CSS Borders
              wadup
              its doesnt....the latter is just using short hand css....

              which is a good habit, less css means small file size and less to look at...
              • 4. Re: CSS Borders
                Level 7
                "gretman" <webforumsuser@macromedia.com> wrote in message
                news:e2r5ev$rbm$1@forums.macromedia.com...
                > I've received some good help on this forum...and now I need more!
                >
                > I'm creating a page that consists of the page and one large table that is
                > containing the various elements being displayed. I'd like to change the
                > bottom
                > border of some of the rows to a grey color. I created the following CSS
                > to do
                > this:
                >
                > .bbgth {! important;
                > border-bottom-color: #333333;
                > border-bottom:3px;
                > border-bottom-style:solid;
                > }
                >
                > The problem is that when I apply this class the cell bottom is blue
                > (#000064)
                > and not grey. I've checked the code and I can't find any other codes that
                > could be changing the color to blue. The class above is applied to the
                > correct
                > tags. I'm at a loss as to where I should look.

                This may or may not have anything to do with your problem, but I've found in
                my experience that CSS borders only show up where there is room for them to
                show (which is silly).

                The border actually adds 1px all around an image, thus technically shoving
                it 1px down and 1px to the right (to make room for the left and top
                borders). If that image is in a table, the table doesn't know the CSS is
                adding anything on the outside border (though I have no idea WHY it doesn't
                know), so if the table cell is hugging the image all around, and the image
                is 20px by 20px, the viewable part of the image will remain 20x20 even after
                the image has been offset. In other words, only the top and left borders
                will show. The right and bottom will be cut off by the cell limits.

                Alternatively, if you use the actual IMG border tag (non-CSS), the table
                *does* recognize the two extra pixels added on both axis (axii?), and will
                make some room for them.

                I guess another way of picturing it is that IMG borders are actual walls of
                rock, while CSS borders are walls of light. They're not physical, and don't
                stop anything from stepping all over them.