...

View Full Version : color filling areas it shouldnt!



stexia
12-30-2009, 10:49 PM
http://securestoragesites.com/laredoselfstorage.com/size.html

i need explained to me why the background is grey in the middle when the div technically starts at the bottom....why is the grey flooding up in the top middle lines???

Thank you gentlemen in advance for your help.:o

Excavator
12-31-2009, 01:31 AM
Hello stexia,
You are repeating this image accross the X axis as a background of the body -
http://securestoragesites.com/laredoselfstorage.com/images/background_repeat.jpg

What were you expecting it to do?
Just taking a guess that maybe you wanted it to have that tan background across the top of the whole page but matching the height of your header?
It would be best to edit your background_repeat.jpg in photoshop or something similar but you could also do it this way -

body {
background: #0C7926 url(../images/background_repeat.jpg) repeat-x 0 -213px;
font-family: Verdana, Arial, Helvetica, sans-serif, Academy;
font-size: 12px;
}

stexia
12-31-2009, 04:31 AM
no no.. =) not the back ground.. the GREY part in the body. If you click on the other links you will see how it is suppose to look. The part im talking about it a little space between the grey text box and the green and yellow boxes. =) see it?

Stexia*

vineet
12-31-2009, 04:46 AM
replace this style in your css



#content {
padding-left: 15px;
float: left;
width: 518px;
padding-right: 15px;
clear:right;
background-color:#FFFFFF
}


vineet

abduraooft
12-31-2009, 08:32 AM
The following should fix it.
#content {/*styles.css (line 78)*/
margin-left:230px;
padding-left:15px;
padding-right:15px;
/*float:left;
width:518px;*/
}
You don't need to apply floats and widths on both columns to make a 2 column layout.

Excavator
12-31-2009, 08:33 AM
no no.. =) not the back ground.. the GREY part in the body. If you click on the other links you will see how it is suppose to look. The part im talking about it a little space between the grey text box and the green and yellow boxes. =) see it?

Stexia*

:o Duh, I see what you mean. Giving #content a white background does hide the problem.
Another way is to put #bottomContentInternal where it belongs -

#bottomContentInternal {
background-color: #E4E4E6;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin-right: 18px;
margin-left: 18px;
margin-top: 18px;
margin-bottom: 18px;
clear:both;
}

The same thing is happening with #footer. If you remove the background color from #bottomContentInternal you can see the footer extends up the same way.
Same fix works there too -
#footer {
background-color: #0C7926;
clear: both;
}

-----> ab has shown you the best fix though. See his post above mine.
Floating one column and margining the other over has the added benefit of avoiding an IE bug or two.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum