box-shadow not working on middle content

1 reply [Last post]

Wed, 2011-09-21 13:58

jboccio

Offline

newbie

Fort Lauderdale

Last seen: 10 years 19 hours ago

Fort Lauderdale

Timezone: GMT-4

Joined: 2011-09-20

Posts: 2

Points: 3

Hi Guys

The "shadow_sides" class is not displaying on my "middle" id.

If I include my footer id inside the wrapper id, it works, but I get a white background on my bottom round corners.

Any help will be great!

Thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Untitled Document</title>
 
<style type="text/css">
 
* {
 
margin: 0;
 
padding: 0;
 
}
 
body {
 
	background:#EEE;
 
	font-family: Arial, Helvetica, sans-serif;
 
	font-size: 12px;
 
	}
 
h1 {
 
	font-size:24px;
 
	color: #601111;
 
	}
 
#wrapper {
 
	background:#FFF;
 
	width: 950px;
 
	height: auto;
 
	margin: 0 auto;
 
}
 
.shadow_sides {
 
    box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000;
 
    -moz-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000;
 
    -webkit-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000;
 
}
 
#header {
 
	height: 216px;
 
	margin: 0 auto;
 
}
 
#headerleft {
 
	background-color:#FF9900;
 
	float: left;
 
	width:618px;
 
}
 
#navcontainer {
 
	width:618px;
 
	background-color:#601111;
 
	text-align:center;
 
	color:#FFF;
 
	height:42px;
 
}
 
#navcontainer ul {
 
	list-style-type: none;
 
 
 
	padding: 0;
 
	height: 42px;
 
	width: 600px;
 
}
 
#navcontainer ul li {
 
display: inline;
 
}
 
 
 
#navcontainer ul li a {
 
	display: block;
 
	padding-right: 1.6658em;
 
	padding-left: 1.6658em;
 
	line-height: 42px;
 
	text-decoration: none;
 
	color: #FFF;
 
}
 
#navcontainer ul li:last-child {
 
border-right:1px solid #FF0;
 
}
 
 
 
#navcontainer ul li a:hover {
 
	background-color: #950c0c; 
 
}
 
 
 
 
 
 
 
#navcontainer ul li {
 
	float: left;
 
	border-right: 1px solid #FFF;
 
}
 
#navcontainer a {
 
}
 
#navcontainer a:link {
 
	color:#FFF;
 
}
 
#headerright {
 
	background-color:#993399;
 
	float: right;
 
}
 
#middle {
 
	padding: 10px 0px 5px 10px;
 
	clear: both;
 
}
 
 
 
#middlecontent {
 
	width: 695px;
 
	background-color: #0C0;
 
	float: left;
 
	}
 
 
 
#middleform {
 
	width: 240px;
 
	background-color: #F00;
 
	height: 479px;
 
	float: right;
 
	}
 
 
 
#footer {
 
	width: 950px;
 
	margin: 0 auto;
 
	color: #FFF;
 
	background-color: #3f3e3e;
 
    line-height: 44px;
 
	clear: both;
 
	border-bottomleft-radius: 10px;
 
    border-bottomright-radius: 10px;
 
    -moz-border-radius-bottomleft: 10px;
 
    -moz-border-radius-bottomright: 10px;
 
    -webkit-border-bottom-left-radius:10px;
 
    -webkit-border-bottom-right-radius:10px;
 
}
 
#footer a{
 
	color: #FFF;
 
 
 
}
 
#footer a:hover{
 
	color: #C36;
 
 
 
}
 
#footer p{
 
	height: 44px;
 
	}
 
</style>
 
</head>
 
 
 
<body>
 
<p>&nbsp;</p>
 
<div id="wrapper" class="shadow_sides">
 
