Change Link Colors for Products

It's late and I can't figure this out

Just upgraded from 1.2.6 to 1.3.7 for a client, everything is going well, but I am having trouble with the CSS page(s).

Using the Template_Default CSS I was able to configure everything I wanted, however the links are white because of the colors they show up in.

The problem is that my background for the main section of the page is also white, so I want to have those links show up in a different color, and then change to yet another color when rollover happens.

I tried this:

.productListing-heading a:link {
color: #ffffff;
}

.productListing-heading a:hover {
color: #ff0000;
}

But that didn't work by putting that in either of my two CSS files (classic and default)

Would love a point in the right direction if someone can help me

here is the page/storefront I am working with

http://socalscrap.us/store/

Mike

vegascoug:

It's late and I can't figure this out

Just upgraded from 1.2.6 to 1.3.7 for a client, everything is going well, but I am having trouble with the CSS page(s).

Using the Template_Default CSS I was able to configure everything I wanted, however the links are white because of the colors they show up in.

The problem is that my background for the main section of the page is also white, so I want to have those links show up in a different color, and then change to yet another color when rollover happens.

I tried this:

.productListing-heading a:link {
color: #ffffff;
}

.productListing-heading a:hover {
color: #ff0000;
}

But that didn't work by putting that in either of my two CSS files (classic and default)

Would love a point in the right direction if someone can help me

here is the page/storefront I am working with

http://socalscrap.us/store/

Mike

Without looking it to much...

You do have the right idea....

But...you are calling your link to be white if it's #FFFFFF as what your example states. You woul need to change it to something else besides that.

.productListing-heading a:link {
color: #ffffff;
}

Does that make sense?

Thanks for the tip, I just hard coded the links I have at the top of the page to white and used the NavColumbOne to change the boxes links. That way the other ones on the page all worked fine.

Now if I can just figure out what's going on in FireFox with the table at the top of my page ;)

Mike

vegascoug:

Thanks for the tip, I just hard coded the links I have at the top of the page to white and used the NavColumbOne to change the boxes links. That way the other ones on the page all worked fine.

Now if I can just figure out what's going on in FireFox with the table at the top of my page ;)

Mike

What are you having problems with now?

The table cells on the top of the header are double the size in FireFox and showing up correctly in IE

http://www.socalscrap.us/store/

Part of your problem is that you have a <p> element inside each table cell, which by default has a large top & bottom margin. Adding this to your stylesheet will suppress the margin in that location:

#AutoNumber1 p {margin-top: 0; margin-bottom: 0;}

Of course, the next question is whether the <p> serves any purpose...

What size is your monitor? At 1024px wide, some of the links do not have enough room and wrap to another line, forcing extra height.

Thanks a lot, that worked perfectly!

I can mess with the formating of those tabs to make them wrap better, just didn't know why it wasn't working in FF like it did in IE

That was VERY helpful!

Usually when something works in IE but not in Firefox, it is because there is an error which IE is compensating for, while Firefox does what you tell it to do.

It is generally recommended to develop in Firefox, and then fix any issues that arise when viewed in IE (usually due to IE bugs).

Thanks, I just found that out and will use that advice in the future. I am in the process of taking over a mess created by someone else and trying to clean it up, this isn't something I developed.

FF is a good way to test however, that is useful!

I know you didn't originally write this, but I was struck by the involved table code for the tabs, and thought I would see how the code for the same thing would look with div/css styling. The original:```html

<div align="center"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#ffffff" width="100%" height="46"> <tr> <td width="100%" bgcolor="#FFFFFF" class="headerNavigation" height="18">  </td> </tr>

