Sidebox Heading Fonts--some are larger than others

I have been having a problem getting all my sidebox headings to display correctly. The problem boxes are Manufacturers, Music Genres, Record Companies, Search, and Currencies. The headings for these boxes display in a larger font than the others.

I have messed and messed with it, but can't come up with a good solution.

The only difference I can see between the styling for those sidebox headings and all the others is that the LABEL element is applied to them. I am assuming that this is causing the problem.

My first thought was to add .leftBoxHeading LABEL, .rightBoxHeading LABEL to this section in my stylesheet:

.leftBoxHeading, .rightBoxHeading {

font-size:1em;
color: #000066;
margin: 0em;
background-color: #D7E4F5;
padding: .5em .2em;
line-height: 1em
}

Advice?

Also (because I can't help wanting to understand why), can someone explain why the LABEL element is applied to those four sidebox headings but none of the others? Is there something special about them? Would it hurt anything if I made override files for those sideboxes and just removed the LABEL element from the headings?

Thanks :lamo:

The problem boxes are Manufacturers, Music Genres, Record Companies, Search, and Currencies. The headings for these boxes display in a larger font than the others.
These are different ID's and can all be adjusted with the stylesheet.css

Kobra,

Thanks for the reply.

I should have said that I also was considering adding ids to the stylesheet for each of the problem boxes. I was sort of trying to avoid that because I thought it would be simpler to have all the sidebox headings changed from one place (.leftBoxHeading, .rightBoxHeading {}) since I want them all to be the same.

I know I'm being sort of picky--its a personality thing:wacko:

Could the reason for those four box headings (Manufacturers, Music Genres, Record Companies, Search, and Currencies) having the LABEL element applied have something to do with those boxes having associated forms? --wild guess

Sorry if my questions are tedious or stupid. I'm kind of new to Zen Cart, HTML, CSS, PHP, etc.--just trying to learn.

Do a view source for the page where this is evident and then search/find the text for the header and you can determine the ID that is for this and adjust this (might have to add it) in the stylesheet.css
i.e. - currencies is #currenciesHeading

Right. Perhaps I should just give up on understanding why and just be content with knowing how.

I suppose I could add a set of id's to cover all the sidebox headings to accomplish the single place to change things, e.g.:

#documentcategoriesHeading, #categoriesHeading, #whatsnewHeading, #manufacturersHeading, #reviewsHeading, #featuredHeading, #informationHeading, #moreinformationHeading, #bannerboxHeading, #ezpagesHeading, #musicgenresHeading, #recordcompaniesHeading, #bannerboxallHeading, #searchHeading, #bannerbox2Heading, #bestsellersHeading, #specialsHeading, #languagesHeading, #currenciesHeading, #whosonlineHeading {}

I was just trying to get a better grasp of why using .leftBoxHeading, .rightBoxHeading{} doesn't do the same thing as the full set of ids

I was just trying to get a better grasp of why using .leftBoxHeading, .rightBoxHeading{} doesn't do the same thing as the full set of ids
For reasons that are ???, if you look into the sidebox files you will see that some of these are specified in the code with a specific tag

Right. For example, manufacturers.php, line 61 has

$title = '<label>' . BOX_HEADING_MANUFACTURERS . '</label>';

I.e., the heading is enclosed in <label></label>

The same is true in music_genres.php (line 38), record_companies.php (line 38), search.php (line 14), and currencies.php (line 38).

What I can't figure out is, why is the label element used in these cases? Obviously I'm not too knowledgeable about HTML. My only guess so far is that it has something to do with the fact that those boxes have input forms.

I did try removing the label element in manufacturers.php, and it seemed to fix the problem I was having, but I am worried that doing so might cause me other problems.

I also tried adding ids for the box headings, but didn't fix the problem. Here's what I did:

#documentcategoriesHeading, #categoriesHeading, #whatsnewHeading, #manufacturersHeading, #reviewsHeading, #featuredHeading, #informationHeading, #moreinformationHeading, #bannerboxHeading, #ezpagesHeading, #musicgenresHeading, #recordcompaniesHeading, #bannerboxallHeading, #searchHeading, #bannerbox2Heading, #bestsellersHeading, #specialsHeading, #languagesHeading, #currenciesHeading, #whosonlineHeading {

font-size:1em;
color: #000066;
background-color: #D7E4F5;
}

The font still ended up larger for Manufacturers, Music Genres, Record Companies, Search, and Currencies than it was for all the other sidebox headings. That leaves me really confused, because I thought ids were supposed to have priority over elements and classes (because they are more specific). But, I suppose the Label element--though it is less specific--is actually closer to the text. In the Firefox DOM source viewer it looks like this:

<h3 class="leftBoxHeading" id="manufacturersHeading"><label>Manufacturers</label></h3>

Thanks for your answers. Any clarity you can offer helps.

Strange, this worked for me - -

Did you try this at the very end of your css file? Try that and if this works then you need to search for each of these and concantenate the entries so that they do not conflict

Thanks. I'll give that a shot.

I tried placing the ids at the end of the stylesheet. No help. I believe I have finally figured out the problem, though. Just in case someone else has the problem, I'll try to describe it to the best of my understanding. If anyone sees an error in this, please do correct.

You can add id elements for sidebox headings to control their fonts, but because there is a set of LABEL tags inside of the h3 element for those 5 sideboxes which have input forms, some screwy things can happen. Here is what the HTML would look like for the manufacturers box heading:

<h3 class="leftBoxHeading" id="manufacturersHeading><label>Manufacturers</label></h3>

You may not have a problem if you create an id in your stylesheet like this:

#manufacturersHeading {

font-size: 1em;
}

But, if you change the font-size to 2em, you will likely have much larger font sizes for the sidebox headings with input forms than for all the others. This happens because ems are a relative measurement based on the parent item. Since the input form sideboxes (manufacturers, music genres, record companies, search, and currencies) have LABEL as the nearest element to the heading text, the em size for that text is calculated based on the LABEL element in your stylesheet rather than the h3 element (which is used as the basis for the rest of the sidebox headings).

The best solution I could come up with is to remove the LABEL element from the two places in the stylesheet where it is declared generally (without classes, etc.). In template_default and classic stylesheets, these are the lines to be changed:

LABEL, h4.optionName {

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{

changing them to this:

h4.optionName {

h4, h5, h6, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{

avoids the problem because then no sizes are set for the LABEL element. Since the LABEL element has no characteristics defined, the em size is calculated on the next nearest item, which is the class .leftBoxHeading--thus it now has the same basis as all the other sidebox headings.

I hope this makes sense and that someone else will be spared the headache. Thanks for your help on this kobra. Please let me know if you see any problems with this approach.

I know this is an old post, but I wanted to thank OFelixCulpa for this detailed explanation.. I also wanted to know the solution and the answer to "Why" as well.. The changes you suggested were exactly what I had planned to try next, but I came here to confirm my solution before I executed it.. Thanks for the answer and the explanation..