Navbar links are not fully visable

I have just started to customise the latest version of zencart. I cannot cross reference to the earlier version that i had previously as this is too old and many of the stylesheet and other features are very different.

My problem is that I have adjusted the navbar as it was too thick and I wanted to make the new version of my site look exactly like my old version. Unfortunately, in doing this I have also cut the bottom of all the letters that make up the links within the navbar.

Can anyone help me to align the text links so that they look as they should.

The following is the address to my test site so that you can see the problem:

http://www.regencyexpress.co.uk/trade/test

If you want to see what I am tring to achieve just take off the /test and that will take you to a sample of the layout that i am looking get.

I have also noticed that some of my pages look different when using firefox. For example, my /trade page is a little wonky at the top.

Please can anyone help me with this.

Many thanks in advance for any suggestions.

In your current template's stylesheet, find:

Code:

---

#navMain ul, #navSupp ul, #navCatTabs ul {
line-height:0.4em;
list-style-type:none;
margin:0pt;
padding:0.5em 0em;
text-align:center;
vertical-align:top; }

---

Perhaps, try lessening the value(in red) to say... 0.3em ?
Give that a try and see how IE renders it.

This all looks identical (in size that is) from the test version and the older version? Have you got this corrected, or are you still looking for an answer?

I see no difference between the two right now.

Thank you both for your replies.

Sketchy:

I have tried your suggestion and found that if I raise the number it starts adding another bar there as the .gif is 16px high. If I lower the number it makes the current problem worse.

I have noticed that if you view the page using IE (as I do) the problem is present. However, if I use Firefox, the page views correctly.


econcepts:

I am still looking for an answer to this problem. As you can see from the comments above, it does seem to depend on the browser that is being used.

I am ok with the older version of zencart. I think that I can deal with most issues that i come accross and I seem to be able to grasp the idea of how to change things without too much problem, but this latest version is a different story and i am wondering if it is worth the upgrade. I do like the idea of having an up-to-date version as I think there is likely to be more support for it if I run into problems.

I am having great difficulty in seeing how to change the layout so that it matches the way that my current site looks.

Thanks again for your replies.

Oh crap, IE might be rendering custom declarations and I made a boo-boo. I should have looked more into this. Download a copy of your current template's stylesheet for a back-up at any rate. We'll try this method here..

Rebuild your custom Selector declaration coding to stock values, find this in your stylesheet:

Code:

---

#navMain ul, #navSupp ul, #navCatTabs ul {
line-height:0.4em;
list-style-type:none;
margin:0pt;
padding:0.5em 0em;
text-align:center;
vertical-align:top; }

---

Replace above with this stock Selector code:

Code:

---

#navMain ul, #navSupp ul, #navCatTabs ul {
        margin: 0;
        padding: 0.5em 0em;
        list-style-type: none;
        text-align: center;
        line-height: 1.5em;
        }

---

Yeah, that bar will bulge grossly. But, not to fear.. find this next:

Code:

---

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
        margin: 0em;
        background-color: #abbbd3;
        background-image: url(../images/tile_back.gif);
        padding: 0.5em 0.2em;
        font-weight: bold;
        color: #ffffff;
        height: 1%;
        }

---

Finally, adjust the value in red to about 0.2em. I think that should work just fine.