<tr>
  <td width="100%" bgcolor="#FFFFFF" class="headerNavigation" height="28" valign="top">
  <div align="left">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="95%" id="AutoNumber1" height="28">
      <tr>
        <td align="center" bgcolor="#EE585B" width="65">
        <b><font color="#FFFFFF" face="Verdana" size="2"><a href="http://www.socalscrap.us/index.htm">
		<font color="#FFFFFF">Home</font></a></font></b></td>

        <td background="images/top_tab_right.gif" width="8"> </td>
        <td align="center" bgcolor="#FFFFFF" width="5"> </td>
        <td align="center" bgcolor="#EE585B" width="65">
        <b><font face="Verdana" size="2">
		<a href="http://socalscrap.us/store/index.php">
		<font color="#FFFFFF">Store</font></a></font></b></td>
        <td align="center" background="images/top_tab_right.gif" width="8"> </td>
        <td align="center" bgcolor="#FFFFFF" width="5"> </td>

        <td align="center" bgcolor="#EE585B" width="75">
        <b><font face="Verdana" size="2">
		<a href="http://socalscrap.us/forums/"><font color="#FFFFFF">Forums</font></a></font></b></td>
        <td align="center" background="images/top_tab_right.gif" width="8"> </td>
        <td align="center" bgcolor="#FFFFFF" width="5"> </td>
        <td align="center" bgcolor="#EE585B" width="75">
        <b><font face="Verdana" size="2">
		<a href="http://socalscrap.us/gallery/"><font color="#FFFFFF">Gallery</font></a></font></b></td>

        <td background="images/top_tab_right.gif" width="8"> </td>
        <td align="center" bgcolor="#FFFFFF" width="5"> </td>
        <td align="center" bgcolor="#FFFFFF" width="5"> </td>
        <td align="center" bgcolor="#EE585B" width="100">
        <b><font face="Verdana" size="2"><a href="design_team.htm">
		<font color="#FFFFFF">Moderators</font></a></font></b></td>
        <td background="images/top_tab_right.gif" width="8"> </td>
        <td align="center" bgcolor="#FFFFFF" width="5"> </td>

        <td align="center" bgcolor="#EE585B" width="100">
        <b><font face="Verdana" size="2"><a href="about.htm">
		<font color="#FFFFFF">Quote Book</font></a></font></b></td>
        <td background="images/top_tab_right.gif" width="8"> </td>
        <td align="center" bgcolor="#FFFFFF" width="5"> </td>
        <td align="center" bgcolor="#EE585B" width="100">
        <b><font face="Verdana" size="2"><a href="http://www.socalscrap.us/calendar/">
		<font color="#FFFFFF">Calendar</font></a></font></b></td>

        <td background="images/top_tab_right.gif" width="8"> </td>
        <td align="center" bgcolor="#FFFFFF" width="5"> </td>
        <td align="center" bgcolor="#EE585B" width="100">
        <b><font face="Verdana" size="2"><a href="contact_us.htm">
		<font color="#FFFFFF">Contact Us</font></a></font></b></td>
        <td background="images/top_tab_right.gif" width="8"> </td>
        <td align="center" bgcolor="#FFFFFF" width="5"> </td>
		<td align="center" bgcolor="#EE585B" width="100">

        <b><font face="Verdana" size="2"><a href="http://www.socalscrap.us/file_sharing.htm">
		<font color="#FFFFFF">File Sharing</font></a></font></b></td>
        <td background="images/top_tab_right.gif" width="8"> </td>
        <td bgcolor="#FFFFFF" width="8%"> </td>
      </tr>
    </table>
  </div>
  </td>

</tr>
</table>

</div> ```The replacement HTML:```html <!--html for header nav tabs--> <div class="headerNavigation"> <ul> <li class="home"><a href="http://www.socalscrap.us/index.htm">Home</a></li> <li class="store"><a href="http://socalscrap.us/store/index.php">Store</a></li> <li class="forums"><a href="http://socalscrap.us/forums/">Forums</a></li> <li class="gallery"><a href="http://socalscrap.us/gallery/">Gallery</a></li> <li class="moderators"><a href="design_team.htm">Moderators</a></li> <li class="quoteBook"><a href="about.htm">Quote Book</a></li> <li class="calendar"><a href="http://www.socalscrap.us/calendar/">Calendar</a></li> <li class="contactUs"><a href="contact_us.htm">Contact Us</a></li> <li class="fileSharing"><a href="http://www.socalscrap.us/file_sharing.htm">File Sharing</a></li> </ul> </div> ```The CSS, to be added to the stylesheet:``` /*css styling for header nav tabs*/ .headerNavigation { width: 100%; background: #ffffff; padding: 18px 3% 0 3%; text-align: left; } .headerNavigation ul {width: 100%;} .headerNavigation ul li { list-style: none; font: normal normal bold 1.2em verdana, sans-serif; color: #ffffff; background: #ee585b url(../images/top_tab_right.gif) top right; /*make img a small white triangle for corner cut*/ padding: .5em 1em; /*change to .5em 0 if % widths used*/ margin: 0 .8em 0 0; text-align: center; } /*uncomment to set explicit % widths for tabs*/ /* .headerNavigation ul li.home {width: 8%;} .headerNavigation ul li.store {width: 8%;} .headerNavigation ul li.forums {width: 9%;} .headerNavigation ul li.gallery {width: 9%;} .headerNavigation ul li.moderators {width: 11%;} .headerNavigation ul li.quoteBook {width: 11%;} .headerNavigation ul li.calendar {width: 10%;} .headerNavigation ul li.contactUs {width: 11%;} .headerNavigation ul li.fileSharing {width: 11%;} */ ```

Thanks, I'll give it a try!