Jump to content

div shows in Dreamweaver & IE, but no where else


owosso
 Share

Recommended Posts

Seems I get one problem solved and another appears. Help!#horizontalContainer holds all content divs (except footer #address) and keeps things horizontally centered. It also has a repeating gradient image and a white background, both of which extend the length of the content. Because I want #horizontalContainer to expand with the content of the divs it holds, I have its length set at 100%.My problem? It does not show up in Firefox, Netscape or Safari. It does in Dreamweaver and IE. Here's what it's supposed to look like:helpW3ii.jpgHere's what it looks like in Firefox, Netscape and Safari.helpW3.jpgHere's my CSS:

body {  	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;  	margin: 0px;	padding: 0px;	background-color: #CCCCCC;	font-size: 62.5% /* 16px × 62.5% = 10px */;}p	{ font-size: 1.2em; color: #000000; line-height: 1.6em; }	p span	{ margin-left: 75px; }		a:link, a:visited	{ font-size: 1.2em; color: #000000; text-decoration: underline; }	a:hover, a:active { font-size: 1.2em; color: #ac2a2b; text-decoration: underline; }			h1	{	color:#AC2a2B;	font-size: 1.8em;	font-weight: bold;	}	h2	{ color:#000000; font-size: 1.6em; font-weight: bold; line-height: 1.2em; }h3	{ color:#000000; font-size: 1.2em; font-weight: bold; line-height: 1.2em; }	h4	{ color:#000000; font-size: 0.8em; }img.floatLeft {     float: left;     margin: 10px; }img.floatRight {     float: right;     margin: 10px; }#horizontalContainer	{	background-image: url(jwrImages/gradient.png);	background-repeat: repeat-y;	margin-top: 10px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	background-color: #FFFFFF;	width: 760px;	position: relative;	height: 100%;	}#header	{	width: 760px;	z-index: 2;	top: 2px;	background-image: url(jwrImages/header.gif);	background-repeat: no-repeat;	padding-top: 30px;	}#header	span	{	margin-left: 100px;}#rightContainer	{	height: 100%;	float: right;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	position: relative;	width: 480px;	padding-top: 30px;	padding-right: 20px;}				#navHor	{	width: 760px;	background-color: #999999;	border-bottom-width: 3px;	border-top-style: solid;	border-bottom-style: solid;	border-top-color: #000000;	border-bottom-color: #000000;	left: 0px;	height: auto;	border-top-width: 1px;	position: relative;	}	#navHor a:link, a:visited, #navLeft a:link, a:visited	{ font-size: 1.2em; color: #000000; text-decoration: none; }	#navHor a:hover, a:active, #navLeft a:hover, a:active { font-size: 1.2em; color: #ac2a2b; text-decoration: none; }			#navLeft	{	width: 255px;	float: left;	margin-top: 0px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	height: 436px;	z-index: 4;	position: relative;	background-image: url(jwrImages/abstractSub.png);	background-repeat: no-repeat;	padding-top: 30px;	background-color: #FFFFFF;}ul#navLeft {	width: 80px;	position: absolute;	z-index: 3;	left: 45px;	top: 0px;	height: 200px;	}		ul#navLeft li {	text-align: right;	text-decoration: none;	list-style: none;	height: 45px;}ul#navLeft li a {	text-decoration: none;	display: block;	}#youarehere	{	background-color:#FFFFFF;	padding-right: 5px;	}#address	{	width: 760px;	border-bottom-width: 2px;	border-bottom-style: solid;	border-bottom-color: #000000;	font-size: 1em;	padding-bottom: 2px;	background-color: #999999;	border-top-width: 4px;	border-top-style: solid;	border-top-color: #000000;	position: relative;	margin-right: auto;	margin-left: auto;	clear: both;	text-align: center;	}	#address span	{ margin-left: 25px;	}

Here's my html:

<!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=ISO-8859-1" /><title>JWR, Inc., Replacement Parts</title><link href="jwrSub.css" rel="stylesheet" type="text/css" /></head><body><div id="horizontalContainer">  <div id="header">    <div align="right"><img src="jwrImages/keyswitch.jpg" alt="JWR key switch" width="180" height="111" /></div>  </div>  <div id="navHor">    <p align="center"><a href="jwrIndex.html">Home</a><span><a href="contacts.html">Contact</a></span><span><a href="equipment.html">Equipment Sales</a></span><span><a href="news.html">News</a></span><span><a href="employment.html">Employment</a></span></p>    </div>  <div id="navLeft">         <!--Start vertical navigation -->    <ul style="list-style-type: none; margin: 0;">                  <li style="margin-right: 55px"><p align="right"><a href="about.html">About JWR</a></p>  </li>  <li style="margin-right: 85px">  <p align="right"><a href="recycling.html">Your Recycling<br />    Solutions</a></p>  </li>  <li style="margin-right: 95px">  <p align="right"><a href="waste.html">Waste Solutions</a></p>  </li>  <li style="margin-right: 105px">    <p align="right"><a href="product.html">Product Specific Solutions</a></p>  </li>  <li style="margin-right: 110px">  <p align="right"><a href="industry.html">Industry Specific Solutions</a></p>  </li>  <li style="margin-right: 110px">  <p align="right"><a href="service.html">Service & <br />    Installation</a></p>  </li>  <li style="margin-right: 110px">  <p align="right"><a href="used.html">Used Equipment</a></p>  </li>  <li style="margin-right: 110px">  <div id="youarehere"><p align="right"><a href="parts.html">Parts</a></p>    </div>  </li>  </ul>    </div>  <!--Close #navLeft End verticle navigation -->      <div id="rightContainer">            <img src="jwrImages/allenBradleyPushPull.jpg" alt="Allen Bradley Push Pull" width="138" height="198" class="floatLeft" />        <h1>PARTS</h1>	  	        <h3>JWR offers a full line of replacement parts for all compactors and balers. </h3>                  <p>Most parts are kept in stock for immediate shipment. Non-stocked parts can be shipped to your location within 24 hours. JWR contracts with major parts and electrical manufactures and purchases in quantity to pass that savings along to our customers and service vendors.          </p>                      <img src="jwrImages/Interlock.jpg" alt="Interlock Device" width="280" height="150" class="floatRight"/>     <p> </p>	      <p>We supply a full line of safety products such as our private labeled safety interlock device and push poles.</p>	      <p> </p>		    		  	      <img src="jwrImages/Parker.gif" alt="Parker Product logo" width="146" height="126" class="floatLeft" />        <p> </p>	      <p>JWR is also an authorized Parker Product Center stocking a full line of hydraulic hoses, fittings and accessories. Our local store front is open Monday thru Friday 7am-3:30pm, and all parts are available for immediate shipment. </p>		    		  <p> </p>		     		  	      <p align="center"><a href="mailto:parts@jwrinc.net">CLICK HERE TO ORDER PARTS</a> or call         888-699-2848</p>	      <p> </p>    </div>  <!--close #horizontalContainer --></div> <div id="address">          <p>322 N. Watertown Street, P.O. Box 356, Johnson Creek, WI 53038 • 888-699-2848 • FAX: 920-699-2847</p>	  </div>            </body></html>

Link to comment
Share on other sites

Seems I get one problem solved and another appears. Help!#horizontalContainer holds all content divs (except footer #address) and keeps things horizontally centered. It also has a repeating gradient image and a white background, both of which extend the length of the content. Because I want #horizontalContainer to expand with the content of the divs it holds, I have its length set at 100%.My problem? It does not show up in Firefox, Netscape or Safari. It does in Dreamweaver and IE. Here's what it's supposed to look like:helpW3ii.jpgHere's what it looks like in Firefox, Netscape and Safari.helpW3.jpgHere's my CSS:
body {  	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;  	margin: 0px;	padding: 0px;	background-color: #CCCCCC;	font-size: 62.5% /* 16px × 62.5% = 10px */;}p	{ font-size: 1.2em; color: #000000; line-height: 1.6em; }	p span	{ margin-left: 75px; }		a:link, a:visited	{ font-size: 1.2em; color: #000000; text-decoration: underline; }	a:hover, a:active { font-size: 1.2em; color: #ac2a2b; text-decoration: underline; }			h1	{	color:#AC2a2B;	font-size: 1.8em;	font-weight: bold;	}	h2	{ color:#000000; font-size: 1.6em; font-weight: bold; line-height: 1.2em; }h3	{ color:#000000; font-size: 1.2em; font-weight: bold; line-height: 1.2em; }	h4	{ color:#000000; font-size: 0.8em; }img.floatLeft {     float: left;     margin: 10px; }img.floatRight {     float: right;     margin: 10px; }#horizontalContainer	{	background-image: url(jwrImages/gradient.png);	background-repeat: repeat-y;	margin-top: 10px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	background-color: #FFFFFF;	width: 760px;	position: relative;	height: 100%;	}#header	{	width: 760px;	z-index: 2;	top: 2px;	background-image: url(jwrImages/header.gif);	background-repeat: no-repeat;	padding-top: 30px;	}#header	span	{	margin-left: 100px;}#rightContainer	{	height: 100%;	float: right;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	position: relative;	width: 480px;	padding-top: 30px;	padding-right: 20px;}				#navHor	{	width: 760px;	background-color: #999999;	border-bottom-width: 3px;	border-top-style: solid;	border-bottom-style: solid;	border-top-color: #000000;	border-bottom-color: #000000;	left: 0px;	height: auto;	border-top-width: 1px;	position: relative;	}	#navHor a:link, a:visited, #navLeft a:link, a:visited	{ font-size: 1.2em; color: #000000; text-decoration: none; }	#navHor a:hover, a:active, #navLeft a:hover, a:active { font-size: 1.2em; color: #ac2a2b; text-decoration: none; }			#navLeft	{	width: 255px;	float: left;	margin-top: 0px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	height: 436px;	z-index: 4;	position: relative;	background-image: url(jwrImages/abstractSub.png);	background-repeat: no-repeat;	padding-top: 30px;	background-color: #FFFFFF;}ul#navLeft {	width: 80px;	position: absolute;	z-index: 3;	left: 45px;	top: 0px;	height: 200px;	}		ul#navLeft li {	text-align: right;	text-decoration: none;	list-style: none;	height: 45px;}ul#navLeft li a {	text-decoration: none;	display: block;	}#youarehere	{	background-color:#FFFFFF;	padding-right: 5px;	}#address	{	width: 760px;	border-bottom-width: 2px;	border-bottom-style: solid;	border-bottom-color: #000000;	font-size: 1em;	padding-bottom: 2px;	background-color: #999999;	border-top-width: 4px;	border-top-style: solid;	border-top-color: #000000;	position: relative;	margin-right: auto;	margin-left: auto;	clear: both;	text-align: center;	}	#address span	{ margin-left: 25px;	}

Here's my html:

<!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=ISO-8859-1" /><title>JWR, Inc., Replacement Parts</title><link href="jwrSub.css" rel="stylesheet" type="text/css" /></head><body><div id="horizontalContainer">  <div id="header">    <div align="right"><img src="jwrImages/keyswitch.jpg" alt="JWR key switch" width="180" height="111" /></div>  </div>  <div id="navHor">    <p align="center"><a href="jwrIndex.html">Home</a><span><a href="contacts.html">Contact</a></span><span><a href="equipment.html">Equipment Sales</a></span><span><a href="news.html">News</a></span><span><a href="employment.html">Employment</a></span></p>    </div>  <div id="navLeft">         <!--Start vertical navigation -->    <ul style="list-style-type: none; margin: 0;">                  <li style="margin-right: 55px"><p align="right"><a href="about.html">About JWR</a></p>  </li>  <li style="margin-right: 85px">  <p align="right"><a href="recycling.html">Your Recycling<br />    Solutions</a></p>  </li>  <li style="margin-right: 95px">  <p align="right"><a href="waste.html">Waste Solutions</a></p>  </li>  <li style="margin-right: 105px">    <p align="right"><a href="product.html">Product Specific Solutions</a></p>  </li>  <li style="margin-right: 110px">  <p align="right"><a href="industry.html">Industry Specific Solutions</a></p>  </li>  <li style="margin-right: 110px">  <p align="right"><a href="service.html">Service & <br />    Installation</a></p>  </li>  <li style="margin-right: 110px">  <p align="right"><a href="used.html">Used Equipment</a></p>  </li>  <li style="margin-right: 110px">  <div id="youarehere"><p align="right"><a href="parts.html">Parts</a></p>    </div>  </li>  </ul>    </div>  <!--Close #navLeft End verticle navigation -->      <div id="rightContainer">            <img src="jwrImages/allenBradleyPushPull.jpg" alt="Allen Bradley Push Pull" width="138" height="198" class="floatLeft" />        <h1>PARTS</h1>	  	        <h3>JWR offers a full line of replacement parts for all compactors and balers. </h3>                  <p>Most parts are kept in stock for immediate shipment. Non-stocked parts can be shipped to your location within 24 hours. JWR contracts with major parts and electrical manufactures and purchases in quantity to pass that savings along to our customers and service vendors.          </p>                      <img src="jwrImages/Interlock.jpg" alt="Interlock Device" width="280" height="150" class="floatRight"/>     <p> </p>	      <p>We supply a full line of safety products such as our private labeled safety interlock device and push poles.</p>	      <p> </p>		    		  	      <img src="jwrImages/Parker.gif" alt="Parker Product logo" width="146" height="126" class="floatLeft" />        <p> </p>	      <p>JWR is also an authorized Parker Product Center stocking a full line of hydraulic hoses, fittings and accessories. Our local store front is open Monday thru Friday 7am-3:30pm, and all parts are available for immediate shipment. </p>		    		  <p> </p>		     		  	      <p align="center"><a href="mailto:parts@jwrinc.net">CLICK HERE TO ORDER PARTS</a> or call         888-699-2848</p>	      <p> </p>    </div>  <!--close #horizontalContainer --></div> <div id="address">          <p>322 N. Watertown Street, P.O. Box 356, Johnson Creek, WI 53038 • 888-699-2848 • FAX: 920-699-2847</p>	  </div>            </body></html>

First of all: when using percentages to define width and height, the parent elements must have a defined height too.This is why you need to give 100% width and height to the html and body element:CSShtml,body { width: 100%; height: 100%; }/* Do not forget this is applied to both HTML and BODY */
Link to comment
Share on other sites

Ingolme,Thanks for your help. It works well but sadly created another issue.I applied the following to my CSS: html,body { width: 100%; height: 100%; }/* Do not forget this is applied to both HTML and BODY */It brought out the white background and repeating gradient of the #horizotontalContainer. However, it bumped the footer #address down so it's not vertically aligned with the rest of the page. Any ideas?helpW3iii.jpg

Link to comment
Share on other sites

You'll have to put the #address div and everything else inside the #horizontalContainer div, because the horizontal container is taking 100% of the height of the screen, anything outside of it will go further down.

Link to comment
Share on other sites

You'll have to put the #address div and everything else inside the #horizontalContainer div, because the horizontal container is taking 100% of the height of the screen, anything outside of it will go further down.
I included #address inside #horizontalContainer, but the same problem remains. It looks the same as shown above.
Link to comment
Share on other sites

You've also given #rightContainer 100% height. You'll have to take that away because it's forcing the #address div down.
Ah!! Thanks! That did the trick!!!!! http://w3schools.invisionzone.com/style_em...lt/rolleyes.gifNow I have one more question...never so simple to answer someone's original question, eh? I'd like my content to resize according to the viewer's needs. Or, this CSS is a template for a variety of pages and the #rightContainer may have content longer in some pages than others. Is there a way of designating a height for these purposes, other than a concrete measurement of px or ems? What if I do a percentage, but less than 100%?Thanks so much for your help Ingolme. I've been frustrating with this for days and days!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...