Gap between sidebox header and border, but only on one side.

I'm trying to remove the extra space between the border around my sidebox content and the header to make it appear as if it is hanging from the header graphic.

I've managed to adjust the left side by changing this

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/BGCprimlight3.gif);
padding: 0.5em 0.2em;

to this....

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/BGCprimlight3.gif);
padding: 0.0em 0.2em

Here is before and after shots to show the problem.

http://picasaweb.google.com/simply.heartfelt.creations/ExamplesOfSideboxes

If you notice the sidebox on the right still has a small gap. :dontgetit

I tried changing the other 0.2em to 0.0em also, but this still did not change it.

Does anyone know what to change to make the right side correct?

TIA!

Blessings
Christy

While pictures are great to show the issue it is still a guessing game and a url would provide much more specific responses...

other entries also could affect the space and you might look at these among others:

.leftBoxContainer, .rightBoxContainer {
	border: 3px solid #f7bd00;
	margin: 0 0 1em 0;
}

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

The page is here....

http://www.simplyheartfelt.biz/index.php?main_page=

Thanks Kobra.

For some reason the position & size of the right versus left heading image is a few pixels higher on the right...actually the image is the same height it is the container leftBoxHeading versus rightBoxHeading that is rendering differently. I did not track this down as the actual image is not applied in the css code.

The following does correct it for what you have showing currently but no telling if you add others.

.leftBoxHeading, .centerBoxHeading {
	margin: 0em;
	background-color: #e1d7bd;
	padding: 0.0em 0.0em;
	}
.rightBoxHeading {
	margin-bottom: -0.4em;
	background-color: #e1d7bd;
	padding: 0.0em 0.0em;
	}

Ah yes... the search sidetop image lift. It's a known issue with the search heading classed to "LABEL". Revert any changes that were utilized to drop this specific space issue.

In your current stylesheet.css, find;

LABEL, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

Maybe replace above with;

h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

LABEL   {
	line-height: 1.5em;
	padding: 0em;
	}
        

That should knock the air out of the top and sit things right...and hopefully not affect anything else negatively. :smile:

Sketchy,

This worked! Thanks!

Christy

Kobra,

I tried what both you and Sketchy suggested, but when trying yours, it left the right side sitting slightly lower (from just beneath the login bar) then the other side.

Thanks for your time and effort, it is greatly appreciated!

Christy

Thanks Sketchy, and I am sure that kindred is grateful also...

"LABEL"...I remember now!!!

BTW: How are you getting along?

You're both welcome. I'm glad to hear all is well. :D

kobra... I truly forgot, I was going to pass this adjustment along to you... for your work on the revised P-S template that you were doing awhile back, but I didn't know if you were still on the project. I remember that the search boxtop image lifting on that one also. Well, here it is late and all.
`I'm doing better, although the weather has been crapola and I almost got in two accidents in two weeks, not my fault. I avoided them both, happy me. Flashbacks, I tell ya. I'm working full time now, I'll have money for Christmas gifts, joy! I still find time to hang out here and in comfort, my mom bought me an "executive" computer chair... very comfy for the sore back and makes me feel special. :smoke:

Hi. I am a newbie setting up a new store, but I just encountered what I think is the same issue. The headings for the Manufacturers, Music Genres, Record Companies, Search, and Currencies sideboxes all have the LABEL element applied to them with no attributes. This is causing me problems because I was trying to change the font size for sidebox headings--all the headings change as anticipated except those four.

I have looked at it long enough to come up with 2 or 3 ways which might fix it, but I am still wondering if there is a reason that those four sidebox headings (and none of the others) have the LABEL element applied to them.

Perhaps I could get opinions about my fix ideas as well:

1. Create override files for those sideboxes and remove the LABEL elements
2. Remove LABEL from the two places in the stylesheet where it is declared generally (lines 51 and 98 in the template_default stylesheet)
3. Add ".leftBoxHeading LABEL" to lines 479 and 484 and ".rightBoxHeading LABEL" to lines 505 and 511 (template_default stylesheet) to make the LABEL element conform to the sidebox heading for sidebox headings only.
4. Add IDs in the stylesheet to override the effect of the LABEL element on those boxes (e.g. #manufacturersHeading, #musicgenresHeading, #recordCompaniesHeading, #searchHeading, #currenciesHeading)

I hope I'm making sense. Thanks for any help!

Sorry, let me clarify something. When I mention the line numbers in the template_default stylesheet, I am not saying that I am actually going to change that file, I'm just giving them as references to the content in that file because that is what I used as the basis for the stylesheet in my template.

I'm having an issue that I believe is similar as described in IE only. I have a separate IE style sheet and I've tried all the suggested methods to no avail on my local test system. On my Categories box I have a header that gives the effect of a hanging sign and a solid panel just above the top of the category box itself. The borders don't touch as they should - IE (of course) and only on the cat box is this an issue the rest are fine. This is in IE6 or IE7 - It works correctly in FF.

Also, I'm trying to modify the products listing layout and so far have been pretty successful with what I'm trying do except I'm plagued with the IE disappearing borders. I've read a ton on that, and my conclusion is that it's fixed in IE7, but IE6 - well there's no solution (unless someone is aware of something I haven't tried).

The items I am puzzling with is I want to change the font color and size of the price to be much larger and with a different color to make it stand out more. I've gone into the modules and pulled the product_listing.php and added a class to the price - 'productListingPrice' - but first when making changes in the style sheet they are ignored and second when I view the class with my FF tools - it seems to have drug into the class the quanity box also, which seemed odd.

Any suggestions on these two issues would really be appreciated.

The buildsite location is here - http://www.randbhosting.net/gifttech2 -

rwoody,

I feel a bit foolish offering suggestions to someone who has obviously been doing a lot more of this than I have...but here goes. I don't think the issue you are having is the same as the one kindred_kountry had because the categories sidebox heading doesn't have the LABEL tag applied to it. The problem there was that when the categories heading was fixed, the search heading (which does have the LABEL tag) still had extra space.

Just curious...why do you need a different stylesheet for IE? You've probably tried this, but I wonder if you would have the same problem if you temporarily swapped stylesheets. Just a thought.

Since the problem is only happening to the categories sidebox, my (very humble) guess would be that it is coming from #categoriesHeading or #categoriesContent (h3, .leftBoxHeading, and .sideBoxContent should have the same effect on the information box as the categories box). Have you used #catetgoriesHeading or #categoriesContent in either of your stylesheets?

I did notice that the categories box isn't quite the same as the information box even in Firefox. In Firefox the Apparel link is crammed right up against the graphic, whereas the Shipping & Returns link has a bit of space above it.

Wish I had better answers. I hope my suggestions aren't a waste of time.

Hi

I facing the same problem Please see attachment. :frusty:. Please help.

Thanks

I had a leftside column that wouldn't snug up to the top also and finally fixed it this way:

In the tpl_header file, find:

<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>

<br class="clearBoth" />

and remove the linebreak, or comment it out.

:clap:I manage to solve it. At the CSS i added : margin-top:0;
Like this below :
h3.rightBoxHeading,h3.leftBoxHeading {

background:url('../images/sidebox-title-bg.gif') left top repeat-x;

vertical-align:top;

padding:0px 10px 0px 11px;

color:white;

font-size:12px;

font-weight:bold;

font-family:Arial, Tahoma;
margin-top: 0;

}

And now it can display nicely in IE and FIREFOX