Relative Clipping

[J4G]

Hey everyone!

This is my first post in these forums and I'm really new to CSS. This is my first attempt at designing a "real" website.

I've been amazed by the things CSS3 can accomplish (no more wasting loading time on images!), but I've ran into a couple issues. Here's one:

I've been trying to use the clipping of a box shadow to get the desired gradient effect. The only issue is, it involves clipping the sides, which are affected by relative positioning and a fluid layout. I've tried using a gradient to get a similar effect, but the colors never seem quite right. I would also prefer not to use an image.

Now, I know it's pretty explicitly stated in clipping's documentation that the feature will only work with absolute positioning, but I'm curious to see if JavaScript can be used as a work-around. Any thoughts?

Images (edited to remove personal information):


An image of the image without clipping is shown above.


And an image with clipping. Notice the many dashes, used to make sure that the entire footer's length can be clipped. I would like those to go as well, if possible.

Thanks in advance!

[J4G]

*bump*

[deathbycheese]

How about if you just use a tiny div above the red one that has a gradient from white to red like this:

  .gradient {
   /* fallback/image non-cover color */
   background-color: #990000; 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(#ffffff, #990000);

   /* Safari 4+, Chrome 1+ */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#990000));

   /* Safari 5.1+, Chrome 10+ */
   background-image: -webkit-linear-gradient(#ffffff, #990000); 

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(#ffffff, #990000);
}
  </style>

dbc

[J4G]

Thanks for the reply, but like I said, I've already tried using gradients. I fixed the problem though, with the simple line of CSS code:

#Table {overflow: hidden;}