Gap in Header & Logo / need full border around table

[lancebotha]

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.

[Sermonzone]

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.

[clydejones]

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!
}

[lancebotha]

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

[gjh42]

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.

[lancebotha]

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

[gjh42]

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.

[gjh42]

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.

[lancebotha]

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

[gjh42]

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.