CODEWITHSUNDEEP
htmlcss
Jawad
Jawad

Reputation: 6672

Applying Bottom Box Shadow leaves some unshadowed space on left and right bottom sides

I have the following markup.

<!DOCTYPE html>
<html lang="en">
<body>
<div id="wrapper">
<div id="container">
<div id="navigation">
</div>
</div>
</div>
</body>
</html>

With the following CSS

body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}

div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("nav_bg.png");
background-repeat: no-repeat;
background-position: center 219px;
}

div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
}

div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
}

The nav_bg.png is this

enter image description here

And I get white unshadowed space in the bottom left and right

enter image description here

If I change the code to this

div#navigation
{
height: 50px;
margin-bottom: 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px 0px rgba(0, 0, 0, 0.8);
}

I get additional shadow on left and right sides as this.

enter image description here

And If I remove background-color and border-shadow from the div#navigation as follows.

div#navigation
{
height: 50px;
margin-bottom: 200px;
}

I get this

enter image description here

Sorry I messesd up the question real bad before.

Upvotes: 0

Views: 1851

Answers (2)

rain01
rain01

Reputation: 1284

You could also just make the div little wider so it would reach to the sides. If you could show the code, I could show you how.

EDIT: Just add minus margin to left and right to navigation and add width so it would reach the sides what you need

margin: 0 -20px 200px;
width: 947px;

EDIT2: If this does not work then there is something that you are not showing or you're doing it wrong.

body
{
width: 100%;
background-color: #E4E4E4;
font-size: 16px;
line-height: 19px;
font-family: Cambria, Georgia, serif;
}

div#wrapper
{
width: 960px;
margin: 0 auto;
background-image: url("oBecq.png");
background-repeat: no-repeat;
background-position: center 219px;
}

div#container
{
width: 920px;
background-color: #F9EADE;
box-shadow: 0 0 15px 5px rgb(31, 73, 125);
margin: 0 auto;
height: 500px;
}

div#navigation
{
height: 50px;
margin: 0 -10px 200px;
background-color: rgb(31, 73, 125);
box-shadow: 0px 10px 4px -4px rgba(0, 0, 0, 0.8);
top: 219px;
position: relative;
width: 950px;
}

Upvotes: 2

Kyle
Kyle

Reputation: 67244

This is because you have the shadow spread property set to -4px (the fourth number)

Set it to 0 and it will appear as you wish.

box-shadow: 0 10px 2px 0px rgba(0, 0, 0, 0.8);

http://jsfiddle.net/Kyle_Sevenoaks/evd4K/

Upvotes: 1

Related Questions