tags:

views:

44

answers:

3

Let's say I have an aspx page with a Menu web control. The menu web control renders as a html table on browser. My plan is to add css styles on the aspx page which will be sent to the browser. Let's say I add the following style to the aspx page

td
{
    background-color: Red;
}

This style gets sent to the browser together with the rendered html table

<table>
   <tr>
       <td>...</td>
       <td>...</td>
   </tr>
   <tr>
       <td>...</td>
       <td>...</td>
   </tr>
</table>

But the style is not applied. I'm really puzzled why this is the case. In general how do we predict the effect of CSS on ASP.NET wen controls?

+2  A: 

The menu overrides some styles.

Most ASP.NET controls expose a CssClass property, which you should use to assign styles to the control.

kbrimington
Hi Thanks for the reply. My understanding is css is meant to work with html tags, not really with ASP.NET web controls. In the CssClass style, are we only supposed to define styles that are already exposed by the web controls as properties? Additional styles are not supported?
Aperture
@user370401: Oh, styles are supported. Maybe this resource will help: http://msdn.microsoft.com/en-us/library/ms366731.aspx
kbrimington
+1  A: 

Maybe you can use in div and you can give a style from div like:

style:

#div td{ .... }

html:

<div id="myDiv">
 <table>
  <tr>
   <td></td>
  </tr>
 </table>
</div>
kad1r
+1  A: 

This is not a ASP.NET issue. Yes you're correct that CSS does not apply to server side controls as they appear in your ASPX/ASCX markup. They apply to the generated HTML. Most ASP.NET controls have a property CssClass where setting CssClass="n" which will add class="n" to some html tags they generate. So you can write css rules to target them with .n { ... }

But anyhow, in this case something else is going on which you haven't included in the question. I recommend grabbing Firebug, target the <TD> you expect to be styled, and see what CSS styles are being applied. Debug from there.

Maybe some other CSS rule is taking priority. Maybe your CSS rules were mistyped, or not actually included. Firebug is a good tool for tracking down these kind of mistakes.

To demonstrate that something else is going on, I verified your sample HTML+CSS works:

<html>

<style>
    td { background-color: blue }
</style>

<body>

<table>
   <tr>
       <td>...</td>
       <td>...</td>
   </tr>
   <tr>
       <td>...</td>
       <td>...</td>
   </tr>
</table>

</body>
</html>
Frank Schwieterman