overriding CSS properties

[kevcpu]

I have the following navigation menu CSS and need to disable the width: and height: settings defined in a previous location. Is this possible?

previous code:
#nav a:link, #nav a:active, #nav a:visited{
display:block;
padding:0px 5px;
color:#022d50;
text-decoration:none;
font-weight: bold;
padding-top: 10px;
width: 113px;
height: 31px;
}

latter code:
#nav li ul a{
float:left;
margin: auto;
}

So far I tried to set width and height to auto for "#nav li ul a" and it did not work.

[Major_Payne]

What do you mean previous location? If you can edit the external CSS file, then that's where you would do the changes. If you have set the CSS code you posted as embedded CSS, then that should override any CSS style from an external CSS file.

One way is to use embedded CSS and modify the selector id "na" to something else. Maybe "navigation" or "navi". Then put this on the pages where you want the changes to take place:

<style type="text/css">
#navi a:link, #navi a:active, #navi a:visited{
display:block;
padding:0 5px;
color:#022d50;
text-decoration:none;
font-weight: bold;
padding-top: 10px;
width: 113px;
height: 31px;
}

latter code:
#navi li ul a{
float:left;
margin: auto;
}
</style>

That goes between the head tags of each page where nav menu is used. Still, better if you edited the external CSS file being used for the pages.

[kevcpu]

The problem I am having is that the width and height settings for the first entry are messing up the settings for the latter code in my css file. I need to disable the width and height settings for the latter case. The latter case cannot have width and height settings. I need the width to grow according to the needs of the child content.

[Major_Payne]

Well, you certainly lost me on this as any CSS that comes AFTER previous CSS for the same selector will override the previous one. Which is latter one? The one you posted? If so, then just remove the width/height.

I may be getting confused here because I am not seeing what you are seeing or seeing the whole picture.

[LouiseMarie]

If you are using the later code on a different page or withing a particaulr div on the page give it a parent id to select that code instead.

ie:
html:-
body id="latter" or div id="latter"
css:-
# latter #navi li ul a{
float:left;
margin: auto;
}

this tells it that inside the element id="latter" any id="navi" will use this code.

CSS is cascading so later codes will add to OR overwrite properties that are in previous ids/classes etc... so if you need the height and width to be specific in the second use then you need to add this to the latter css like:

# latter #navi li ul a{
float:left;
margin: auto;
height:0px;
width:0px;
}

[LouiseMarie]

Sorry just read your previous comment regarding the width and height properties, could you set the width and height in the latter code to auto or 100%?