Gap in Header & Logo / need full border around table

Hi All,

My site is fairly new in the development stage (my apologies) : http://www.kim-roebuck.com/shop and i am having some beginner problems. Seeing you are all so knowledgeable, i hoped you'd be able to help:

Q1.) What code do i need to modify to sort the gap issue with the logo? It should fit nicely into the width of the table.

Q2.) Any idea where to change the purple colour surrounding the logo (link)?

Q3.) How can i get a black border around the whole main table?

Thanks in advance.

Lance

P.S - i have done 2 days worth of research on zencart and all/most examples either didn't work, or gave me something deformed. I am using Version 3, with a custom template and template overrides in place.

Hi Lance,

You may feel like nothing went well but you obviously did some things right. 1.3+ installed, using overrides, NOT using the Classic template.

I cam not a CSS wizard but I suspect that > #logo {

margin-top: 40px;
margin-left: 25px; this is at least part of your problem.

Sorry I could not be more help right now.

Bruce is right.

remove the margin settings from #logo - that should move the logo up and over to the left.

for the border:

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 760px;
vertical-align: top;
border: 1px solid #000; add this!
}

Thank you Bruce and Clyde for your help. That worked very nicely. Slowly but surely I’m getting the hang of PHP. However I'll probably require a little more guidance over the next couple of days.

Have a look at the site now.

Is it possible to get rid of that white space under the logo as well? I've been reading that it's probably caused by spaces in the code. Could you guys point out what i'm meant to be looking for?

Also regarding the purple link around the logo. Do you know how i can remove the border without removing the feature to of the link back to the home page? If not I’ll remove the link altogether, although it's nice to have. I’ve tried searching for ‘#800080’ in the Developers Tool kit, but that produced no results.

Thanks again,

Lance

Near the top of your stylesheet you have "a img {border: 3; }" which puts a 3 pixel border around all images that are links.

You could just remove that whole line as long as you don't have any other image links that you want bordered, or you could add a rule after the first one to control just this image:

#logo a img {border: none; }

The blank space may be related to the tagline div, reserving a space for it. It may help to comment out the entire tagline div. Alternately, the < br class="clearboth"/ > may need to go.

Thanks, that removed the border link around the logo (And all future images).

However i'm still getting a very thin white gap between the logo and the black strip underneath. Do i have to adjust the height of the cell, similiar to what i did to the main wrapper width?

Thanks again everyone,

Lance

I don't know if you've fixed this or it's just a browser issue, but in FF I see no white gap. The header looks great.

I think this gap is a common issue with IE.

I like that you've given the sideboxes back their light blue background. They look more subsidiary to the main content column now, not to mention the blue corners that were looking leftover. Better than making yet another black border around the center box.

The left sidebox contents could use some padding on left & bottom - Kuroi deliberately left that out of the template to encourage people to get in and start modifying.

Have a look again. Between where it says 'Kim Roebuck' artists and Oil Painting. There is a tiny white gap. Is it really just IE?

Also do you know how i can allign the text in the sidebox, so that it's slighly more to the left. I want to do this because the sidebox borders are covering some text.

Please let me know if you think it would be better to start a new thread. ;-( sorry

Lance

We're still essentially talking about your site's styling details here, so I see no need to change threads.

1. No, there is no gap in FF. Look around for discussions about it in IE.

2. That's what I was talking about with padding - you would add a small amount of padding to the appropriate classes or id's. Use the FF Web Developer tools to find the classes/id's to edit.

I had the same issue with the gap in IE. I couldn't find a fix for it, even posted here as well. I ended up adding a background image to #logoWrapper to disguise it.

Hi Kim (nice use of the template :thumbsup: - love your choice of colors:yes:)

I suggest that you add the following to your stylesheet to get rid of the unwanted whitespace> #navCatTabsWrapper {margin-top:-2px}and bump your sideBoxContent padding up to 0.8em, just 'cos it'll make your site look better.

Sorry Lance, I now realise that the previous response should have been addressed to you. So here's a little something to make up for my mistake ...

You have cut and pasted the text on the home page from Word (or some other MS Office app) and as a result it has carried over a whole bunch of hidden markup including some proprietry MS tags that are not XHTML compliant and some which are even generate XHTML errors. In addition all the inline crap that MS produces means that you do not have full control of the resulting text through the stylesheet.

Thank you all for all your great advice. (kuroi you are forgin after that great tip) I will be making changes this evening as soon as I get home from work. I like the idea of disguising the white gap with the black background, very nice.

1.)As for the padding in the sideboxes, I was playing with that last night, however I was trying to do this:

