[SOLVED] Seamless drop shadow on bottom of center column
 

Hello

I am working on a site here, http://umfs.gagnavist.is. I´m trying to have a drop shadow on the center column but as you can see there is a space between the sidebars and the center column that I don´t want.

Is it possible to change this so that the space can not be seen.

I have these CSS setting on the Center column, left and right sidebar

Center:
-webkit-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);

Left sidebar:
padding: 10px 5px 0 0;
background: #transparent;
-webkit-box-shadow: -6px 8px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -6px 8px 5px rgba(50, 50, 50, 0.75);
box-shadow: -6px 8px 5px rgba(50, 50, 50, 0.75);

Right sidebar:
padding: 10px 0px 0px 5px;
background: #transparent;
-webkit-box-shadow: 6px 8px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 6px 8px 5px rgba(50, 50, 50, 0.75);
box-shadow: 6px 8px 5px rgba(50, 50, 50, 0.75);

try applying it to #bodyrow

Set this style to the bodyrow ?

Center:
-webkit-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);

I have tried setting a style to this ID but to no avail.

So you put it in the CSS inserts option and used '#bodyrow' as the selector?

Yes, like this

#bodyrow {
background: #FFFFFF;
-webkit-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
}

take out the code for the middle and right - you'll probably have to fiddle with the code for the left - take it out at first so you can see what the bodyrow code does

Ok, I have removed the style from the sidebars and center column but there is no bottom shadow on the bodyrow...

I see a drop shadow.

Try using 'background-color' if you are only using that one parameter

Can you explain further juggledad ?

When you use the CSS rule 'background' that is the shorthand for all the background rules (background-repeat, background-color, background-image etc) but you only have one of the parameters. That can effect some browsers, so use background-color if you are only going to use that option.

Ok, now the style for bodyrow is like this but no shadow still

#bodyrow {
background-color: #FFFFFF;
-webkit-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
}

ah looks like a browser issue, the shadow shows in FireFox but not Safari

It does not show in Chrome either... and not IE9

Any chance this can be fixed ?

Well, you could write to Apple and M/S asn ask them to correct it :p
seripusly, you'll need to search the internet for solutions, try Googling 'box shadow table row safari'

This did the trick

#bodyrow {
background-color: #FFFFFF;
-webkit-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.40);
-moz-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.40);
box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.40);
display: block;
width: 978px;
}

Adding display:block and setting the correct width.

Thanks for your help juggledad