Sideboxes and title text too big

[mampi]

Hi All

I am a newbie to Zen, have designed in HTML and CSS b4 tho. Have just gotten to grips with overrides and am tryin 2 design my 1st template based on template_default (not classic). You can see my design here:

http://bestpixelpageever.com/sgp/

I have 2 questions...

1) As you can see my sidebox widths are too big (the left and right column backgrounds are red so you can see how they overlap too much). I have tried to change Column Widths in Layout Settings using Admin, but this does not align the boxes correctly. I cannot find any CSS settings that help either.

2) Some text headings in my sideboxes seem to be bigger than others e.g. Search (left sidebox) and Who's Online (right sidebox), how can i make sure they are all the same size plz?

Any help would be much appreciated.. thank u.

[mampi]

To illustrate my point 1 further.. if u look at http://bestpixelpageever.com/sgp/ ,you can see then i have changed the left pixel width using Admin, however now the sideboxes on the left do not align correctly... plz HELP!!

[Sketchy]

I can't help with question #2. The "Search" heading seems to be labeled differently and I can't force a change in the stylesheet.

I've been working on a new template. I have entered 160px in both pairs in all Right/Left Column Widths(the two pairs). I was frustrated as well, where FF would push the right column past the main wrapper. For a quick fix... in the stylesheet, I put a declaration of float: right into the .leftBoxContainer selector code block. Seems to work okay in both browsers with the marginal increase in side padding between Explorer and Firefox, but at least it's equal.

[mampi]

Thanks Sketchy... i did not realise my template rendered fine in InternetExploer, but not in Firefox.. this is where the problem is... surely every new designer of template_default must have encountered this, because its exactly the same problem with a fresh template with no changes. I will try your fix soon and let users know how i get on.
Also the Search Sidebox problem, again everyone must have experienced this... surely someone must know how to fix this??

[Sketchy]

You're welcome.

Yeah, the fix worked so good... I just made another template contribution.
I had the four Column Widths set at 160px and it worked like a charm.

For the 'Search', make a backup stylesheet and try overwriting with these two;

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1em;
	}

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

Or adjust the font size and line-height to your own liking. I experimented with these two selectors for the new template and I was satisfied.

[Sketchy]

Update; I just went through my books and I found the problem!

Explorer includes the padding and border width in the determination of box "width". FF does not. The fault is actually IE, no surprise.

The fix;

Remove all the padding on your side columns. They should then rest upon the borders of the main body. Go into Admin and set your first pair of Column Widths(boxes) to 160px and then set the next pair at 170px. You should be all set.

[Sketchy]

Oh, I think you did already. Like I said, experiment with Column Widths and let me know how it goes.

I'll be contributing another template with the appropriate fix very soon and maybe you can use it as a base. It looks absolutely perfect in IE and FF, better than my latest patch up job.

[mampi]

Really appreciate this Sketchy... but(!)...

i removed all padding from sideboxes (i couldn't find any padding on my side columns), then changed column widths as suggested (160 and 170), however this did not have desired effect, all it did was center sideboxes within the columns. I played with widths (only on the right side), settings of 160 and 164 managed to right align my box in FF (alomst desired effect), however in IE there is still about 1 pixel left before it is perfectly right aligned. I tried to increase border width to fix this, but just caused the original pro again in FF! Check out the 2 pix below, 1st is FF, 2nd is IE.

http://www.bestpixelpageever.com/sgp/eg.JPG

http://www.bestpixelpageever.com/sgp/eg%20ie.JPG

The other problem with this fix is that i liked the padding in the heading of both boxes!! It made the titles stick out more.

Have not tried the Search Heading fix yet, want 2 solve other prob 1st.

A sidenote to the developers, the CSS is very messy, would be much better with a lot more detailed comments.

Sketchy let me know ASAP wen you release your new template and where i can download... thank you

[Sketchy]

The Zen Cart team donated all their time into the hardcode and incorporated a ton of features into Zen Cart, they really didn't have time to make templates or comment a map way of the stylesheet. Being that Zen Cart is free, they have left the template designing to users.

Sorry to hear. I should have took in account of your width of the store first before I suggested the column widths. I'm still refining another method and I'll release another template soon.

I just released a retro template, I don't think it's what you're looking for. However, I have two older releases that are MSIE/FF compatible and I think you would be satified. The problem is that it is available in only red or blue. I did the same tweak as you, with the header navigation on those ones. You'd just have to adjust the colors accordingly. I dealt with the padding issues in a different way, but it works well.

http://www.zen-cart.com/forum/showthread.php?t=43989

You can see the red one in action in the 'Contributed Templates' forum and there are many more available for download in the showcased templates thread and different color versions are available through 'downloads' on top of the main forum menu.

[Sketchy]

There is a new version of Zen available.

Also, I figured out the margin problem. I've tested it with all the column widths in Admin at 150px. However, I can't virtually test the fix on your store, because your column widths aren't the same.

http://www.zen-cart.com/forum/showthread.php?p=256134