[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1178
  • Last Modified:

Container background color in Firefox/Chrome

The background color for my container is missing when viewed in FF or Google Chrome.  Works OK in IE7.

I'm missing the obvious here.  Could use some help.

URL: www/ebizservices.us/test/gln1

THANKS!


<!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"><!-- InstanceBegin template="/Templates/GLN1Template1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Home of Glacier Nursery, Inc.</title>
 
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style29 {
	font-size: 18px
}
-->
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
<link href="GLN1.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
 
<style type="text/css">
<!--
body {
	background-color: #153f11;
	margin-left: auto;
	margin-top: 0px;
	margin-right: auto;
}
.style2 {
	font-size: 12px;
	font-weight: normal;
	color: #153F11;
}
.style3 {color: #550000}
.style4 {
	color: #550000;
	font-size: 12px;
	font-style: italic;
}
.style10 {color: #550000; font-size: 10px; font-style: italic; }
.style12 {
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style15 {font-size: 10px; font-weight: normal; color: #153F11; }
a:link {
	text-decoration: none;
	color: #153F11;
}
.style16 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style17 {font-family: Georgia, "Times New Roman", Times, serif}
a:visited {
	text-decoration: none;
	color: #153F11;
}
a:hover {
	text-decoration: none;
	color: #B93700;
}
a:active {
	text-decoration: none;
}
.style21 {font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style22 {font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #153F11; }
-->
</style>
<!--[if IE]>
<style type="text/css">
  body {word-wrap: break-word;}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
.mybuggyelement { zoom: 1;}
</style>
<![endif]-->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
</head>
 
<body>
<div id="container">
  <div id="PhotoHole"><!-- InstanceBeginEditable name="PhotoHole" --><img src="images/yellowyard.gif" alt="Yellow Yard" width="150" height="150" /><!-- InstanceEndEditable --></div>
  <div id="Logo">
  <p align="center"><br />
  <img src="images/brownlogocmyksm.gif" class="reflect" alt="Glacier Nursery Logo" width="200" height="64" align="absmiddle" />  </div>
  <div id="RightHole"><!-- InstanceBeginEditable name="RightHole" --> <br />
    <div id="C_Panel">
      <div id="CollapsiblePanel1" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0">
          <div align="center" >What's New!</div>
        </div>
        <div class="CollapsiblePanelContent">
          <p class="style2">February 2, 2009</p>
          <p class="style2">Glacier  Nursery, Inc. announces the new Plant Catalog for 2010. This catalog contains all the varieties of trees, evergreens, shrubs, perennials, and other native or adapted species for our northwestern Montana climate zones.</p>
          <p class="style2">Please check our Plant Selection Guide and our Availability sections to help pick your choices for this season and to place your orders early so we canship them when you need them.</p>
          <form action="" method="post" name="form2" id="form2">
            <div align="center"><span class="style2"><em> for full article and for archived articles </em></span><em><br />
              please select below<br />
              <select name="archived articles" id="archived articles">
                <option selected="selected">February 2, 2009</option>
                <option>January 2009</option>
                <option>December 2008</option>
                <option>November 2008</option>
              </select>
              </em></div>
          </form>
        </div>
      </div>
      
      
      <div id="CollapsiblePanel2" class="CollapsiblePanel2">
        <div  tabindex="0">
          <div align="center"  class="CollapsiblePanelTab">Featured Plants</div>
        </div>
        <div class="style2">       
          <p><img src="images/iris.jpg" alt="Iris pummilla" width="110" height="164" align="right" class="image-right" /><br />
          This month we are featuring the beautiful Iris pumilla.</p>
          <p>It likes sunshine.</p>
          <p>It needs water.</p>
          <p>It lasts a long time.</p>
        </div>
      </div>
      <div align="right"></div>
    </div>
    
    
    <!-- InstanceEndEditable --></div>
    <div id="Header1"><!-- InstanceBeginEditable name="Header1" --><!-- InstanceEndEditable --></div>
  <div id="Sidebar1">
    <div id="NavMenu">
   
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a href="index.html">Home</a>          </li>
        <li><a href="PSG_Input_Form.html">About Us</a></li>
        <li><a class="MenuBarItemSubmenu" href="#">Plants</a>
            <ul>
              <li><a href="PSG.html">Selection Guide</a>                </li>
              <li><a href="#">Print Catalog</a></li>
              <li><a href="http://www.glaciernursery.com/wholesaler/index.php" title="GLN Availability" target="_blank">Availability</a></li>
            </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Customer Info</a>
            <ul>
              <li><a href="#">Why Glacier Nursery?</a></li>
              <li><a href="#">Terms &amp; Conditions</a></li>
              <li><a href="#">Shipping Info</a></li>
              <li><a href="#">Register as New Customer</a></li>
          </ul>
        </li>
        <li><a href="GCLP_Locator.html" class="MenuBarItemSubmenu">Resources</a>
          <ul>
            <li><a href="#" class="MenuBarItemSubmenu">Planting Tips &amp; Guides</a>
              <ul>
                <li><a href="#">Apples - Color, Seasons, Uses</a></li>
                <li><a href="#">B&amp;B Ball Specifications</a></li>
                <li><a href="#">Crabapple Flower Colors</a></li>
                <li><a href="#">Fall Color - Shrubs</a></li>
                <li><a href="#">Fall Color - Trees</a></li>
                <li><a href="#">Fruit Pollination</a></li>
                <li><a href="#">Ground Covers &amp; Spacing</a></li>
                <li><a href="#">Lilac Flowers &amp; Season</a></li>
                <li><a href="#">Perennial Chart</a></li>
                <li><a href="#">Plants that Attract Birds</a></li>
                <li><a href="#">Planting Tips</a></li>
                <li><a href="#">Rose Flower Color &amp; Cycle</a></li>
                <li><a href="#">Shade Tolerant Shrubs</a></li>
                <li><a href="#">Smaller Selection of the Species</a></li>
                <li><a href="#">Dwarf Selections less than 3'</a></li>
                <li><a href="#">Trees less than 25'</a></li>
                </ul>
            </li>
            <li><a href="GCLP_Locator.html">Garden Center &amp; Landscaper Locator</a></li>
            <li><a href="#">Additional Resource Links</a></li>
          </ul>
        </li>
        <li><a href="#">Glacier News</a></li>
        <li><a href="#">Employment</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    
    <div id="LowerSidebar1"><!-- InstanceBeginEditable name="LowerSidebar1" -->
      <p align="center" class="style2"><span class="style3"><span class="style12">Customer Login</span><br />
        </span><span class="style10 style16">User name</span><br />
        <input name="password" type="text" id="password" size="15" />
      </p>
      <form id="form1" name="form1" method="post" action="">
        <p align="center"><span class="style10 style17">Password </span><br />
          <input name="username" type="password" id="username" size="15" />
        </p>
      </form>
      <p align="center" class="style4"><span class="style16">New customer?</span><br />
        <br />
      </p>
      <!-- InstanceEndEditable --></div>
        <!-- InstanceBeginEditable name="LowerSideBar2" -->
        <div id="LowerSidebar2">
          <div align="center">
            <p><img src="images/smyellow_F.gif" alt="Fall dub B&amp;B trees" /></p>
            <p><!--  		@page { margin: 0.79in }  		P { margin-bottom: 0.08in }  	-->
              <span class="style15">Fall  dug B&amp;B trees ready for customer pick-up or delivery</span></p>
          </div>
        </div>
    <!-- InstanceEndEditable --></div>
 
 
  <div id="MainContent"><!-- InstanceBeginEditable name="MainContent" -->
    <p align="center" class="style3 style18" ><br />
      <span class="style29"><strong>Welcome to Glacier Nursery, Inc.!</strong></span></p>
    <p class="style3">
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <!--  		@page { margin: 0.79in }  		P { margin-bottom: 0.08in }  	-->
      <BODY DIR="LTR">
</p>
    <p class="style2">Glacier  Nursery, Inc. is a wholesale plant business supplying wholesale  nurseries, retail nurseries, landscape contractors, golf courses and  municipalities with hardy, premium grade Northern Rocky Mountain  nursery stock. We offer  over 500 varieties of trees, shrubs, fruits, roses, perennials, vines  and evergreens. We have  over 1,500 spring dug B&amp;B trees and 100,000 containers in our  yard on May 1st,  ready for immediate shipping throughout the summer. This saves you  from having to maintain a costly inventory.</p>
    <p align="center" class="style2"><img src="images/HomePageGraphic1_F.gif" alt="Glacier Nursery, Inc." width="559" height="340" /><br />
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <HTML>
      <!--  		@page { margin: 0.79in }  		P { margin-bottom: 0.08in }  	-->
      <span class="style2">
      <BODY DIR="LTR">
      </span></p>
    <p class="style2">You  will find on this website a plant selection guide with photos,  availability information, tips, and more. We  are proud to offer quality plants at competitive prices. With  convenient and timely deliveries to your yard or job site throughout  the planting season, we help you stay on schedule. There is no  minimum order, so you can order only what you need. <em>Volume  discounts are available on many varieties.</em></p>
    <p class="style2">We  thrive on customer service! If you have specific requirements for  plants, our trained plant professionals will personally help you to  select the plants you need. Let us be your personal shopper.</p>
    <p align="center" class="style29"><strong> MONTANA GROWN, YOU KNOW ITS HARDY. </strong></p>
    <p align="center" class="style29">&nbsp;</p>
    <!-- InstanceEndEditable --></div>
  
  <!-- InstanceBeginEditable name="Footer" -->
  <div id="footer">
    <div id="HorizLine"></div>
    <table width="100%" border="0" cellpadding="1">
      <tr>
        <td class="style2"><div align="center" class="style14">&copy;2009 Glacier Nursery, Inc.<br />
            All Rights Reserved</div></td>
        <td class="style15"><div align="center"><img src="images/VertSep2.gif" /></div></td>
        <td class="style2"><div align="center" class="style14">4343 Montana Highway 35<br />
            Kalispell, MT 59901</div></td>
        <td class="style15"><div align="center"><img src="images/VertSep2.gif" /></div></td>
        <td class="style2"><div align="center" class="style14">(406) 755-2248<br />
            (800) 700-8566<br />
            fx: (406) 755-2249</div></td>
        <td class="style15"><div align="center"><img src="images/VertSep2.gif" /></div></td>
        <td class="style2"><div align="center" class="style14">web design by <br />
            <em><a href="http://www.ebizservices.us/" target="_blank">eBizServices</a> &amp; <br />
            <a href="http://snowdogweb.com/" target="_blank">SnowDog Web Development</a></em></div></td>
      </tr>
    </table>
    <br />
  </div>
  <script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
//-->
</script>
  <!-- InstanceEndEditable --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<script type="text/javascript" src="reflection.js"></script>
</body>
<!-- InstanceEnd --></html>
 
 
/CSS code for the above html page.
 
@charset "utf-8";
#container #RightHole #RightHoleDiv2 {
	margin-top: 100px;
}
 
#container #RightHole {
	float: right;
	height: 150px;
	width: 230px;
}
#container #Sidebar1 {
	float: left;
	height: 600px;
	width: 150px;
}
#container #Header1 {
	height: 10px;
	position: relative;
	background-color: #B93700;
	float: left;
	width: 780px;
}
#container #MainContent {
	position: relative;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #153F11;
	width: 605px;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	float: left;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #B93700;
}
#container #Sidebar1 #LowerSidebar2 {
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 10px;
}
 
#container #VertBar {
	background-color: #B93700;
	height: auto;
	width: 1px;
	float: left;
	margin-left: 5px;
}
 
