8 replies [Last post]
swaddock
Offline
Regular
Hartford, Connecticut
Last seen: 8 years 14 weeks ago
Hartford, Connecticut
Timezone: GMT-4
Joined: 2007-01-31
Posts: 38
Points: 2

I cannot seem to get the white background or image in main wrapper to appear.

I have my main wrapper div "div#wrapper" set to have a backgound color of white and an image that I want to have from top to bottom. I set the color incase the image fails.

The problem is, it works in IE but not Firefox. When I change the height from auto to a specific value, say 400px, the white background shows up but not at auto.

Any ideas????

.css code

div#wrapper {
  width:790px;
  margin:auto;
  background-color:#fff;
  height:auto;
  background-image: url(..images/wrapperBG.jpg);} 

Born right the first time.

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 9 years 32 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Its working as its meant to,

Its working as its meant to, with the height set to auto the div will expand itself to encompass its content so if its empty it has no reason to grow in size, if all you want is the image in the div then consider inserting in in your html but if it is to be a background then you'll have to either set a height or add enough content.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 16 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Code?

Verschwindende wrote:
  • CSS doesn't make pies

swaddock
Offline
Regular
Hartford, Connecticut
Last seen: 8 years 14 weeks ago
Hartford, Connecticut
Timezone: GMT-4
Joined: 2007-01-31
Posts: 38
Points: 2

Not sure I understand. There is plenty of content in wrapper

Not sure I am understanding. The wrapper has plenty of content in child wrappers:

Enrollment Investments Page

-->
.ctl00_ContentPlaceHolder1_RpSectionContainer1_RpTabMenu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_ContentPlaceHolder1_RpSectionContainer1_RpTabMenu1_1 { text-decoration:none; }
.ctl00_ContentPlaceHolder1_RpSectionContainer1_RpTabMenu1_2 { background-color:Transparent;width:168px; }







Welcome

Contributions

Investments

Confirmation

Select a Plan | Manage Your Accounts
  • Current Selections
  • Date-Based Options
  • Risk-Based Options
  • Create My Own




If the options displayed are not right for you, select what meets your needs.

 

Your Plan's Default Option is:

100% Guaranteed New

 

More Investment Options:

 

Date-Based provide multiple asset classes, investment styles and managers in a single investment solution. These options automatically invest more conservatively over time by increasing allocation to fixed income investments and reducing allocation to equity investments.

 

Risk-Based provide multiple asset classes, investment styles and managers in a single investment solution. These options each maintain a consistent investment risk profile and allow you to select an investment solution that corresponds to your individual comfort level with investment risk.

 

Create My Own allows you to construct a portfolio, based upon your specific retirement savings goals, from the full array of investment options available to you.

 





 















//mod edit: code tags corrected to <code></code>
--gary/kk5st

Born right the first time.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Where is the css? We need

Where is the css? We need it all.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

swaddock
Offline
Regular
Hartford, Connecticut
Last seen: 8 years 14 weeks ago
Hartford, Connecticut
Timezone: GMT-4
Joined: 2007-01-31
Posts: 38
Points: 2

Whoops....here ya go. NO

Whoops....here ya go. NO LAUGHING!

