Text color/Box dimensions for CHROME menus?

[NWGeo]

1) Script Title:
Chrome CSS Drop Down Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:
It is not clear how I can change the COLOR for the text items at the top of the menu. They appear black, all of the time. I searched through the chrome.js and chromestyle.css files and tried various combinations of values.


Question #1:

I have tried this setting for the .chromestyle in the CSS file:
.chromestyle{
width: 99%;
font-family : Arial,Helvetica,Univers,Zurich BT;
font-size : 12 px;
font-weight: bold;
color: white;

}


But resorted to this in the <li> tags:
<li><a href="http://www.dynamicdrive.com"><font color="#FFFFFF" font-size= 4 px>Home</a></li>

This is pretty lame and would rather set this value in the CSS file.


Question 2:

Is there a way to make the menu bounding box shorter in height? The image slice in the example is 2 pixels by 50 pixels. The image that I am repeating is only 2x16 in size. I am trying to ";stuff" a menu is a small table cell and I'd like it to fit snuggly with no white space. See attached image for exampels of this above and below white space. Any suggestions on either of these issues would be greatly appreciated.

Question #2 is most important to me. My hairball soution to Question #1 is not preferred, but it does work.

[Veronica]

For the text links at the top of the menu, you change the text color here:

.chromestyle ul li a{
color: #ffffff;    /*change from #494949 to #ffffff or whatever*/
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

As for the second question, you can change the padding to make the bounding box fit snugly without white space on top and bottom:

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 0;     /*change from 4px 0 to 0*/
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

[NWGeo]

You are a LIFESAVER! thank you so much. Hopefully this will be of interest to others as well.

I am working with a graphics designer person and I've got some very tight visual constraints to work inside of. I can't really implement the "full" CHROME menu, but would like to use the drop-down functionality for a single selection. Can I really place this <div>...</div> code inside of a singe table cell <td></td> and see the same effects?

In other words, can I turn "off" the code that wants to stretch the entire image slice all the way across the screen? Again, what I really want is a single CELL that displays one drop-down menu item. I just hope that I can insert this code inside of a table [cell] tag...

Attached is my attempt to have four table cells with the 2nd one containing the CHROME dropdown menu. The menu works fine, but, as you can see from the attached file, there is a little "tab" of orange which extends into the third cell. Below is the code I am using. It's just a simple table with four cells:

<table border=1 width=100%>
<tr>
<td width=25%>Home</td>
<td width=25%>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#" rel="dropmenu1">Resources</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
</td>
<td width=25%>Contact</td>
<td width=25%>About Us</td>
</tr>
</table>




Lynn Kim
Northwest Geographics
www.nwgeographics.com