#container #footer {
	clear: both;
	float: left;
	width: 780px;
	font-size: 12px;
}
 
#container {
	background-color: #FFFFcc;
	width: 780px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
#container #PhotoHole {
	float: left;
	height: 150px;
	width: 150px;
}
#container #Logo {
	width: 400px;
	height: 150px;
	float: left;
}
#container #Sidebar1 #LowerSidebar1 {
	background-color: #DFE1C1;
	width: 150px;
	margin-top: 15px;
}
#container #footer #HorizLine {
	background-color: #B93700;
	height: 1px;
}
.image-right {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 5px;
}
.image-left {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 10px;
}
UploadDIV {
	color: #FF7F55;
}
#Lwindow {
	float: left;
	width: 325px;
	height: 275px;
	overflow: auto;
	margin-top: 10px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	padding: 5px;
}
#Rwindow {
	float: right;
	width: 225px;
	height: 275px;
	overflow: auto;
	margin-top: 10px;
	margin-right: 2px;
	margin-bottom: 5px;
	margin-left: 2px;
	padding: 5px;
}
#AvailabilityDIV {
	background-color: #FFFFCC;
	clear: both;
}
#container #RightHole #C_Panel {
	width: 200px;
	z-index: 100;
}
#container #MainContent #LocateWindow {
	height: 300px;
	width: 590px;
	background-color: #DFE1C1;
	overflow: auto;
	padding: 5px;
	margin: 5px;
}

Open in new window

0
BigSky260
Asked:
BigSky260
  • 2
  • 2
1 Solution
 
ksquared3Commented:
I'd try adding #container to your style sheet and define the background color there as well (background-color: #153f11;)


0
 
BigSky260Author Commented:
I already have a container div with the background specified.  I did figure out that if I put overflow:hidden  in the container div it works.

Thanks for trying.

0
 
ksquared3Commented:
You're welcome. I did notice later that you had the container background covered and have been wondering if you managed to fix the problem. I don't get why overflow:hidden worked, though.
0
 
BigSky260Author Commented:
I saw this is another bug report/how to fix it issue.  Can't explain it either.  The bummer is when I do add this overflow:hidden parameter, my Dreamweaver display loses its ability to properly display pages I'm working on while in DW/Design mode.  Seems it can't interpret the container command correctly.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now