Override CSS Rule

[Fortune Hunter]

I have a navigation item that I am trying to get spaced out evenly in a table using CSS. I didn't write the original code, which combined with my limited knowledge of CSS is stopping from achieving the effect I need.

I need only one item in here to NOT inherit one aspect of all the style sheets, here is the code...

<table width="100%" border="0" cellpadding="0" cellspacing="0" >

<tr>
<td class="topNavTable_Dark" nowrap="nowrap"><ul id="SAW_TopNavigation">
<li class="SAW_TopNav_Light"><a href="membership.htm">Membership</a></li>
<li class="SAW_TopNav_Light"><a href="educationtraining.htm">Education&nbsp;&&nbsp;Training</a></li>
<li class="SAW_TopNav_Light"><a href="advocacy.htm">Advocacy</a></li>
<li class="SAW_TopNav_Light"><a href="events.htm">Events</a></li>
<li class="SAW_TopNav_Light"><a href="stateassociations.htm">State&nbsp;Associations</a></li>
</ul>
<div style="clear: left;"></div></td>
</tr>
</table>

The item in bold at the top is the last item of my navigation. I need to space the nav out evenly across this table with the first nav item on the left lined up to a graphic above it. I have the first item aligned left perfectly.

The problem is that to space these out I have added 70 pixels of padding to the right side of the navigation items, which effectively pushes the one next to it out by 70 pixels. So far so good, but I need to find a way to get the last item in bold above to NOT inherit this 70 pixels of padding on the right so I can push it to the end of the table without shifting the overall table cell out. I don't want to lose the other aspects of the formatting given to it by the CSS file, I just want to override this one aspect. Is this possible to do?

[Setek]

For a quick ugly hack, just do this:

<li class="SAW_TopNav_Light nopadding"><a href="stateassociations.htm">State&nbsp;Associations</a></li>

And in your CSS, below the rule that defines "

SAW_TopNav_Light

":

.nopadding { padding: 0; }

That should work :)

[Fortune Hunter]

Thanks, I also found another way to do it as well.

[SilverLining]

Fortune Hunter, would you mind sharing your other way with us. It's always useful to see various ways to achieve the same thing.

[Fortune Hunter]

SilverLining:

It would be too much code to post in the forum with all the attached style sheets, but here it is in a nutshell.

Each item in the code above had a style that had padding on the right side. I kept adding padding to it until I had the menu items spread out like I wanted. However this pushed the last item out past my design on the right because the padding was also added to this element.

I created a new style in the style sheet identical to the ones I applied to all the others, in fact, I just cut and pasted it. I then renamed this rule with the same name, but added a "2" in the name. I then changed the padding on this style on the right to "0". Finally I applied this style to the above item, but on the last element. Essentially this allowed the style rule on the other elements to push out the one next it by the amount of padding designated, but because of the new rule applied to just the last item it had no padding. Here is the code above with the change...

<tr>
<td class="topNavTable_Dark" nowrap="nowrap"><ul id="SAW_TopNavigation">
<li class="SAW_TopNav_Light"><a href="Membership.htm">Membership</a></li>
<li class="SAW_TopNav_Light"><a href="Education_Training.htm">Education&nbsp;&&nbsp;Training</a></li>
<li class="SAW_TopNav_Light"><a href="Advocacy.htm">Advocacy</a></li>
<li class="SAW_TopNav_Light"><a href="Events.htm">Events</a></li>
</ul>
<td class="topNavTable_Dark" nowrap="nowrap"><ul id="SAW_TopNavigation2">
<li class="SAW_TopNav_Light"><a href="State_Associations.htm">State&nbsp;Associations</a></li>
</ul>
<div style="clear: left;"></div></td>
</tr>

Hope this helps.