Video Rob

When I center the page of my website the background from one of the divs disappears and so does the border.

Here is the css:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #BAD9F5;

}

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}

h1 {
font-size: 18px;
font-weight:bold;
color: #333;
background-color:#FFF;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center;
margin-top:3;
padding:0;
}

h2 {
font-size: 9px;
font-weight:lighter;
color: #ffffff;
text-align:left;
margin:0;
padding:0;

}

h3 {
font-size: 10px;
color: #ffffff;
text-align:left
}

h4 {
font-size: 11px;
color: #ffffff;
background-color:#404040;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center
}

.mainbody {
width:782px;
border-left:thick #A0C9EB solid;
border-right:thick #A0C9EB solid;
background-color:#333333;
position:absolute;
margin-left:auto;
margin-right:auto;
top: 3px;

}

.banner {
width:100%;
height: 104px;
background:url(images/bannerbg_02.gif) repeat-x;
}

.bannerimage {
background:url(images/logo_02.gif) no-repeat left;
margin-left:60px;
height:104px;
}

.navbg {
background-image:url(images/navrepeat_09.gif);
background-repeat:repeat-x;
width:100%;
height:33px;
}

#navcontainer ul {
margin: 0;
padding-top: 0px;
list-style-type: none;
text-align: center;
font-family: arial;
font-size: 11px;
height: 25px;
padding-top:8px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a {
text-decoration: none;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
padding-top:8px;
color: #FDC8B9;
width: 100%;
height: 33px;
border-right:thin inset #FF0000
}

#navcontainer ul li a:hover {
color: #fff;
width: 100%;
height:33px;
}

.leftcolumn {
width:201px;
float:left;
margin:0px;
background-color:#ededed;
padding-bottom:0px;
border-bottom:thick inset #525252;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}

.rightcolumn {
width:561px;
float:right;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
padding-top:10px;
color:#000;
}

.nav2 {
width:175px;
background:url(images/nav2_03.gif) repeat-x;
height:15px;
border-left:thin solid #CCCCCC;
border-top:thin solid #CCCCCC;
padding-left:20px;
padding-top:6px
}

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #00F;
}

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #009;
}

a:hover {
text-decoration: none;
color: #F00;
}

a:active {
text-decoration: none;
color: #0099FF;
}
.style1 {color: #FFFFFF}

.searchform {
float:right;
margin-right:20px;
height:62px;
width:200px;
padding-top:42px;
}

.submitform {
float:right;
margin-right:5px;
height:58px;
width:100px;
padding-top:46px;
}

.input {
background:url(images/nav2_03.gif);
border:thin inset #000000;
height:21px;
width:180px;
padding-left:20px;
padding-top:4px
}

.footer {
width:782px;
height:30px;
text-align:center;
border-top:thin solid #CCCCCC;
background:url(images/bannerbg_02.gif);
float:left;
padding-top:10px;
color:#FFFFFF
}

.footer a {
color:#FFFFFF;
}

.footer a:visited {
color:#FFFFFF;
}

.footer a:active {
color:#FFFFFF;
}

.footer a:hover {
color:#FFFFFF;
background-color:#333333;
}

.submit {
background-color:#EDEDED;
border:0px;
outline:0px;
}

.columnheader {
height:20px;
width:201px;
background: url(images/navrepeat_09.gif) repeat-x;
text-align:center;
color:#FFFFFF;
font-weight:bold;
border-top:thin #040404 solid;
padding-top:8px;
}

.newsheadertext {
font-size: 11px;
color: #ffffff;
background-color:#404040;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center
}

.line1 {
font-size: 12px;
font-weight:bold;
color: #ffffff;
background-color:#404040;
width:100%;
border-bottom: thin dashed #CCCCCC;
text-align:center;
margin:0;
padding:0;
}

.line2 {
font-size: 9px;
font-weight:normal;
color: #ffffff;
background-color:transparent;
text-align:right;
margin:0;
padding:0;
}

.downloady {
color:#FFFFFF;
}

When I remove position:absolute; from the .mainbody style, the page centers but gray background under the menu disappears and so does the thin boarder around the mainbody.

Does anyone know what is causing this? the site is online at howigotbig.com

Richard Whyte

Not sure, but I would change the mainbody tag to an ID from a class and then fix the DIV tag that is calling it.

Meaning you have

.mainbody {
width:782px;
border-left:thick #A0C9EB solid;
border-right:thick #A0C9EB solid;
background-color:#333333;
position:absolute;
margin-left:auto;
margin-right:auto;
top: 3px;
}

Change to:

#mainbody {
width:782px;
border-left:thick #A0C9EB solid;
border-right:thick #A0C9EB solid;
background-color:#333333;
position:absolute;
margin-left:auto;
margin-right:auto;
top: 3px;

}

I would also try making the position Relative

The Div that calls this would look like: <div id="mainbody">

Give that a try.

Have a Great Day!

Richard Whyte - Website Design, Search Engine Optimization and Online Marketing - WebYabber.com, Read my Blog - richard-whyte.com, Easy Sales Page Creator - Power Sales Page Creator

cma01

Without looking at your actual page, I would say it is probably an issue with the division with the background needing to be cleared. The easiest way is to add a clearing division right before the closing tag of the mainbody division.

<div class="clear"></div>

.clear {clear: both;}

If you're not already using it, Firebug for Firefox is a must when fine tuning your CSS.

cma01

Oh . . . and you don't want that mainbody division to be absolute, because your margin will be 0 (top and left.)

If you want to be able to use the main division as a reference point for any absolute divisions it contains, set the mainbody position to "relative." Any absolute divisions are tied to the last division that has a position specified.