Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Main Page Hoover Color Doesn't Work

Main Page Hoover Color Doesn't Work

Locked

Views: 1,901

Results 1 to 11 of 11
This thread is locked. New replies are disabled.
23 Apr 2007, 11:28 AM
#1
lainee avatar

lainee

New Zenner

Join Date:
Apr 2007
Posts:
46
Plugin Contributions:
0

Main Page Hoover Color Doesn't Work

I have:

a:visited {
color: #990099;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li {
color: #FFCCFF;
text-decoration: none;
}

a:active {
color: #FFCCFF;
}

The visited color is purple and working, the already visited color is pink and working but the mouse over hoover color stays purple and should show as pink. What am I doing wrong?

23 Apr 2007, 1:07 PM
#2
arumdevil avatar

arumdevil

New Zenner

Join Date:
Feb 2007
Posts:
23
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

you need to define the states in the correct order for it to work correctly in Internet Explorer... I believe order should be:

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active
23 Apr 2007, 1:10 PM
#3
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

Can you post a url where we can take a peek?

23 Apr 2007, 2:19 PM
#4
lainee avatar

lainee

New Zenner

Join Date:
Apr 2007
Posts:
46
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

I do have them in that order I just left the top a:link part out when I copied and pasted.

24 Apr 2007, 8:26 AM
#5
arumdevil avatar

arumdevil

New Zenner

Join Date:
Feb 2007
Posts:
23
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

ah, bugger. in that case can you provide more information - HTML code as well as the full CSS of the relevant part, plus what browser and version it is not working in.

24 Apr 2007, 9:26 AM
#6
lainee avatar

lainee

New Zenner

Join Date:
Apr 2007
Posts:
46
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

IE 7

http://chic-perfumefragrance.com

a:link, #navEZPagesTOC ul li a {
color: #3300FF;
text-decoration: none;
}
a:visited {
color: #990099;
text-decoration: none;
}
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li {
color: #FFCCFF;
text-decoration: none;
}
a:active {
color: #FFCCFF;
}

Thanks!

24 Apr 2007, 1:14 PM
#7
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

The sideboxes aren't taking their directions from that part of the stylesheet. Further down, you have

.sideBoxContent a { 
             color: #000000;
             }

 a:hover, #navsideBoxContentTOC ul li {
	color: #990099;
	}

Change it to

.sideBoxContent a { 
             color: #000000;
             }

.sideBoxContent a:visited {
color: #990099;
text-decoration: none;
}

.sideBoxContent a:hover, #navsideBoxContentTOC ul li {
	color: #990099;
	}
24 Apr 2007, 2:09 PM
#8
lainee avatar

lainee

New Zenner

Join Date:
Apr 2007
Posts:
46
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

I am not trying to correct my side box content colors. I already have them set to black with purple hoover color and they are working fine. I am trying to change the mouse over hoover color on the main page text.
Where it says, "log yourself in" in purple is correct, the already visited pink color is correct, the mouse over hoover color remains purple but should be pink.

http://chic-perfumefragrance.com

24 Apr 2007, 2:26 PM
#9
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

I've tried it in Firefox and IE. I get NO hover color in the sideboxes at all. The links remain black.

In both browsers, "log yourself in" goes from a purplish blue to purple on hover. It goes to pink when clicked. It goes back to the purplish blue when returning to the home page.

The section of the stylesheet I mentioned earlier is overriding your earlier setting:

a:hover, #navsideBoxContentTOC ul li {
	color: #990099;
	}

a:hover controls your links. If you expect it to control the links in the sideboxes ONLY, do what I suggested in my earlier reply.

24 Apr 2007, 9:16 PM
#10
lainee avatar

lainee

New Zenner

Join Date:
Apr 2007
Posts:
46
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

I already did that (see coding below) which is why on my home page side boxes I see black with a purple mouse over hoover except for the categories box which will not do a mouse over hoover color for some reason. Any idea why?

.sideBoxContent {
background-color: #F5F5F5;
padding: 0.4em;
}
.sideBoxContent a {
color: #000000;
}
a:hover, #navsideBoxContentTOC ul li {
color: #990099;
}

For my header I have white with a pink mouse over hover (see coding below) that works for Home and Perfume Reviews [more] :

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
color: #ffffff;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #FFCCFF;
text-decoration: none;
}

I can't seem to get my main page text links to be purple with a pink mouse over hoover color. Is the problem that the sidebox content link colors and main page text colors have to be the same?

25 Apr 2007, 3:13 AM
#11
afo avatar

afo

Totally Zenned

Join Date:
Aug 2004
Location:
New York City
Posts:
6,800
Plugin Contributions:
0

Re: Main Page Hoover Color Doesn't Work

The part I've highlighted in red is the issue. It's incorrect for what you want to do.

.sideBoxContent {
background-color: #F5F5F5;
padding: 0.4em;
}
.sideBoxContent a { 
color: #000000;
}
a:hover, #navsideBoxContentTOC ul li {
color: #990099;
}

a:hover refers to ALL links which is why your other links aren't the color you expect on hover. To restrict it to your sideboxes, it has to be as below:

.sideBoxContent {
background-color: #F5F5F5;
padding: 0.4em;
}
.sideBoxContent a { 
color: #000000;
}
.sideBoxContent a:hover, #navsideBoxContentTOC ul li {
color: #990099;
}