placement of Sideboxes relative to nav bar?

Hi all - it's been going slowly, but at least it's going :D
Couple items I have not been able to figure out with my ridiculously slow iterative process of "learning" css.

1. When I view my site in firefox v ie, there is a difference in the spacing of where the headers for the first sideboxes land relative to the navbar. I'd like the top of the headers for the first sideboxes on left and right to be flush with the bottom of the navbar and I can't figure out how to do it.

2. there appears to be a gap between the left sidebox header (for featured products) and the contents of the box - it doesn't happen on any other sidebox, and I can't figure out if I accidentally changed something or of that's standard appearance. I'd like to get rid of the space...

http://spritelygoods.com

TIA!

woodlandsprite:

Hi all - it's been going slowly, but at least it's going :D
Couple items I have not been able to figure out with my ridiculously slow iterative process of "learning" css.

1. When I view my site in firefox v ie, there is a difference in the spacing of where the headers for the first sideboxes land relative to the navbar. I'd like the top of the headers for the first sideboxes on left and right to be flush with the bottom of the navbar and I can't figure out how to do it.

2. there appears to be a gap between the left sidebox header (for featured products) and the contents of the box - it doesn't happen on any other sidebox, and I can't figure out if I accidentally changed something or of that's standard appearance. I'd like to get rid of the space...

http://spritelygoods.com

TIA!

You have several minor problems / issues going on here.

The space between the navCategoryTabs bar and the top of your left and right columns, is the spacing above every side box. To preserve this space for the boxes whilst eliminating it for the top of the column, you can move the whole columns by adding the following to your CSS> #navColumnOneWrapper, #navColumnTwoWrapper {margin-top:-2.1em}

The heading sizes in your right hand column are jumbled. This is a deliberate feature of the template_default I suspect, to encourage you to deal with them.
label {font-size:1.0em}

To match them to the sizes in your left hand column you need to tweak the h3 heading size and the links within h3 heading sizes as follows

h3.rightBoxHeading, h3.rightBoxHeading a {font-size:1em}

Finally, there is a 0.4em margin-top set for all content with class centeredContent which includes your featured box. You don't want to undo this as it would have effects elsewhere, just override it generally in sideboxes which you can do with> .sideBoxContent {margin-top:0}
Please don't just stick these in your CSS. You've been learning a lot over the past few days, so please take a few minutes to understand why each of these CSS tweaks resolves one of your issues.

kuroi:

You've been learning a lot over the past few days...

LOL. that's one way to put it. I figure I taught myself HTML the same way, I may not understand the gentle nuances of code...but at least I'm learning to recognize what various things mean!

I appreciate the pointers and will certainly not just "plug and chug"

Plenty more things to do before the shop goes live (not the least of which is populating all of the inventory!) and I'm sure I'll have plenty more questions.

I only hope that once this is "done" I can prove to be helpful to others.

Thanks again for your help!

oh dear. I misspoke.
or mistyped as it were...I was hoping to have the top of the sideboxes be flush with the bottom of the breadcrumb (I think that's the breadcrumb - the part below the navbar). I'll poke the css to see if I can't figure something out...maybe fix the height of the breadcrumb and the column top margins in pixels perhaps?

woodlandsprite:

oh dear. I misspoke.
or mistyped as it were...I was hoping to have the top of the sideboxes be flush with the bottom of the breadcrumb (I think that's the breadcrumb - the part below the navbar). I'll poke the css to see if I can't figure something out...maybe fix the height of the breadcrumb and the column top margins in pixels perhaps?In order to maintain the consistency between IE and FF that you are aiming for, I recommend using ems rather than pixels. They're more complex to work with, but are treated the same by both browsers, unlike pixels!

ah - I've been messing with the ems and haven't yet struck upon what I'm hunting for - I had thought I had it fixed originally (by setting the Sidebox container margins) It looks nice and clean in Firefox, (Bottom of breadcrumb even and inline with Top of first sideboxes on either side) but no joy in IE. Drat that IE!! lol

What appears to be causing the trickiness is the margin for the top of the columns currently calls out as "auto"

I've attempted the following so far and haven't quite stumbled on the best :
Setting height value of the Breadcrumb to = Margin-top of the navColumnOneWrapper (didn't work, discrepancy still apparent)

I tried removing the padding on the Breadcrumb and then a repeat of the above
(also didn't work, discrepancy still apparent).

Adding back the top padding on the breadcrumb, setting breadcrumb height to look as if it has even padding on top and bottom, then setting margin-top on Column Wrapper....it looks like I can iteratively get this to work, but will it cause issues with the Breadcrumb later?

oh ho! :clap: I've fixed the space between the "featured" header and the "featured content"
Turns out that the .sidebox content {margin-top: 0em} did not do the trick

Instead I had to add a new line of code into the CSS

#featured .centeredContent {margin-top: 0em}

Now if I can just figure out the other spacing issues on the top of the columns as well as the banner bar I'll be a Happier Zenner...

This may help in the understanding of ems - it certainly helped me!

An em is roughly the width of a lowercase "m" in a font and using a browser's default internal stylesheet, am em is roughly equivalent to 16 pixels.

Setting the font-size attribute in the body tag to 62.5% (as in the default stylesheet for ZC 1.3) makes one em roughly equivalent to 10px...making it a lot easier to equate ems to pixel sizes e.g. 1.2em will be 12px, 9px will be 0.9em.

Or near enough!

Ryk:

This may help in the understanding of ems - it certainly helped me!

An em is roughly the width of a lowercase "m" in a font and using a browser's default internal stylesheet, am em is roughly equivalent to 16 pixels.

Setting the font-size attribute in the body tag to 62.5% (as in the default stylesheet for ZC 1.3) makes one em roughly equivalent to 10px...making it a lot easier to equate ems to pixel sizes e.g. 1.2em will be 12px, 9px will be 0.9em.

Or near enough!Everything Ryk says is spot on, but there is an additional wrinkle to watch out for. Unlike pixels which are absolute, ems are inherited. OK, what doies that mean in plain English? Well, if you apply a font-size in ems to the text in a div, then nest another div inside and give that a font size in ems too, the results may be rather different to what you expected.

For example, suppose you wanted to create some larger text and so set the font size for your div to 2em. You then nest another div inside and want the text there to be 2ems too and so set a CSS font size for the nested div to be 2em also. NOOOOO. What you will get is a font size of 2 x 2 = 4ems because the inner div also inherits the font size styling for the outer div. You can see this in practice here.

So the moral of this story is use ems for text sizes, but set them only when you want to change the size and bear in mind any other changes already made higher in the div hierarchy.

Of course, this poses a second question. If they're so damned tricky, why use them at all? At least we know where we are with pixels! We like ems for reasons of accessibility and cross browser compatibility. Unlike pixels, everybody handles ems in the same way. The biggest drawback of pixels is that IE treats them differently to everybody else when the user decides to change foint size. For example, people with poor eyesight may choose to display all text larger, sometimes very much larger. IE won't let them if the text size is defined in pixels. Whereas ems scale nicely in all browsers and if you define the stuff around your text in ems too, it is possible to design sites that keep much of their shape even when dispalyed at several times the intended text size.