Body background showing up where it shouldn't

[PonchoX]

Hi.

Can one of you wizards tell me why this page:

http://radified.com/index.rad

.. has a little bit of the background graphic showing up at the top and bottom of the center "mainContent" div (which I named "radEntries").

I'm normally pretty good with CSS but can't figure out this one.

It's easier to see at the bottom of the page .. where the "mainContent" div meets the footer. Harder to see at the top where it meets the header.

Thanks.

[Fisher]

First, you need to remove the <br> tag from the bottom:

<br class="clearFloat" />

Then add:

.validator {margin:0}

to your CSS. This will fix the bottom part.

You'll have to similarly remove margin or padding from the offending part at the top.

You could have avoided this by starting your CSS (always!) with *{margin:0;padding:0;}, but if you do it now you'd be in for a shock at the effect it has on your page.

[PonchoX]

Thank-you, kindly. You *are* a wizard.

So basically the margins of first and last elements .. nearest the top and bottom of that div .. were causing the problem.

What would you suggest I do to clear the floats in "#mainContent"?

My Dreamweaver starter page says:

This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats

What if I » display: none?? Will that both clear and hide?

Update .. display: none gets rid of the graphic (at the bottom) .. but will that kill my clear?

[Fisher]

Shouldn't affect your clear. Otherwise, you can just apply the clear to the footer (footsie).

If you want the blue sidebars overlapping your footer, leave it the way it is. Otherwise, you'll have to make 3 more changes:

.gnarlyHybrid #sidebar1 {
	float: left;
	width: 11em;
	background: #699;
	padding: 0;
}
.gnarlyHybrid #sidebar2 {
	float: right;
	width: 11em;
	background: #699;
	padding: 0;
}
.rad {
	background-color:#141414;
	padding: 10px 6px 6px 6px;
	border-right: 10px solid #699;
	border-left: 10px solid #699;
	text-align: center;
	margin-top:15px;
}

[PonchoX]

Hi.

Can't thank you enough. The more I use CSS, the more convinced I am it contains an element of black magic.

I still get the over-lap in IE8.

I see you eliminated the 15px padding I had set for the TOP of the sidebars. Why would the TOP padding affect the BOTTOM overlap?

Funny how, after seeing things a certain way for a long time, we just get used to them. Takes someody pointing out a problem to bring it to our attention.

I long ago rationalized away the bottom overlap problem by figuring not many visitors would be scrolling to the bottom .. especially after I put that menu bar at the top.

What tools do you use to troubleshoot? Firefox plugins?

[abduraooft]

What tools do you use to troubleshoot? Firefox plugins?

Most probably be firebug!