Layout question

[r1formetoo]

Hey Glenn, I thought that perhaps my Home, Log In, Shopping Cart, and Checkout links at the top were a bit hard to read with the color contrast and all so I added the code below to my stylesheet but I can't imagine why it hasn't changed my page at all. Any idea?

Ian

#navMainWrapper
{ background-image:url(../images/upper-header-back.gif); /*navMainWrapper controls the very top of the page with Home and Log In*/
padding:0.0em 0.2em;
font-weight:bold;
height:29px;
float:bottom;
color:#FFFFFF;} /* This color code changes the color of the Home, Log In, Shopping Cart, and Check Out links */

a:hover,#navMainWrapper ul li a:hover
{ color:#ff1c16; } /* This color code changes the HOVER color of the Home, Log In, Shopping Cart, and Check Out links */

[gjh42]

Try
#navMainWrapper a {color: #ffffff;}


Oh, and there is no such property as
float:bottom;

What are you trying to get with that?

[r1formetoo]

Try
#navMainWrapper a {color: #ffffff;}


Oh, and there is no such property as
float:bottom;

What are you trying to get with that?

I can't say that I recall. I'll give it a shot.

Ian

[r1formetoo]

Try
#navMainWrapper a {color: #ffffff;}


Oh, and there is no such property as
float:bottom;

What are you trying to get with that?

I'm not really sure why the bottom command was there but it's gone now. I also changed the code to reflect what you said to try but both the hover and non-hover colors seem to be working. Did I miss something here?

Ian

[gjh42]

It looks like you have everything...
#navMainWrapper {} controls the font color of the :: separators.
#navMainWrapper a {} controls the color of the un-hovered links.
#navMainWrapper a:hover {} controls the color of the hovered links.

[r1formetoo]

It looks like you have everything...
#navMainWrapper {} controls the font color of the :: separators.
#navMainWrapper a {} controls the color of the un-hovered links.
#navMainWrapper a:hover {} controls the color of the hovered links.

Hey Glenn, I moved the

#navMainWrapper a {}
#navMainWrapper a:hover {}

statements to the bottom of the page but still the links are not displaying in the color I am specifying. What do you think is the problem? This is a very easy thing to command but yet it's not working. I have no idea...

Ian

[gjh42]

As a first step, add !important to the property. If that changes it, then there is another rule somewhere that is stronger and overriding this one. You will want to find and amend that if possible.

#navMainWrapper a {color: #ffffff !important;}

[r1formetoo]

As a first step, add !important to the property. If that changes it, then there is another rule somewhere that is stronger and overriding this one. You will want to find and amend that if possible.

#navMainWrapper a {color: #ffffff !important;}

Well you were right as usual. Thanks for the idea about the "important" statement. Thats another handy little tool I'll be sure goes back in my box. The thing is, below is the only other navMainWrapper statement in the file so I can't imagine what's over-riding my previous statements.

Ian

#navMainWrapper
{ background-image:url(../images/upper-header-back.gif); /*navMainWrapper controls the very top of the page with Home and Log In*/
padding:0.0em 0.2em;
font-weight:bold;
height:29px;
color:#FFFFFF;}

[r1formetoo]

Wait. I've just now noticed that my header and footer links are now hovering to red too but before they hovered to white. I suppose I could always move the header and footer hover statements below my new navMainWrapper statement but I'm sure that won't do any good because we gave navMainWrapper it's "important" title. So, what do you recommend?

Ian