CSS overriding

[marchmirchi]

i have a dynamic page which includes mulple templates(files). my issue is while including the template there are CSS files over there in that template and that CSS style reflect the style i have written in the page. i.e in this page i used <td> my desired style should be the one i have written in the page itself but for <td> style is coming from the including file.
how to over come with this issue. please advise


<link rel="stylesheet" href="menu2.css" id="css_menu"><!-- static styles for demo menu #1-->
<link rel="stylesheet" href="menu3.css" id="css_menu"><!-- static styles for demo menu #2-->

<style type="text/css">
.mymenu
{
font-weight: bold;
font-size:11px;
background: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0260AA;
text-decoration:none;
}
</style>

<table border="1" cellpadding="1" cellspacing="0" class="mymenu" >
<tr >
<td height="20"><a href="/ME/home">Home</a></td>
</tr>
</table>

[mwinter]

my issue is while including the template there are CSS files over there in that template and that CSS style reflect the style i have written in the page. i.e in this page i used <td> my desired style should be the one i have written in the page itself but for <td> style is coming from the including file.

You either need to increase the specificity of the embedded rule, or make the relevant declarations important.



<link rel="stylesheet" href="menu2.css" id="css_menu"><!-- static styles for demo menu #1-->
<link rel="stylesheet" href="menu3.css" id="css_menu"><!-- static styles for demo menu #2-->

Every id attribute value must unique within a document: you cannot have two elements with the same "css_menu" attribute value.



font-weight: bold;
font-size:11px;
background: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;

Do not use Verdana if you intend to make the font size smaller. Whilst Verdana might look readable at that size, the alternative fonts used if Verdana is not available may not be; the former has different glyph characteristics.



<table border="1" cellpadding="1" cellspacing="0" class="mymenu" >
<tr >
<td height="20"><a href="/ME/home">Home</a></td>
</tr>
</table>

If you are marking-up a list of links, don't use a table. Use a list instead. Tables are for tabular data (a navigation menu doesn't qualify, though a restaurant menu would).

Mike

[jscheuer1]

To that excellent exposition I might add that I see no style applied to any <td> in your code snippet. If this is the 'style i have written in the page' that you are upset is being overridden:


<td height="20"><a href="/ME/home">Home</a></td>

That is not a style, it is an attribute, and will usually be overridden by style. Inline style will always override stylesheet style of a similar weight. To make the above attribute a style, do this:


<td style="height:20px;"><a href="/ME/home">Home</a></td>