.sideBoxContent {
background-image:url(../images/sidebox_bottom.gif);
background-repeat:no-repeat;
background-position:bottom;
padding: 0.6em 1.5em;
}

Instead of what you suggested:

.sideBoxContent {
background-image:url(../images/sidebox_bottom.gif);
background-repeat:no-repeat;
background-position:bottom;
padding: 0.8em;
}

The result was that the right-hand sidebox’s borders become unaligned. Hopefully your suggestion will help.

2.) Next I am going to try and leave a gap between the Top of the page and the ‘home | Login’ I want the background tile to show through. So something else, to play with ;-)

3.) After that I’m going to copy all text entered on the home page and other pages, into notepad and copy and paste it back into the PHP page. (Thanks for the tip, don’t we love Microsoft products)

Again, thank you all for your help. Hopefully I'll be putting some products online soon, which always make the viewing a lot more enjoyable.

Lance

hmmm...

Back home, and about to watch the world cup.

The padding worked great, however i'm still having the gap problem in IE.
I tried inserting the code #navCatTabsWrapper {margin-top:-2px} in various ways, but still get the same problem. Any idea how to colour the background in logo header to black, without the changing the main text area as well?

Thanks all,

LAnce

lancebotha:

hmmm...

Back home, and about to watch the world cup.

The padding worked great, however i'm still having the gap problem in IE.
I tried inserting the code #navCatTabsWrapper {margin-top:-2px} in various ways, but still get the same problem. Any idea how to colour the background in logo header to black, without the changing the main text area as well?

Thanks all,

LAnceI'm a big believer in solving the problem, not hiding it. Did you put the additional CSS in before or after the following section in your stylesheet?> #navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #000000;
font-weight: bold;
color: #ffffff;
height: 1%;
width: 100%;
}(it should go after otherwise this paragraph will simply undo it again)

lancebotha:

hmmm...

Any idea how to colour the background in logo header to black, without the changing the main text area as well?

Thanks all,

LAnce

um its in my previous post which you've acknowledged. :wacko:
#logoWrapper {background:#000;}

or you can use a tiled image if you prefer.

I had this problem with my page only in IE and not FF. My fix was to stick with the negative margin thing, but I used "em" instead of "px" as IE and FF same to handle these differently, as I have been told. Stick with "em" for better compatibility, if I am wrong on this somebody with more experience than me will speak up. Also creep up on the right setting (i.e. -1.2 then check still gap then -1.3 then check again....you know wash, rinse, and repeat).:D

Thank you, changing the px to em worked like a treat. This must be common problem, if you say that it's down to the way that IE interprets the code.

Anyways thanks again, no doubt i'll be back soon as i start configuring the other pages. Take care all,

Lance

Hello,

After searching, I felt this would best be served appended to this thread...

Although, the Site isn't very complex, I'm having great difficulty attempting to correct the alignment below the header image! I would like to align the left column header, center content header and the right column header... Please see this by following the link provided below:

http://soda-machines.com/vending_shop/

Lastly, I notice the navBreadCrumb area overlaps the left column. It's a small lap-over and have seen this on other sites atteping to correct layouts. Can this be moved toward the center...?

Any direction is appreicated,
Jim