<div id="header">
 
  <div id="headerleft">
 
    <div><img src="http://i53.tinypic.com/2zt9j44.jpg" width="618" height="174" /></div>
 
    <div id="navcontainer">
 
      <ul>
 
        <li><a href="#">Exclusive advertising</a></li>
 
        <li><a href="#">Unlimited New Customers</a></li>
 
        <li><a href="#">Free website</a></li>
 
        <li><a href="#">Free Google Listing</a></li>
 
      </ul>
 
    </div><!--/ navcontainer -->   
 
  </div> <!--/ headerleft -->
 
 
 
 
 
  <div id="headerright">
 
    <div><img src="http://i51.tinypic.com/2rxjptl.jpg" width="332" height="216" /></div>
 
  </div> <!--/ headerright --> 
 
  </div> <!--/ header -->
 
 
 
 
 
  <div id="middle">
 
  <h1>Exclusive Advertising</h1>
 
  <p><br />
 
    Gain a competitve advantage over your competitors in Miami, Florida.  
 
Your shop will be the only one listed on xxx.</p>
 
 
 
<p>Have a Question?  Call Us at 888-877-xxx</p>
 
<p>&nbsp;</p> 
 
 
 
<div id="middlecontent"><p>&nbsp;</p><p align="center">
 
<iframe width="647" height="479" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=body+shops&amp;aq=&amp;sll=26.029792,-80.144148&amp;sspn=0.054141,0.077162&amp;vpsrc=0&amp;ie=UTF8&amp;hq=body+shops&amp;hnear=&amp;ll=26.029792,-80.144148&amp;spn=0.054141,0.077162&amp;t=m&amp;output=embed"></iframe>
 
</p>
 
<p>&nbsp;</p>
 
</div> <!--/ middlecontent-->
 
<div id="middleform">Contact Form</div> <!--/ middleform-->
 
 
 
 
 
  </div><!--/ middle -->
 
 
 
</div><!--/ wrapper -->
 
 
 
 <div id="footer" class="shadow_sides">
 
    <p align="center">© Copyright 2009-2011 xxx All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="#">Advertise with .com</a></p></div> <!--/ footer -->
 
 
 
 
 
</body>
 
</html>

Tags:

Wed, 2011-09-21 15:06

jboccio

Offline

newbie

Fort Lauderdale

Last seen: 10 years 19 hours ago

Fort Lauderdale

Timezone: GMT-4

Joined: 2011-09-20

Posts: 2

Points: 3

I found the problem, I needed

I found the problem, I needed to add "clear:both" after the middle closing div.

jboccio wrote:

Hi Guys

The "shadow_sides" class is not displaying on my "middle" id.

If I include my footer id inside the wrapper id, it works, but I get a white background on my bottom round corners.

Any help will be great!

Thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Untitled Document</title>
 
<style type="text/css">
 
* {
 
margin: 0;
 
padding: 0;
 
}
 
body {
 
	background:#EEE;
 
	font-family: Arial, Helvetica, sans-serif;
 
	font-size: 12px;
 
	}
 
h1 {
 
	font-size:24px;
 
	color: #601111;
 
	}
 
#wrapper {
 
	background:#FFF;
 
	width: 950px;
 
	height: auto;
 
	margin: 0 auto;
 
}
 
.shadow_sides {
 
    box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000;
 
    -moz-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000;
 
    -webkit-box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #000;
 
}
 
#header {
 
	height: 216px;
 
	margin: 0 auto;
 
}
 
#headerleft {
 
	background-color:#FF9900;
 
	float: left;
 
	width:618px;
 
}
 
#navcontainer {
 
	width:618px;
 
	background-color:#601111;
 
	text-align:center;
 
	color:#FFF;
 
	height:42px;
 
}
 
#navcontainer ul {
 
	list-style-type: none;
 
 
 
	padding: 0;
 
	height: 42px;
 
	width: 600px;
 
}
 
#navcontainer ul li {
 
display: inline;
 
}
 
 
 
#navcontainer ul li a {
 
	display: block;
 
	padding-right: 1.6658em;
 
	padding-left: 1.6658em;
 
	line-height: 42px;
 
	text-decoration: none;
 
	color: #FFF;
 
}
 
#navcontainer ul li:last-child {
 
