Wierd Sidebox Issue

[deejmer]

If you look at this screenshot...

http://209.139.209.207/pleasant.jpg

...you will see that there is for some reason, this odd gap of extra space in each sidebox which doesn't have the border or content within it (circled in red). I cannot for the life of me figure out what is wrong, and I am assuming its a css issue. Can anyone help me figure out how to remove the dead space?

Also, You will notice (this is mozilla only) there is a white pixel between the blue-bubble background image (the background-image defined in .columnLeft class) and the black image fade page background(defined in the body class) circled in blue; as well as a little 1 pixel "pushout" on the right side near the top which seem to push out where the Breadcrumb and Header are.

Again....this second issue is only relevent to Mozilla....


I have included the code for what I think should be the suspect classes:

------------------------------------------------------------------
Sideboxes
------------------------------------------------------------------
/*sideboxes*/
.columnLeft {
  background-image: url(bubbles.jpg);
  background-repeat:  repeat-y;
  padding: 4px;
  }



h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1.45em;
	color: #A2A1A1;
	font-family: Century Gothic, Trebuchet MS, Verdana, Arial, sans-serif;
	font-weight: normal;
	}


.leftBoxHeading, .centerBoxHeading {
  background-color: #DBDBDB;
  background-image: url(boxHeader.jpg);
  font-family: Trebuchet MS, Verdana, Arial, sans-serif;
  text-align: right;
  color: #5D5C5C;
  padding: 0px;
  padding-left: 5px;
  padding-right: 3px;
  /*border-bottom: 1px solid #000000;*/
	}

.leftBoxContainer {  
  
  background-color: #FFF;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  -moz-opacity:0.70; 
  margin-top: 15px;
	}

.sideBoxContent {
  line-height: 125%;
  padding: 6px;
  border-right: 2px solid #F8E898;
  border-left: 2px solid #B4B881;
  border-bottom: 1px solid #B4B881;
	}

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.1em;
	color: #FFFF00;
	}

.rightBoxHeading {
	margin: 0em;
	background-color: #663366;
	padding: 0.2em 0em;
	}

h3.leftBoxHeading a:hover {
	color: #FFFF33;
	text-decoration: none;
	} 

h3.rightBoxHeading a:hover {
	color: #FF0000;
	text-decoration: none;
	}

.rightBoxContent {
	background-color: #ffffff;
	margin-bottom: 1em;
	}


------------------------------------------------------------------
Header Wrapper
------------------------------------------------------------------
#headerWrapper {
background-image: url(header.jpg);
}


------------------------------------------------------------------
Breadcrumb
------------------------------------------------------------------
#navBreadCrumb {
	background-color: #fff;
	}

#navBreadCrumb, #navEZPagesTop {
	font-size: 0.95 em;
	font-weight: bold;
	font-family: Trebuchet MS, Verdana, Arial, sans-serif;
	margin: 0em;
	padding: 0.5em;
	}


------------------------------------------------------------------
Body Class
------------------------------------------------------------------

body {
	color: #000000;
    background: #F0F0F0;
	margin: 0px;
	padding: 0px;
    font-family: Trebuchet MS, Verdana, Arial, sans-serif;
	font-size: .7em;
	background-image: url(bg.jpg);
	background-repeat: repeat-y;
	background-position: center; 
	}

[kuroi]

Sorry, but the diagnostic tools that we use to crack these problems don't work on screenshots and the cascading nature of CSS means that the problems are usually somewhere other than where the site developer expects them (often this is why they are problems) so there's little point in reviewing your code either.

If you're serious about solving this we need a link to a live URL where we can see the problem in action.

[deejmer]

Right.....makes sense. I was trying to write as complete of a post as I could, but I'm developing locally so was just being lazy and didnt want to take the time to push this out to the server yet...

I now have the site up at http://209.139.209.207/

Let me know what you think...and thanks for taking a look...I've spent 3 hrs on this staring at the stupid CSS and PHP files.

Thanks.

[Kim]

Your sidebox headers are <h3> and heading have default margins unless you override them with your CSS.

[deejmer]

OH THANK YOU THANK YOU!

What an easy fix....why didnt I think of that?!

Sometimes an outside view is huge.

THanks again!

[Kim]

I call that "a fresh set of eyes". Be sure to click the coffee cup when you can.