Page layout question

Okay, so I added that bit of code to my stylesheet to change the color of the information links but take a look. I have no idea how adding on little thing like that could mess up my header and everything? Shoot, even the side box headers are gone too!

Ian

You have somehow knocked out one character and that has invalidated the last quarter of your stylesheet. Find```
.normalprice,.productSpecialPriceSale
{ text-decoration:line-through;
.productSpecialPrice,.productSalePrice,.productSpecialPriceSale,.productPriceDiscount
{ color:#f00; }

If something in the stylesheet is not responding to changes, try copying that rule and pasting it (in Edit CSS) one spot at a time higher in the stylesheet; when pasting the rule causes a change, you know you are above the point where the problem is.

Glenn, have a look now. I'm having a bit more success now. I've changed a few things including the footer links color. However, I'd like the double colons in the footer to the remain black as they are for the header. How exactly did I manage that? I ran a search for this and came up with nothing.

Ian

The :: separators are controlled by the overall container color, while the links are controlled by the container link color.
Make the container color black, and the link color yellow (edit these rules):```
#navSuppWrapper,#navCatTabsWrapper
{ margin:0;
background-color:#abbbd3;
background-image:url(../images/tile_back.gif);
padding:0.5em 0.2em;
font-weight:bold;
color:#f7c808;
height:1%; }

...

#navSupp ul li a
{ text-decoration:none;
padding:0 0.5em;
margin:0;
color:#f7c808; /* This color code changes the color of the ez pages links in the footer */
white-space:nowrap; }

Gotcha. I'm getting better at this. I'm finally starting to make notes in my stylesheet each time I discover what color codes control what. I now want to change the color code on all my little links throughout the entire site. I've tried making several changes but each time I just end up changing something else instead. For instance, if you click on "hardware" then all the links are in yellow. I feel those should be a different color because yellow is just hard to read. I've been through the sheet several times line by line and I can't seem to figure out exactly which bit of code is controlling all these smaller links. I know some larger bit of code must be doing this to me but I can't seem to figure it out yet because let's be honest, phrases like navEZPagesTOC ul li a aren't exactly easy to understand. I've also run a search and looked at several previous posts but everyone else seems to be continually talking about adjusting the color of the header or footer, which is not my case. So, how do I change the bagillion other link's colors?

Ian

You are probably best off setting the original a:link {} color to what you want for the majority of ordinary links on your site, and then setting the larger header/sidebox/footer links individually.

Okay, I give up....again. I'm trying to make the links in the header look the same as they do in the footer. Yellow links with black colons. If you look at my code you'll quickly see that I've been playing with it but for some reason I can not seem to get the desired result. And it's weird too. Sometimes I'll make a change and reload the page and the colons will be yellow. I'll reload again without making any changes and that page load they'll be black. I can keep doing this and it constantly switches back and forth so I have no idea what to base my decisions and changes on since the damn thing won't stay consistent with whats either right or wrong. The hard part is that I'm trying to change ONLY the links in the header.

Ian

Try adding this style

#navMain ul li a
{
text-decoration: none;
padding-top: 0pt;
padding-right: 0.5em;
padding-bottom: 0pt;
padding-left: 0.5em;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
color: #f7c808;
white-space: nowrap;
}

I am no designer... design hacker at best, but this is the style creating the desired look in the EZ pages links and the corresponding div for the top menu only. Then if it works you have only to add the colons to the file and clean it up.

Also your page is seriously messed up in FireFox

~Melanie

It was a good start duplicating #navEZPagesTop for #navEZPagesTop a, but now you want to strip everything but the color from #navEZPagesTop a:```
/#navEZPagesTop
{ width:512px;
float:right;
background:none;
font-size:0.95em;
font-weight:bold;
margin:111px 0 0 0;
padding:0.5em;
color:#000000; }/ /This color color code is responsible for the links in the ez pages header/

#navEZPagesTop a
{ color:#f7c808; } /This color color code is responsible for the links in the ez pages header/

#navMain affects only the top Home Login bar, and has no effect on the ez-pages bar. Don't change that unless you do want the style change Melanie suggested.

Okay Glenn, so I added ,#navEZPagesTop a to my hover code after making your change. Now as always I can reload the page in IE and FF and get 5 or 6 different responses in 10 reloads. I have no idea if it's working right or not cause every time I get a different response when I reload without having made a change to anything. I think perhaps my computer is retarded. Is it displaying correctly for you?

Ian

I thought you meant the TOP bar w/ login and such sorry.

It is displaying correctly in FF & IE for me with the exception of lack of hover color.
No matter how many times I reload, displays correct :clap:
~Melanie

Not for me. It was displaying the header links in yellow as I wanted with no hover feature but as soon as I hit the reload button..........something different. This is ridiculous.

Ian

r1formetoo:

Not for me. It was displaying the header links in yellow as I wanted with no hover feature but as soon as I hit the reload button..........something different. This is ridiculous.
Ian
Just a thought - sometimes the cache is fooling you with visited links colours - have you tried closing the browser and restarting to check link colours ? I've found that they will reset to the correct colour after a restart...

Vinyl Signs:

Just a thought - sometimes the cache is fooling you with visited links colours - have you tried closing the browser and restarting to check link colours ? I've found that they will reset to the correct colour after a restart...

I restarted both FF and IE and it's still not working. FF is showing green links that have the black hover feature while IE is showing only yellow links with no hover.

Ian

clear your cookies & cache... then reboot

Good call. So I rebooted the machine and now it's displaying everything correctly with the links in yellow; however, even though I have ,#navEZPagesTop a in my hover statement those links are still not displaying in black when you hover the mouse over them. Do I have something in the wrong order?

Ian

Yes.
THere is a mnemonic that goes LoVe-HAte for remembering how to handle link styling. When two styles with the same priority can apply to the same element, the last one will control. It is generally best to move from general selectors to more specific ones, and links take special handling.

They can be just links (:link), recently visited (:visited), currently hovering (:hover),
or active - in the middle of being clicked (:active).

If the :visited rule goes after the :hover rule, links that have been visited will always take that styling even if they are being hovered on.
If you have styled #navEZPagesTop a in the stylesheet, you need to put the #navEZPagesTop a:hover rule below that rule.

gjh42:

Yes.
THere is a mnemonic that goes LoVe-HAte for remembering how to handle link styling. When two styles with the same priority can apply to the same element, the last one will control. It is generally best to move from general selectors to more specific ones, and links take special handling.

They can be just links (:link), recently visited (:visited), currently hovering (:hover),
or active - in the middle of being clicked (:active).

If the :visited rule goes after the :hover rule, links that have been visited will always take that styling even if they are being hovered on.
If you have styled #navEZPagesTop a in the stylesheet, you need to put the #navEZPagesTop a:hover rule below that rule.

I tried making that change as you can see but it's not working. Of course that doesn't mean it hasn't in fact changed and that my pc isn't showing me something wrong. Now both IE and FF are reloading continually with something different.

Ian

Glenn, is the page displaying correctly for you so that the header looks like the footer?

Ian

Nope, the header ez-page links are black. You have all the right code in your stylesheet, but then you have this after it:```
a:hover,#navEZPagesTop a
{ color:#000; } /This bit of code makes the header ez pages links hover to the color code specified/

a:hover controls all general link hover colors, but #navEZPagesTop a resets the basic ez-pages links to black. You need
#navEZPagesTop a:hover {}
to do what you are trying to do. The basic a:hover, does not need to be repeated here.