Box-shadow

[qim]

Hi

I have been using a script called curvycorners to allow curved corners in IE8, without any problems.

However, in slightly different pages it made the left sidebar and the main content to come together and hide the 10px background margin.

In the end, I found another way of creating the rounded corners: PIE. It works fine and is much faster than curvycorners.

It solved one problem and created amother: the box-shadow seems to be very different in the divs where it is applied and I am unable to make sense of it. the best I came across is to give up the shados altogether and substitute them with border-right and border-bottom, but that is not a solution.

Could you help me get round this problem, please?

I am working with

http://pintotours.net/TEST/CrowneBcn.html

but you can see a live (problem) page in http://pintotours.net/Asia/Japan/IbisShinjuku.html especially in IE8 but not only.

The problem is not only with IE8, it is also with modern browsers, although this is probably due to the fact that I deleted the old code

 box-sizing: border-box
       -moz-box-sizing: border-box
       -webkit-box-sizing: border-box;
       -moz-border-radius-topleft: 20px;
       border-top-left-radius: 20px;    

for just

 border-radius: 0 0 20px 20px;
    behavior: url(/Pinto/Pie/PIE.htc);

The shadows are supposed to work in the panels in both sidebars and in the enlarged images in the central part

[qim]

Maybe I should start at the beginning…

I have this code in the original pages since I started the site and it is only now that I am trying to understand it.

	.page, header, footer, left, right, .panel1, .panel1b, .panel2, .panel2left,.panel2a, .panel2right,
	.panel3,.panel3left, nav, #converter, #airleft, #insuleft, #newvisa, .blank, .blank1, .advertleft{
        -webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
         box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
}



  -moz-border-radius-bottomleft: 20px;
 border-bottom-left-radius: 20px; 
  -moz-border-radius-bottomright: 20px;
 border-bottom-right-radius: 20px;  

From what I have read PIE could do with adding as alast line of the above

 border-radius: 0 0 20px 20px;

and that should be acceptable by all browsers including IE8. I mention all this because the main problems with the shadows appear to be where either curvycorners or PIE was applied in the tp and bottom panels within the sidebars. Maybe I should start by having the correct code for the corners, in ALL browsers, before seeing what the problem is with the shadows.

For IE8 I placed the PIE code in the header of the html

<!--[if lt IE 9]>
<style>

#header, #left, #right, div .panel1, div .panel1b, #chainsright, #chainsleft, #converter, #secretsR, #secretsL, #footer {
 behavior: url(/Pinto/Pie/PIE.htc);
 }
</style>
 <![endif]-->

but shadows are all wrong in all browsers!

[qim]

I’ve tried to simplify things and start at the beginning. In modern browsers (I have not looked yet at IE(8)
why do the divs that have rounded corners exhbit a different, lighter shadow?

http://pintotours.net/TEST/test.html

And if I make the shadow darker you can see that it goes ALL AROUND the div.

EDIT

Partly solved. I managed to sort it out for the main browsers but NOT for IE8.

Help needed there, please!

[qim]

PLEASE IGNORE THREAD

I think I can work it out.

Sorry!

[felgall]

Sometimes simply shifting from trying to do it to explaining what you are trying to do to someone else is all it takes for the solution to become obvious.