Just cant work it out..

Hi all,

Just wondering how i would change the top part of my page, the part i wish to change is the top Grey colored part with my category links in it, which is directly under our logo.

I need it so the Grey section shows its margin at the top of the box like it does on this non Zen-cart page. And if you check out this page, which is the page i am having problems with you will see what i mean. We have tried for hours to fix it but i just cant seem to work it out. It's like the header is covering it up.
Any suggestions/advice is always highly appreciated

Thanks in advance.

Both links appear to be ZenCart???

BOTH seem to be running under zencart.

Compare the two stylesheets using WINMERGE, to see differences.

Hi there,

Thanks for both of your replies. The first page(index.html that was created in a web design program) is not a zencart page it is just using the same stylesheet as the second page(main page of zencart) I searched through both stylesheets for page one and two, which should be 100% indentical but i could not find any errors/differences to affect the specific box i am having problems with. I will locate winmerge and see if that helps thank you again for your quick reply's.

Here are some pointers...

If I make the following edits to your stylesheet, I get a better result:

#logoWrapper {
width: 100%;
height:173px;

#navMainWrapper {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
font-weight: bold;
font-size: 10px;
height: 32px;
color: #445A6A;
vertical-align: middle;
padding-left: 3px;
}

#navEZPagesTop {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
height: 14px;
}

And also...

#navCatTabsWrapper {
margin: 0em;
background-color: #D0D0D0;
font-weight: bold;
color: #63859D;
height: 20px;
width: 974px;
border: 3px double #63859D;
}

#navMain ul, #navCatTabs ul {
margin: 0;
padding: 0.1em 0em;
font-size: 12px;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

schoolboy:

Here are some pointers...

If I make the following edits to your stylesheet, I get a better result:

#logoWrapper {
width: 100%;
height:173px;

#navMainWrapper {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
font-weight: bold;
font-size: 10px;
height: 32px;
color: #445A6A;
vertical-align: middle;
padding-left: 3px;
}

#navEZPagesTop {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
height: 14px;
}

Hi schoolboy,

That helped me out a bunch thanks heaps for that! just one more thing, what part do i change to adjust the height of the grey bar ?

Thanks once again

schoolboy:

Here are some pointers...

If I make the following edits to your stylesheet, I get a better result:

#logoWrapper {
width: 100%;
height:173px;

#navMainWrapper {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
font-weight: bold;
font-size: 10px;
height: 32px;
color: #445A6A;
vertical-align: middle;
padding-left: 3px;
}

#navEZPagesTop {
background-image: url(../images/bar2.gif);
background-repeat: repeat-x;
height: 14px;
}

devinej1:

Hi schoolboy,

That helped me out a bunch thanks heaps for that! just one more thing, what part do i change to adjust the height of the grey bar ?

Thanks once again

Nevermind i got it all fixed thanks for your help its highly appreciated its perfect now! :clap::clap: your a lifesaver!

Use the FIREFOX browser with the Web Developer Toolbox plugin.

This will help you identify and analyse page elements, and then do off-line edits to a web page, (and see the result in real-time) which you can then commit to your web page(s) on the actual server.