Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / NavCatTabs Background in Firefox

NavCatTabs Background in Firefox

Locked

Views: 890

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
12 Sep 2007, 8:40 AM
#1
pkonstan avatar

pkonstan

New Zenner

Join Date:
Jun 2006
Posts:
30
Plugin Contributions:
0

NavCatTabs Background in Firefox

I have modified the NavCatTabs and the background is running 165px to the right of the layout. It doe not do it in IE but I can't seem to get it right in Firefox. This project has been going on for a long time and I am trying to to get it done so any help would be appreciated. http://koshernutsandcandy.com

Thanks

12 Sep 2007, 9:05 AM
#2
usernamenone avatar

usernamenone

Totally Zenned

Join Date:
Sep 2006
Posts:
541
Plugin Contributions:
0

Re: NavCatTabs Background in Firefox

stylesheet.css and stylesheet_new.css both have style in them for
#navCatTabs

Delete your styles in one of them and them try to give the navCatTabs a width in px and not % to see if that works

12 Sep 2007, 12:43 PM
#3
pkonstan avatar

pkonstan

New Zenner

Join Date:
Jun 2006
Posts:
30
Plugin Contributions:
0

Re: NavCatTabs Background in Firefox

I did what you said and this is what is pushing the background over

#navCatTabs {
float: left;
width:900px;
background:#000000 no-repeat;
/background-image: url(../images/tile_back.jpg);/
font-size: 93%;
line-height: normal;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding-left: 165px;
}

Specifically this: padding-left: 165px;

This is the only way I was able to make the tabs center align. If there is another way could you help me? Thanks

12 Sep 2007, 5:08 PM
#4
usernamenone avatar

usernamenone

Totally Zenned

Join Date:
Sep 2006
Posts:
541
Plugin Contributions:
0

Re: NavCatTabs Background in Firefox

#navCatTabs {
text-align: center;
width:900px;
background:#000000 left;
/background-image: url(../images/tile_back.jpg);/
font-size: 12px;
line-height: normal;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;

  }

then open your header and change the tables to 900px and not 100%

12 Sep 2007, 5:13 PM
#5
pkonstan avatar

pkonstan

New Zenner

Join Date:
Jun 2006
Posts:
30
Plugin Contributions:
0

Re: NavCatTabs Background in Firefox

Now the tabs are aligned left. I was trying to center them.

12 Sep 2007, 5:18 PM
#6
usernamenone avatar

usernamenone

Totally Zenned

Join Date:
Sep 2006
Posts:
541
Plugin Contributions:
0

Re: NavCatTabs Background in Firefox

oops I didn't see the position on your color

#navCatTabs {
text-align: center;
width:900px;
background:#000000 no-repeat;
/background-image: url(../images/tile_back.jpg);/
font-size: 12px;
line-height: normal;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;

}

Only images get repeat and positions not colors

Then change the table width in your header to 900px

12 Sep 2007, 5:27 PM
#7
pkonstan avatar

pkonstan

New Zenner

Join Date:
Jun 2006
Posts:
30
Plugin Contributions:
0

Re: NavCatTabs Background in Firefox

I tried "auto" for the left and the right and no luck. It has something to do with the navCatTabs add on I got in the downloads. I think it's the way that the code was written to display the tabs properly. I really think it has something to do with the float left. Because if you don't have that the tabs don't display correctly they break. I wish there were better menu options for Zen Cart as many e commerce sites have tabs and my client is hell bent on tabs. He is a nightmare. I had nice earthy tones on this site and he's like "let's put bright pink". So you can kind of see what I have to deal with. He wants them centered. I hate to ask but can you help me? Maybe e mail me and we can talk about working out something.

12 Sep 2007, 7:29 PM
#8
usernamenone avatar

usernamenone

Totally Zenned

Join Date:
Sep 2006
Posts:
541
Plugin Contributions:
0

Re: NavCatTabs Background in Firefox

Your cat tabs should be text-align: center; not float left

You also have a parse error in

#navCatTabs ul {
width:900px%;
margin: 0 auto;
padding: 0px 10px 0px 5px;
list-style: none;
}

you also have double entries for

#navCatTabs li:hover, #navCatTabs li:hover a {
background-position:0% -150px;
color:#FFFFFF;
text-decoration:underline;
}
#navCatTabs li:hover a {
background-position:100% -150px;
}

you also don't have a style for

category-tabs that I can find

On the good note you no longer hang over in your header