border-right:1px solid #FF0;
 
}
 
 
 
#navcontainer ul li a:hover {
 
	background-color: #950c0c; 
 
}
 
 
 
 
 
 
 
#navcontainer ul li {
 
	float: left;
 
	border-right: 1px solid #FFF;
 
}
 
#navcontainer a {
 
}
 
#navcontainer a:link {
 
	color:#FFF;
 
}
 
#headerright {
 
	background-color:#993399;
 
	float: right;
 
}
 
#middle {
 
	padding: 10px 0px 5px 10px;
 
	clear: both;
 
}
 
 
 
#middlecontent {
 
	width: 695px;
 
	background-color: #0C0;
 
	float: left;
 
	}
 
 
 
#middleform {
 
	width: 240px;
 
	background-color: #F00;
 
	height: 479px;
 
	float: right;
 
	}
 
 
 
#footer {
 
	width: 950px;
 
	margin: 0 auto;
 
	color: #FFF;
 
	background-color: #3f3e3e;
 
    line-height: 44px;
 
	clear: both;
 
	border-bottomleft-radius: 10px;
 
    border-bottomright-radius: 10px;
 
    -moz-border-radius-bottomleft: 10px;
 
    -moz-border-radius-bottomright: 10px;
 
    -webkit-border-bottom-left-radius:10px;
 
    -webkit-border-bottom-right-radius:10px;
 
}
 
#footer a{
 
	color: #FFF;
 
 
 
}
 
#footer a:hover{
 
	color: #C36;
 
 
 
}
 
#footer p{
 
	height: 44px;
 
	}
 
</style>
 
</head>
 
 
 
<body>
 
<p>&nbsp;</p>
 
<div id="wrapper" class="shadow_sides">
 
<div id="header">
 
  <div id="headerleft">
 
    <div><img src="http://i53.tinypic.com/2zt9j44.jpg" width="618" height="174" /></div>
 
    <div id="navcontainer">
 
      <ul>
 
        <li><a href="#">Exclusive advertising</a></li>
 
        <li><a href="#">Unlimited New Customers</a></li>
 
        <li><a href="#">Free website</a></li>
 
        <li><a href="#">Free Google Listing</a></li>
 
      </ul>
 
    </div><!--/ navcontainer -->   
 
  </div> <!--/ headerleft -->
 
 
 
 
 
  <div id="headerright">
 
    <div><img src="http://i51.tinypic.com/2rxjptl.jpg" width="332" height="216" /></div>
 
  </div> <!--/ headerright --> 
 
  </div> <!--/ header -->
 
 
 
 
 
  <div id="middle">
 
  <h1>Exclusive Advertising</h1>
 
  <p><br />
 
    Gain a competitve advantage over your competitors in Miami, Florida.  
 
Your shop will be the only one listed on xxx.</p>
 
 
 
<p>Have a Question?  Call Us at 888-877-xxx</p>
 
<p>&nbsp;</p> 
 
 
 
<div id="middlecontent"><p>&nbsp;</p><p align="center">
 
<iframe width="647" height="479" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=body+shops&amp;aq=&amp;sll=26.029792,-80.144148&amp;sspn=0.054141,0.077162&amp;vpsrc=0&amp;ie=UTF8&amp;hq=body+shops&amp;hnear=&amp;ll=26.029792,-80.144148&amp;spn=0.054141,0.077162&amp;t=m&amp;output=embed"></iframe>
 
</p>
 
<p>&nbsp;</p>
 
</div> <!--/ middlecontent-->
 
<div id="middleform">Contact Form</div> <!--/ middleform-->
 
 
 
 
 
  </div><!--/ middle -->
 
 
 
</div><!--/ wrapper -->
 
 
 
 <div id="footer" class="shadow_sides">
 
    <p align="center">© Copyright 2009-2011 xxx All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="#">Advertise with .com</a></p></div> <!--/ footer -->
 
 
 
 
 
</body>
 
</html>

box-shadow not working on middle content

I found the problem, I needed

User login

Navigation