Blue outline problem for a clickable image having a CSS shadow.

[abduraooft]

Hi friends,
I’m trying to add a shadow to some images using CSS, displayed in gallery page with a light-box feature.
After all my page should pass validation under strict doc-type .
For an image enclosed inside a <div>, the following CSS is sufficient to get shadow.
div img{
padding: 3px 3px 7px 3px;
background: white url(images/new/shad_bottom.png) repeat-x bottom left;
margin-right:30px;
border-right:1px solid #999;
}
But, my light-box template wants to enclose this image inside <a>.

Now, the border-right property causes a blue border around the entire image. I know this can be eliminated by adding a border=”0” to my <img>, which will fail on validation.

Please have a look at the sample page http://trials.casemumbai.com/trials/blue_border.htm

Any other solutions are much appreciated.

Thanks,
Art.

[ahallicks]

div img {
padding: 3px 3px 7px 3px;
background: white url(shadow.png) repeat-x bottom left;
margin-right:30px;
border: none;
border-right:1px solid #999;
}


Should sort it

[abduraooft]

Oh.. thanks, that worked. You are so quick!