@media screen {
body {
	margin: 0px;
	background-color: #ecefff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;}

p {
	font-size: 11px;
	margin:10px 10px 10px 10px;
	line-height: 140%;
	color:#333333;}

table{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;}	
	
/* Specific attributes for the Performance tables */

table.DataTable {
	width:auto; 
	border-collapse: collapse; 
	border:1px solid #cccccc;
	border-spacing:20px;}

table.DataTable tr {
	border-spacing:20px;
	padding-top:10em;}

table.DataTable td.headerDescription{
	width: 240px;
	background-color:#f5f5f5;}

table.DataTable td.fundCell {
	width: 240px;
	text-indent:26px;}

table.DataTable td.percentageCell {
	width: 60px;
	vertical-align:middle;
	text-align:center;
	border-right:1px solid #cccccc;}

table.DataTable td.seperator {
	border-top:1px solid #cccccc;}

table.DataTable td.assetCategory {
	width: 240px;
	text-indent:18px;
	padding-top:5px;
	vertical-align:middle;}

table.DataTable td.headerColumn {
	font-weight:bold ;
	width:40px;
	background-color:#f5f5f5;
	text-align :center;}

table.DataTable td.leftHeaderColumn {
	font-weight :bold ;
	width:40px;
	background-color:#f5f5f5;
	text-align :center ;
	border-left:1px solid #cccccc;}

table.DataTable td.assetClass {
	width: 240px;
	padding-top:15px;
	text-indent:10px;
	vertical-align:middle;
	font-weight :bold;}

table.DataTable td.performanceCell {
	width:60px;
	background-color:#f5f5f5;
	text-align:center ;
	vertical-align:middle;}
	
/* End Specific attributes for the Performance tables */	

input.btn{
   color:#fff;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
   padding:2px;
   background-color:#0065ad;
   border-width:2px thin;
   border-top-color:#496DB6;
   border-left-color:#496DB6;
   border-right-color:#002164;
   border-bottom-color:#002164;
   margin-left:5px;
   margin-right:5px;}

a:link {
  color: #0065ad;
  text-decoration:underline;}
  
a:visited {
  color: #0065ad;}

a:hover {
  color: #0000FF;}
  
.headerbartext {
  font-size: 12px;
  font-weight:bold;
  padding-left:15px;
  line-height: 140%;}
  
div#wrapper {
  width:790px;
  margin:auto;
  background-color:#fff;
  height:auto;
  background-image: url(/retire/images/journey2/wrapperBG.jpg);}
  
#logo {
  float: left;
  margin-left:1px;
  width: 200px;
  background:url(/retire/images/journey2/mm-logo.jpg) no-repeat;
  height:50px;}
  
#globalnav {
	float: right;
	width: 574px;
	margin-right: 7px;
	background-color:#FFFFFF;
	height: 50px;
	line-height:4em;
	text-align:right;
	vertical-align:baseline;}
	
#masthead {
  float: left;
  width: 780px;
  margin-left:1px;
  background:url(/retire/images/journey2/mm-journey-masthead-780x92.jpg) no-repeat;
  height: 92px;}
  
#crumbs {
	float: left;
	margin:0 0 0 5px;
	width: 381px;
	background-color: #fff;
	height: 22px;}
	
#selplannav {
	float: right;
	margin-right: 8px;
	text-align:right;
	width: 370px;
	background-color: #fff;
	height: 22px;}
	

/* Comlumn Headers --------------------------------------- */
.narrow_column_header {
  float:left;
  width:200px;
  margin:0 0px 0 4px;
  background-image: url(/retire/images/journey2/narrow_header1.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}
  
.narrow_column_header_borderless {
  float:left;
  width:200px;
  margin:0 0px 0 0px;
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#0065ad;}
  
.left_column_header {
  float:left;
  width:380px;
  margin:0 0 0 5px;
  background-image: url(/retire/images/journey2/half_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;	
  color:#fff;}
  
.right_column_header {
  float:left;
  width:380px;
  margin:0 0 0 3px;
  background-image: url(/retire/images/journey2/half_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;	
  color:#fff;}
  
.wide_column_header {
  float:left;
  width:558px;
  margin:0 0 0 5px;
  background-image:url(/retire/images/journey2/wide_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}
  
.full_column_header {
  float:left;
  width:767px;
  margin:0 0 0 5px;
  background-image:url(/retire/images/journey2/full_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}
  

/* Comlumns ----------------------------------------------- */
.narrow_column_wrapper{
  float:right;
  width:195px;
  padding-right:8px;
  padding-bottom:5px;}
  

.left_column_wrapper{
  float:left;
  width:380px;
  padding-bottom:5px;}

.right_column_wrapper{
  float:right;
  width:380px;
  padding-right:8px;
  padding-bottom:5px;}

.wide_column_wrapper{
  float:left;
  width:558px;
  padding-bottom:5px;}

.full_column_wrapper{
  float:left;
  width:767px;
  padding-bottom:5px;}

.narrow_column {
  float:left;
  width:195px;
  background: url(/retire/images/journey2/shadow.gif) no-repeat bottom right;
  margin: 1px 0 0 4px !important;
  margin: 0px 1px 0 4px;}
  
.narrow_column_borderless {
  float:left;
  width:195px;
  margin: 1px 0 0 4px !important;
  margin: 0px 1px 0 4px;}
  
.half_left_column {
  width: 380px;
  float:left;
  background: url(/retire/images/journey2/shadow.gif) no-repeat bottom right;
  margin: 1px 0 0 5px !important;
  margin: 0px 1px 0 5px;}
  
.half_right_column {
  width: 380px;
  float:left;
  background: url(/retire/images/journey2/shadow.gif) no-repeat bottom right;
  margin: 1px 0 0 3px !important;
  margin: 0px 1px 0 3px;}
  
.wide_column {  
  width: 558px;
  float:left;
  background: url(/retire/images/journey2/shadow.gif) no-repeat bottom right;
  margin: -1px -10px 10px 5px!important;
  margin: -1px -11px 10px 5px;}
  
.full_column {  
  width: 767px;
  float:left;
  background: url(/retire/images/journey2/shadow.gif) no-repeat bottom right;
  margin: -1px -10px 10px 5px!important;
  margin: -1px -11px 10px 5px;}
  

/* Comlumn Outlines --------------------------------------- */
.narrow_column_outline {
  width: 184px;		
  border: 1px solid #a9a9a9;
  margin: -1px 5px 5px 0px !important;
  padding: 5px 5px 5px 5px;}
  
.half_column_outline {
  width: 363px;		
  border: 1px solid #a9a9a9;
  margin: -1px 5px 5px 0px !important;
  padding: 5px 5px 5px 5px;}
  
.wide_column_outline {
  width: 542px;		
  border: 1px solid #a9a9a9;
  margin: -1px 5px 5px 0px !important;
  padding: 5px 5px 5px 5px;}
  
.full_column_outline {
  width: 751px;		
  border: 1px solid #a9a9a9;
  margin: -1px 5px 5px 0px !important;
  padding: 5px 5px 5px 5px;}
  
/* Comlumn Outlines --------------------------------------- */

/* Title and content formats --------------------------------------- */
  
.section_topic {
  font-size: 1.0em;
  margin-left:10px;
  font-weight:bold;
  line-height: 120%;
  color:#0065ad;}
  
.section_header {
  margin-left:10px;
  font-weight:bold;
  line-height:100%;
  color: #333333;}
  
.p_table_data {     
   line-height: 100%;
   font-size: 11px;}
   
.section_topic {
  font-weight:bold;
  line-height: 100%;
  color:#0065ad;
  margin-top:20px;
  margin-bottom:-7px;}
  
.p_sub_content { 
  line-height: 140%; 
  padding-left: 10px;
  color:#333333;}
  
.instructions {
  margin:10px 10px 10px 10px;
  line-height: 160%;
  color:#333333;}
  
.instructions {
  font-size: 1.0em;
  margin:10px 10px 10px 10px;
  line-height: 160%;
  color:#333333;}
  
.content {
  font-size: 1.0em;
  margin:10px 10px 10px 10px;
  line-height: 140%;
  color:#333333;}

/* Title and content formats --------------------------------------- */
  
.half_column_background {
  background: url(/retire/images/journey2/half_column_background.jpg) repeat-y; padding-top:.25em; padding-bottom:.25em;}
  
.wide_column_background {
  background: url(/retire/images/journey2/wide_column_background.jpg) repeat-y; padding-top:.25em; padding-bottom:.25em;}
  
.full_column_background {
  background: url(/retire/images/journey2/full_column_background.jpg) repeat-y; padding-top:.25em; padding-bottom:.25em;}
  
.sub_content {
  font-size: 1.0em;
  margin:10px 10px 10px 20px;
  line-height: 140%;
  color:#333333;}
  
.bottomCap {
  width:790px;
  height:13px;
  margin: 0 auto 0px;
  background: url(/retire/images/journey2/wrapper_bottom_cap.jpg) no-repeat;}
  
div#footerwrapper {
  clear:both;
  width: 790px;
  margin: auto;
  height:auto;
  background-color:#fff;
  background-image: url(/retire/images/journey2/wrapperBG.jpg);}
  
#footer_compliance_nr {
  float: left;
  width: 115px;
  font-size:10px;
  color:#999999;
  text-align:left;
  margin-left:5px;}
  
#footer_copyright {
  float: left;
  width: 470px;
  font-size:10px;
  color: #999999;
  text-align:center;}
  
#footer_legalnotices {
  float: right;
  width: 115px;
  font-size:10px;
  text-align:right;
  margin-right:8px;
  color: #999999;}
  
div#menuwrapper{ 
  margin:auto;
  width: 350px;
  height: 22px;
  margin: 0 0 0 0;}
  

/* Tab navigation --------------------------------- */ 

ul.primary { 
  border-collapse: collapse;
  padding: 0 0 0 1em; 
  white-space: nowrap; 
  list-style: none; 
  margin: 5px; 
  height: auto; 
  line-height: normal; 
  border-bottom: 1px solid #bbb;}

ul.primary li { 
  display: inline;
  margin:0 0 -5px 0;}

ul.primary li a { 
  background-color: #ddd; 
  border-color: #bbb; 
  border-width: 1px; 
  border-style: solid solid none solid; 
  height: auto; 
  margin-right: 0.5em; 
  padding: 0 1em; 
  text-decoration: none;} 

ul.primary li.active a { 
  background-color: #fff; 
  border: 1px solid #bbb; 
  border-bottom: #fff 1px solid;} 

ul.primary li a:hover { 
  background-color: #eee; 
  border-color: #ccc; 
  border-bottom-color: #eee;}
  
.AspNet-Menu-Selected{
 float: left;
 background: url(/retire/images/journey2/rect_tab_selected.gif)   no-repeat;
 height: 20px;
 width: 148px;
 text-align:center;
 line-height:20px;
 vertical-align:bottom;
 font-size: 12px;  
 display:inline;
 margin-left: 0px;
 font-weight:bold;
 text-decoration:none;}
 
.AspNet-Menu-CurveSelected{
 float: left;
 background: url(/retire/images/journey2/curve_tab_selected.gif)   no-repeat;
 height: 20px;
 width: 148px;
 text-align:center;
 line-height:20px;
 vertical-align:bottom;
 font-size: 12px;  
 display:inline;
 margin-left: 0px;
 font-weight:bold;
 text-decoration:none;}
 
.AspNet-Menu-Leaf{
 float: left;
 background: url(/retire/images/journey2/rect_tab_notselected.gif)   no-repeat;
 height: 20px;
 width: 148px;
 text-align:center;
 line-height:20px;
 vertical-align:bottom;
 font-size: 12px;  
 display:inline;
 margin-left: 4px;
 text-decoration:none;}
 
.AspNet-Menu-CurvedLeaf{
 float: left;
 background: url(/retire/images/journey2/curve_tab_notselected.gif)   no-repeat;
 height: 20px;
 width: 148px;
 text-align:center;
 line-height:20px;
 vertical-align:bottom;
 font-size: 12px;  
 display:inline;
 margin-left: 4px;
 text-decoration:none;}
 
AspNet-Menu-Link{
 text-decoration:none;}
 
.tab_content_container{
   float:left;
   width:744px;
   background-color:#FFF;
   margin-top:2px;
   border-top:none;
   border-left:1px #CCCCCC solid;
   border-right:1px #CCCCCC solid;
   border-bottom:1px #CCCCCC solid;
   padding:0 0 30px 0;}
   
}

Born right the first time.

swaddock
Offline
Regular
Hartford, Connecticut
Last seen: 8 years 14 weeks ago
Hartford, Connecticut
Timezone: GMT-4
Joined: 2007-01-31
Posts: 38
Points: 2

Quick link to a test page

Here is a link to a test page that displays the issue. Background shows up in IE and gives the illusion of a 1px border with dropshadow. Nothing in FF

http://www.rustbug.com/mmtest/test-investment.html

Born right the first time.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

You have failed to enclose

You have failed to enclose your float elements. IE does this incorrectly. To #wrapper, add {overflow: hidden;}.

You're missing an opening <style> tag.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

swaddock
Offline
Regular
Hartford, Connecticut
Last seen: 8 years 14 weeks ago
Hartford, Connecticut
Timezone: GMT-4
Joined: 2007-01-31
Posts: 38
Points: 2

Resolved!

Wow!...That worked perfectly! Thanks so much. I really need to learn more about .css. I don't fully understand why that attribute worked to resolve the issue.

Thanks so much!

Born right the first time.