nested div dont show page shadow in FF

working fine in IE7

[longboy]

here is the code
====================================================================
<div id="page">
<div id="leftshadow">&nbsp;</div>
<div id="mainportion">
<div id="header">
<img src="images/mainpor_01.jpg" width="767" height="109" alt=""></div>
<div id="footeryellow">
<img src="images/mainpor_06.jpg" width="767" height="7" alt=""></div>
<div id="footer">
<img src="images/mainpor_07.jpg" width="767" height="74" alt=""></div>
</div>
<div id="rightshadow">&nbsp;</div>
</div>
===================================================================
css

body{
margin: 0 auto;
background-color: #FFF;
text-align: center;
}
#page{
width: 779px;
position: relative;
margin: 0 auto;
}
#leftshadow{
width: 6px;
float: left;
background-image: url(images/shadowleft.jpg);
background-repeat: repeat-y;
height: auto;
}
#mainportion{
width: 767px;
float: left;
height: auto;
}
#rightshadow{
width: 6px;
float: left;
background-image: url(images/shadowright.jpg);
background-repeat: repeat-y;
height: auto;
}
=================================================================

showing only a dot at both sides. can i some how make this shadow larger as much page is?

[Marshall]

Are you trying to wrap

<div id="mainportion">
<div id="header">
<img src="images/mainpor_01.jpg" width="767" height="109" alt=""></div>
<div id="footeryellow">
<img src="images/mainpor_06.jpg" width="767" height="7" alt=""></div>
<div id="footer">
<img src="images/mainpor_07.jpg" width="767" height="74" alt=""></div>
</div>

in the shadow such as a shodow on both sides?

Marshall

[longboy]

yes i was trying to show border on both sides, problem is that page outer border has gradient color from top to bottom else i know now how to show border on plain background

[Marshall]

You should probably "wrap" the shadow <div> around everything. Right now you have:

<div id="page">
<div id="leftshadow">&nbsp;</div>
<div id="mainportion">
<div id="header">
<img src="images/mainpor_01.jpg" width="767" height="109" alt=""></div>
<div id="footeryellow">
<img src="images/mainpor_06.jpg" width="767" height="7" alt=""></div>
<div id="footer">
<img src="images/mainpor_07.jpg" width="767" height="74" alt=""></div>
</div>
<div id="rightshadow">&nbsp;</div>
</div>

Try:
<div id="page">
<div id="leftshadow">
<div id="rightshadow">
<!-- INNER CONTENT --
<div id="mainportion">
<div id="header">
<img src="images/mainpor_01.jpg" width="767" height="109" alt=""></div>
<div id="footeryellow">
<img src="images/mainpor_06.jpg" width="767" height="7" alt=""></div>
<div id="footer">
<img src="images/mainpor_07.jpg" width="767" height="74" alt=""></div>
</div>
<!-- END INNER CONTENT -->
<br style="clear:both;" />
</div> <!-- END LEFT SHADOW -->
</div> <!-- END RIGHT SHADOW -->
</div> <!-- END PAGE -->

Changes to CSS:

#page{
width: 779px;
position: relative;
margin: 0 auto;
}
#leftshadow{
width: 779px;
padding: 0 0 0 6px;
background: url(images/shadowleft.jpg) top left repeat-y; height: auto;
}
#rightshadow{
width: 773px;
padding: 0 6px 0 0;
background: url(images/shadowright.jpg) top right repeat-y; }
#mainportion{
width: 767px;
float: left;
height: auto;
}

Marshall

[edit]background properties[/edit]

[edited by: Marshall at 8:25 pm (utc) on Sep. 4, 2007]