Odd Gap between Header DIVs and contentMainWrapper Table

[LuneKeltkar]

First Some Appreciation:

Over the past few days I've worked to change the look of my ZenCart store from the somewhat drab default template into a customized template with a bit more energy. First I tried integrating a pre-built template, but as this approach caused me more confusion than clarity, I scrapped this effort, returned to my original look, and began to make cautious incremental changes to the overall look. I was quite pleasantly surprised to discover that customizing the look of a ZenCart store isn't all that difficult, even for someone (such as myself) who knows practically nothing of php and hardly more about html. I offer this observation by way of appreciation for the people who have built and are building ZenCart, because *clearly* the ease of customization results from their efforts, not my abilities.

I've encountered one problem that I can't solve. I wanted to create a template such that my header elements (logo, navigation) and my content (in the contentMainWrapper table) worked as a single unit that appeared to float over my background tiles. I have the header looking that way I want it to, and I have the table looking the way I want it to, but danged if I can get the two elements to bump against one another. That is, about a half-inch bare strip stubbornly remains between the two main parts of my page. It's obvious visually, as a quick glance at this link will show:

http://lunekeltkar.com

I've scoured the relevant elements on my stylesheet and can find no attribute values that would cause the gap. I've also studied the html using Firebug, and I can't find the cause of the gap. I also copied the page source as rendered and studied it in an html editor, but I still can't locate the cause of the gap. Through trial and error, though, I did discover that the table portion of the html renders at the very top edge of the screen if I remove the header DIVs, which suggests to me that the gap is caused by something in these DIVs, but I can't find it.

If anyone has a moment to take a quick look and can offer direction, I'll be most appreciative. Please note that my store isn't ready to go live yet, as I have much work still to do. I've only put it up so anyone responding to this post would be able to see the problem I'm having.

LuneKeltkar

[LuneKeltkar]

Found solution,

although it doesn't entirely make sense to me. I had to specify a height for #logo in my style sheet (#logo appears as a DIV id in my header section). Until a few moments ago, I assumed that the height of this DIV would automatically resize to the exact height of my logo image, but apparently not. Oddly, to make my header section and my content table meet, I had to make #logo shorter in height than my logo image, which is the part that doesn't entirely make sense to me. But at least the end result is what I want, however it got there.

LuneKeltkar

[gjh42]

Your logo is floated left, and floated elements don't necessarily cause their containers to fit them in height. Also, you have moved elements around in the structure and applied positioning and other styling in a complex manner, making it not immediately clear what causes various spacings. The height you specified (smaller than the image) probably makes up for other elements that take more space than desired.

Nice looking site, by the way! You have done well in restyling it to look unique.

[LuneKeltkar]

gjh42,

You point out:

Also, you have moved elements around in the structure and applied positioning and other styling in a complex manner, making it not immediately clear what causes various spacings.

Actually, I'm quite sure that my stylesheet is now a frightful mess according to standards that more experienced people would abide by. I'm hoping that, over time, I can clean up some of the inelegant fixes that I've been forced to use through inexperience. Luckily the stylesheet with all its indecorum won't be visible to casual visitors.

Thanks for the compliment on the site, but I stress again that ZenCart is organized in such a way that even people bumbling about (I count myself among them) can do fairly credible jobs at any task if they just go slowly and pay close attention to what they're doing. Luckily I learned a hard lesson early on (before I had too much to cry over) about trying to go too fast with too little attention. Now I'm thoroughly slow and plodding, with eyes wide open.

Cheers,

Lune

[gjh42]

I just wish more people would follow your approach instead of trying to do everything at once without stopping to understand the structure they are ripping up... or complaining that it doesn't work the way "x" does...:)