Margins and Padding

[DieuxSoldat_04]

Hey Zenners,

I went through my stylesheet but for some reason my site always has a little problem with the side bars and center headers. Here is a link to my developing site. All the bars that are red is the problem. I want them to all be the same height and width for the headers with the exception of the center boxes being longer in width. Please help.

Warm Regards,
Jason H

[PRedmond]

have you checked your stylesheet.css file for all occasions of rightBoxHeading and leftBoxHeading??
That's what I use to modify the sidebars.

[DieuxSoldat_04]

I went through my stylesheet and changed what I could do see what each thing did, kind of learn as I went. I was able to change the side bars all to 0em but for the middle ones I'm still not quite sure how. As for the sidebars, I have found which area configures what but I can't get them all to look the same for some reason. I changed all the sidebars that are red to Height: 0em but they still appear to be different sizes, or is something wrong with my eyes?

Links or direct codes to change would be appreciated!

Thanks!
Jason H.

[gjh42]

If you want the sideboxes to match, you have to give them the same dimensions:

.leftBoxHeading, .centerBoxHeading {
	margin: 0em;
	background-color: #FF0000;
	padding: 0.5em 0em;  <------.5em top & bottom
	}

.leftBoxContainer {
	border: 0px solid #ffffff;
	}

.sideBoxContent {
	background-color: #ffffff;
	padding: 0.0em;
	}

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 11px;
	color: #FFFFFF;
	}

.rightBoxHeading {
	margin: 0em;
	background-color: #FF0000;
	padding: 0.2em 0em;  <------.2em top & bottom
	}

[DieuxSoldat_04]

Ok so here is the code I changed it to.

.leftBoxHeading, .centerBoxHeading {
    margin: 0em;
    background-color: #FF0000;
    padding: 0.3em 0em;
    }

.leftBoxContainer {
    border: 0px solid #ffffff;
    }

.sideBoxContent {
    background-color: #ffffff;
    padding: 0.0em;
    }

h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 11px;
    color: #FFFFFF;
    }

.rightBoxHeading {
    margin: 0em;
    background-color: #FF0000;
    padding: 0.3em 0em;
    }

After that, my page looks more disoriented than before when I made the padding the same. Did I misunderstand or could something else be wrong??

[gjh42]

The apparent difference between shopping cart and categories headings may be an optical illusion - FF Web Developer says they are the same 20px height.

The search heading in the right sidebar has a <label> element which has a larger line-height by default; Add this to your stylesheet:

.rightBoxHeading label {line-height: 1.1em;}

The breadcrumbs bar is not affected by the sidebox/centerbox styles; add this to control it:

#navBreadCrumb {line-height: .88em;}

[DieuxSoldat_04]

Totally awesome gjh42! That fixed the sidebars problem, but the problem of the center boxes are still there. As in my first post, the center box headers are different width; Home bar is wider than New Products bar. Could someone help with this as well. Much appreciated!

Thanks!
Jason H.

[PRedmond]

If you use the 'web developer' addin for firefox, it will let you check what css tags to edit - makes it a whole lot easier than scanning through source files...

[gjh42]

The "Home bar" is not a centerbox header. It is the breadcrumbs navigation, and can be controlled as noted above, or possibly by changing its padding.

Looks like you have gotten them all sorted now.

[DieuxSoldat_04]

Sorry to revive this thread again but I don't want to make a new one. On my site I have a lot of the paddings and margins set up now but one thing I can't seem to correct is the white margin between my two headers. Please help!

Sincerely,
Jason H.