CSS Control Adapter Toolkit for ASP.NET 2.0

Tired of having <table> elements rendered by the built-in ASP.NET server controls and wishing you could use a pure CSS solution instead?  Read on...

 

Today we published the CSS Control Adapter Toolkit for ASP.NET.  This toolkit provides information about how the ASP.NET 2.0 Control Adapter Architecture works, as well as a set of 5 sample control adapters (with full source that you can optionally tweak/modify) that provide CSS friendly adapters for 5 of the built-in ASP.NET controls (specifically: Menu, TreeView, DetailsView, FormView and DataList). 

 

You can download this release for free from here, and immediately begin using it in your ASP.NET 2.0 sites today.

 

What does a control adapter let me do?

 

A control adapter allows you to plug-into any ASP.NET server control and override, modify and/or tweak the rendering output logic of that control. 

 

What is cool about control adapters is that they do not require a page developer to program against a new control, or modify the control programming model semantics (you still use the same control properties, methods, events and templates you did before).  Indeed – a page developer can be entirely oblivious that a control adapter is being used (the control adapter model makes it very clean to register and encapsulate this support).

 

The CSS Control Adapter Toolkit includes a bunch of pre-built control adapter samples that show how you can use the control adapter architecture to emit 100% CSS based rendering output (no tables or inline styles – instead use external CSS stylesheets for everything). 

 

Show me an example of how I use these control adapters?

 

To see a simple example of control adapters being used, you can download this self-encapsulated menu sample I built here. 

 

Note that you do not need to install the CSS Adapter toolkit to run my sample (the CSS Adapter Toolkit mainly includes samples and documentation – you can directly embed adapters into any ASP.NET application and doing so doesn’t require you to install or update any system components). 

 

 

The above menu sample contains a Web.SiteMap file that defines the site navigation structure of an ASP.NET 2.0 Site (note: to learn more about the new ASP.NET 2.0 Site Navigation features read this past post).  It then contains two pages – menu1.aspx and menu2.aspx – that use the standard ASP.NET 2.0 Menu control to databind against the SiteMap.

 

Menu1.aspx shows how to build a horizontal sub-menu navigation system (note: below is all of the code and markup – there is no code needed in the code-behind or on other pages or classes):

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Menu1.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Menu Sample1</title>

    <link href="StyleSheets/Menu.css" rel="stylesheet" type="text/css" />

    <link href="StyleSheets/MenuStyle.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form id="form1" runat="server">

    <div>

       

        <asp:Menu ID="Menu1"

                  runat="server"

                  Orientation="Horizontal"

                  CssSelectorClass="PrettyMenu"

                  EnableViewState="false"

                  DataSourceID="SiteMapDataSource1">

        </asp:Menu>

   

        <asp:SiteMapDataSource ID="SiteMapDataSource1"

                               ShowStartingNode="false"

                               runat="server" />

    </div>

    </form>

</body>

</html>

 

It renders like this in FireFox:

 

 

Menu2.aspx shows how to build a vertical sub-menu navigation system:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu2.aspx.cs" Inherits="Menu2" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Menu Sample2</title>

    <link href="Stylesheets/MenuStyle.css" rel="stylesheet" type="text/css" />

    <link href="Stylesheets/Menu.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form id="form1" runat="server">

    <div>

     

        <asp:Menu ID="Menu3"

                  runat="server"

                  CssSelectorClass="PrettyMenu"

                  EnableViewState="false"

                  DataSourceID="SiteMapDataSource1">

        </asp:Menu>

       

        <asp:SiteMapDataSource ID="SiteMapDataSource1"

                               ShowStartingNode="false" runat="server" />

   

    </div>

    </form>

</body>

</html>

 

It renders like this (also using FireFox):

 

 

Because I’ve registered the CSS Menu Adapter for my site, the output from both menu controls are rendered using <ul><li></ul> html elements instead of tables.  I am using two CSS stylesheets within the site to stylize them.  One is a stylesheet called “Menu.css” that comes with the CSS Toolkit and contains the standard “behavioral” rules for menu controls (for example: what elements are blocks vs. inline, etc).  The expectation is that developers don’t change these often.  The second stylesheet is called “MenuStyle.css” and contains the site specific style behavior (colors, fonts, sizes, location, etc).  I can either work on this file directly myself, or pass it off to a designer to use standard CSS styling techniques to customize it. 

 

Click here to see a diagram that is included with the CSS Toolkit Whitepaper to see the default styling rules used with the CSS Menu Adapter. 

 

Note that if you want to customize the rendering even further you can easily tweak the CSS Menu Adapter to modify it however you want (the source for each CSS adapter ships with both VB and C# versions).  Laurent has a good example of how he did that to stylize Site Navigation node selection here.

 

So how does someone create an ASP.NET control adapter from scratch?

 

Creating a control adapter is fairly straight-forward.  Basically you do two things:

 

1) Create a class that derives from the System.Web.UI.Adapters.ControlAdapter base class or one of the built-in sub-classes of it (for example: System.Web.UI.WebControls.Adapters.MenuAdapter or System.Web.UI.WebControls.Adapters.DataBoundControlAdapter).  Within the sub-class, you then override the appropriate methods to customize the markup however you want. 

 

For example, the below code-snippet shows a few snippets from the CSSFriendly.MenuAdapter that ships with the CSS Adapter Toolkit:

 

 

Note how the “BuildItems” method (which is called from the “RenderContents” virtual method) is used to output <ul> elements instead of tables for the Menu output.  Notice also the built-in helper methods that can be used to support indentation and HTML tag rendering.

 

The Control Adapter class that you create can be added into your web project and compiled as part of the project.  Alternatively, for greater re-use you could add it to a class library project and reference it from multiple web-projects (allowing nice re-use and factoring). 

 

2) Once you have created a ControlAdapter class that customizes the output however you want, you register it within your ASP.NET 2.0 Web Application by adding a .browser file within the /App_Browsers sub-directory underneath the application root:

 

 

This .browser file can contain browser capability rules (declared using XML) that allow you to customize whether a control adapter is used – and optionally even configure a separate one for each browser or input device.  For example, if you wanted to only use the above Menu control adapter for Versions 6-9 of IE (but fall back to using tables with IE5), you would register it like so within your .browser file:

 

<browsers>

  <browser refID="IE6to9">

    <controlAdapters>

      <adapter controlType="System.Web.UI.WebControls.Menu"

               adapterType="CSSFriendly.MenuAdapter" />

    </controlAdapters>

  </browser>

 

  <browser refID="MozillaFirefox">

    <controlAdapters>

      <adapter controlType="System.Web.UI.WebControls.Menu"

               adapterType="CSSFriendly.MenuAdapter" />

    </controlAdapters>

  </browser>

 

</browsers>

 

Once you’ve saved the above two rules you are all set.  When an IE 6->9 browser or FireFox browser hits the site now, all Menu controls will render using CSS style-friendly output (specifically <ul><li></ul> elements).  When an IE browser hits the site, the Menu controls will render using tables. 

 

You do not need to modify any page code or code-behind code to use this.

 

How to Get Started with the CSS Adapter Toolkit

 

You can learn more about the CSS Adapter Toolkit and download it from here.  The first thing you should read is the CSS Adapter Toolkit Whitepaper to understand better how it works, and understand the default CSS rules that the CSS Adapters in the toolkit output by default.

 

Once you’ve download and installed the CSS Adapter Toolkit you can then choose “File->New Web Site” using either VS 2005 or Visual Web Developer (which is free) and select the CSS Adapter Toolkit Starter Kit:

 

 

You can choose to create either a VB or C# version of it.  Once created it will install the CSS Adapters, associated .browser files, and a bunch of samples that use it:

 

 

Just select the default.aspx page and hit run to get started.  You can then browse through the samples and step through the adapter code to see how they work.

 

To re-use the adapters as-is, just copy the files in the /app_code/adapters/ sub-directory into your applications, along with the .browser file in /app_browsers.  You will then also want to copy the appropriate static CSS stylsheets and JavaScript files as well.  And then you are good to go.

 

To ask questions about the adapters and/or ask questions, please check out this forum here.

 

Hope this helps,

 

Scott

 

P.S. We are calling this first release of these adapter samples a "beta" and are actively looking for feedback (we'll then update the adapter samples and add more).  Please leave suggestions on how to improve it in this forum here.

 

P.P.S. The CSS Adapter Toolkit is released under a permissive license that allows full re-use of the code for both commercial and non-commercial applications.  Feel free to re-use the adapter code however you want (we’d also love you to post sample adapters that you build!). 

 

P.P.P.S. If you are looking for another really cool extensibility download we’ve done recently, check out this post about the source release of the ASP.NET 2.0 Providers.

77 Comments

  • the site still lists beta 1.1 -- does 'released' mean released as in the update on 4/29?

  • Hi Tim,



    I just clarrified the title of the post and added a PS statement as well. By released I meant &quot;now available&quot; -- although that was confusing.



    Thanks for pointing this out,



    Scott

  • That is uncanny. 5 minutes ago I was thinking &quot;I need to add a menu to this site. I'd like to use a sitemap file and the asp Menu control but I'd rather it was more CSS oriented.&quot;



    Talk about great timing!

  • It is great to have this much control over the rendering of the html.

    Thanks heaps :)

  • That is so great, you've made my day.

    I'm an Israeli developer, so right-to-left alignment is a must (Hebrew). Previously, digging into the menu control and trying to align it (in the horizontal case) was such a pain, I just gave up.

    Now, in 10 minutes it's all done.

    This sure helps :)

  • I'm amazed at how almost every article you post is a little gem of goodness. I usually save reading your articles until the end of the day because I know I'm going to get engrossed in whatever you've just published.



    Thanks for the code/news you are exposing here, they are much appricated.

  • Hi, good css news. by the way will this css adaptors will be supporting in Expression web designer too...? Can you focus more on recent happenings in web designer too by a blog or so.

  • Nice set of website templates you have there.. :)

  • Hello Scott,



    is there any way to define Control-Adapters in web.config instead of using a *.browser-File?



    Thanks!

    Jens



  • Great Stuff, thanks Scott.

  • Hi Rahil,



    I will try and post about Expression Web Designer in the future too. It is going to be very cool, and has great support for both CSS and ASP.NET (including Master Pages, Themes, Databinding, etc).



    Hope this helps,



    Scott

  • Hi Elixir,



    Yep -- this adapter toolkit would fix the issue you reported in the feedback center about extra tables or span elements for the data controls.



    Hope this helps,



    Scott

  • Hi Jens,



    I don't think there is -- although I'm not 100% sure. You could register them at the machine level if you wanted to avoid declaring them in each app.



    In general we've found that people declaring them in .browser files since it avoids having a single file that everyone has to check-in/check-out to update.



    Hope this helps,



    Scott

  • Hi Scott,



    Food for thought...



    do you think that adapters could be used to &quot;intercept&quot; non XHTML parts (e.g. unclosed tags, non-quoted attributes and such) in a page (by making a page adapter) and converting them to be XHTML compliant at render?



    regards,

    Vladan Strigo

  • I know about the HttpModule option, just was considering alternatives also.



    I (obviously :)) didn't grasp the adapter concept correctly.



    thanks,

    Vladan

  • is there a way to modify the menus so they have less hourglass flickering?

  • Great stuff Scott.



    This comes in good time for a new asp.net project i'm working on



    Good timming! :)



    Regards!

  • Will CSS adapters be created for all web controls...or at least the ones that generate ugly code??



    Really love the improvements so much cleaner to work with!!

  • This is very nice I must say. Is it possible to use this method to stop some controls from outputting inline styles? Like the gridview for example seems to output a style attribute no matter what properties are set. It would be nice to output style attribute free html with every control.

  • Hi Granville,



    You can create CSS adapters for any ASP.NET control (all built-in controls support them). We will continue putting out adapter sample updates that include more of them - although are hope is that lots of people create and share their own too! :-)



    Thanks,



    Scott

  • Hi Brian,



    Yep -- you could use this to modify the output of a GridView control as well.



    Thanks,



    Scott

  • Awesome!! Great job on pushing this ability into the product. I love it.

  • Thanks for the quick response Scott seeing as I believe you are in my City, Dublin, this evening :)

    I'm wondering how you could set the browser file to use the adapters for any browser. In general using css and web standards the whole point is that it should work with any browser. Is this just a case of using an * instead of a code for the browser in the browsercaps file?

  • Why not just build the original controls to support clean output?

  • When this is release ready, it will make a huge difference to some people.



    There has always been a situation where ASPX is a closed rendering product implemented in ways that some developers won't put their name to. Some have gone the &quot;roll your own&quot; route to get decent results.



    Great that we are getting enough control.

  • Hi Scott,

    This is fantastic it is exactly what I wanted. But (there is always a but isn't there) I want to be able to specify what control instances can use the adapter, and leave other control instances uneffected by the adapter, I did this by specifiying an attribute on the control during design time.



    I implemented this in the adapter by having each overriden function call it's base function if the control does not want to use the adapter. But this does not work 100% i.e. the control does not render itself as if the adapter was not there. In the case of a menu, only the first menu level is rendered and there are no javascript functions attached. Do you know if it is possible to do what I want?



    Thanks.

  • Any examples in vb.net, please?

  • I find this very complex and difficult to understand.



    This comment here is confusing as well:



    &quot;What is cool about control adapters is that they do not require a page developer to program against a new control, or modify the control programming model semantics (you still use the same control properties, methods, events and templates you did before). Indeed – a page developer can be entirely oblivious that a control adapter is being used (the control adapter model makes it very clean to register and encapsulate this support).&quot;



    As a page developer (I feel insulted here, but oh well), how can I be oblivious that it is being used if I need to implement this on a page?



    Wouldn't it be equally productive to include an option for a control to use CSS and have a GUI CSS interface? Maybe this is just my lack of understanding.

  • On the 'datalist' example - I cannot switch to design view - is this something I've setup wrong?



    Thanks

  • very useful stuff! thanks

  • Hi Brian,



    Yep -- you can do * mappings as well so that you can have any browser pick this up.



    Hope this helps,



    Scott

  • Hi Maestro,



    For new controls that is definitely the goal. There will always be cases where you want to override the output though (no matter how clean it is if it doesn't meet your specific requirements). The adapter architecture lets you do this without having to re-build or re-write controls.



    Hope this helps,



    Scott

  • Hi Dom,



    The CSS Control Adapters ship with both VB and C# samples. When you create the CSS Adapter Template project just specify VB as the language and you are good to go.



    Hope this helps,



    Scott

  • Hi Complex,



    I did not mean &quot;page developer&quot; in a negative sense (when I build a page for a site I think of myself as doing page developement and being a page developer). What I meant was that you can build pages using controls and not have to learn a new control or object model to program against it. The same APIs and programming concepts apply.



    What the control adapters give you is exactly what you asked for above. Basically an option for controls to emit CSS based output and to design your page using CSS styles and interfaces.



    Hope this helps,



    Scott

  • Great stuff... Thanks.

  • Scott,



    Anyway this kind of &quot;article&quot; post could be reposted somewhere that supports easier printing? Thanks again for the tons of useful information coming from your blog.



    Tom

  • Scott, Just to clarify: If I want to make a control adapter, I have to write code? I can't, for example, make an XML file that contains the markup to be written along with attributes and "attach" this to the control concerned, setting a property on the control that states the XML file is to be used for markup creation. Is the code sample above a template I use? How would I modify this for a particular control whose markup I want to alter? Thanks Dom.

  • Thanks Scott for the adapters. I wish this is there by default in the controls shifted by Microsoft. I am still trying to experiment and play with the adapters. I was wondering if we can have the xhtml strict doctype used with these adapters. Will the adapters generate the xhtml that passes validation.

  • Hi Dom,

    If you create a new control adapter then you will write some code (it is fairly minimal code -- basically you author the shape of the HTML to output).

    The code sample above includes built-in code samples for modifying the output of 5 of the built-in ASP.NET controls. We'll be adding even more overtime.

    Hope this helps,

    Scott

  • Hi Venu,

    The output we generate from the built-in ASP.NET controls does render XHTML strict markup. What these control adapters do above is have the output also render using CSS as the default as well.

    Hope this helps,

    Scott

  • These adapters are great. The menu control is back in business. If i have a few webusercontrols consisting of an ascx+codebehind file. I am planning to compile these ascx files and use the compiled dll in other projects. In those other projects i would like to be able to use this adapter technique to change its output. Is this possible? and what steps do i have to take to be able to make an adapter for a control in this dll.

  • Hi Jean,

    You can use these adapters in any project. If you want, you can just compile the adapters into the same assembly as your user-control project (although generally I'd probably recommend instead compiling it into a separate class library assembly). All you then need to-do is add the appropriate .browser declarations to the project and you are good to go.

    Hope this helps,

    Scott

  • Scott,



    An unrelated question: how do I get that gold looking colour on my VS 2005?



    Thanks

  • I was looking for this type of article with samples finally I got it from you scott.

    simply amazing and well explained.

  • Hi Dom,

    I'm actually just using Windows XP with the standard Luna theme and the folders come out golden like that (I didn't actually do anything special to enable them!).

    Hope this helps,

    Scott

  • Scott,



    I haven't got the gold colour option in the drop down list. Is there a download that I need?



    Thanks

  • Hi Jonathan,

    I'd recommend asking for help in this forum here: http://forums.asp.net/1018/ShowForum.aspx It is dedicated to the CSS Control adapters and hopefully you should be able to get the help you are lookin for.

    Thanks,

    Scott

  • This is great stuff, but there are only four pages on the web mentioning RefID and MozillaFirefox and IE6to9. &nbsp;Ss there a definitive list of all possible values for RefID? &nbsp;There's no way to use &quot;refID=*&quot; or something if we want CSS rendered for all browsers?



    Thanks for your great help in all things ASP.NET, Scott!

  • Hi Jon,

    You can actually say refID="Default" to have a single entry that applies to all browser devices.

    Hope this helps,

    Scott

  • I'm trying to figure out why in the Menu1.aspx example, in IE, the link for Folder1 Page2 covers the entire area of the item's rectangle and Folder1 Page3's entire area is not clickable, only the text itself. &nbsp;I'm not seeing any differences in the rendered html or sitemap configuration. Firefox does not have this behavior. Thanks for any help.

  • Hi Scott



    Nice work.



    However, the code in your MenuAdapter class doesn't seem to render postbacks correctly (no anchor tag &nbsp;is output with the postback javascript on it) when I declare something like:



    &lt;asp:Menu ID=&quot;AspMenu&quot; runat=&quot;server&quot; Orientation=&quot;Horizontal&quot; Width=&quot;425px&quot; onmenuitemclick=&quot;AspMenu_MenuItemClick&quot; /&gt;



    Without the control adapters hooked up it renders correctly and fires my menuitemclick handler when clicked.



    Any ideas?



    Thx

  • Scott,

    This is nice stuff, thanks for posting. Do you think it would be possible to create a JavaScript menu adapter?



    That is, it would render JS code which would then be used on the client just-in-time to construct the HTML for a menu, rather than sending across a large block of HTML.



    I ask because I'd like to use asp:Menu as part of a GridView templateColumn, and I really don't want to be sending 20 K across the wire when I really just need to specify a few bits for each line item, and then can dynamically construct a menu that is 90% identical except for the bit flipping and a couple of parameters....



    Let me know what you think..

    Thanks

    Josh

  • Hi Josh,

    Yep -- you could definitely create a JavaScript menu adapter. What I'd probably recommend is to store the JavaScript in a separate .js file that you link in (so as to cache for multiple requests), and then include inline either some Javascript that calls into the separate .js file or passes in string data to construct the menu.

    Hope this helps,

    Scott

  • Hi Josh,

    Any chance you could post this question in the CSS Control Adapter forum on http://forums.asp.net? A few folks from the team monitor that and might be the best people to help.

    I know that Russ (who is working on the CSS Adapter) is looking to add call-back support to the treeview and menu that will allow incremental expansion of items on demand (so basically when they are clicked). That should provide what you are after.

    Hope this helps,

    Scott

  • Has anyone used adaptors to clean up the login controls. I am trying to do this currently, but am stuggling to find the correct render methods to overwrite.

    Great article and blog Scot, you insight has proved to be very helpful.

    BuR

  • I haven't tried it yet, but thank you.
    I've just started using .net and was frustrated at the need for tables everywhere.
    I gotta conform to accessibility rating of 2 star, and at present don't know exactly what that is, but I know that tables aren't gonna get us there, so this should be a great help.
    Many thanks.

  • Do you think in the future you can just put this adaptor kit rendering stuff into the framework itself automatically instead of forcing developer to individually have to override each controls. It's great to have that option but the majority of the time if you're a one developer person team you really don't have time to focus on thing like this. I mean all I really want to do is go into Visual Studio 2005 develop my apps and really not have to worry about how it will render. I think it would be nice if we can just download the framework and it should just render exactly like the browser. It should be able to render to the browser the same way as if I were to code the html by hand. It just seems silly now that we're in 2006 and we're still facing the same cross compability issue as we were back in 2000. What happen to the
    way of doing thing that was working in 1.1 but in ASP.NET 2.0 it doesn’t work anymore. Simple thing like setting the width of a label is not even cross browser how frustrating. It works great in IE but other browser not so why is that. Why isn’t the framework rendering correct html format.


  • Hi Zendcoder,

    Can you send me a sample via email of the problem you are seeing?

    The ASP.NET label control doesn't render a width attribute unless you specifically program it to. So you shouldn't be seeing a default width every get rendered unless you indicate it should.

    Thanks,

    Scott

  • Scott,

    Your blog is simply marvelous! I just started developping with ASP.NET this year, and I don't count anymore how many times I found solutions to my questions/problems in your blog.

    Cheers!

    JF

  • Hi Scott!

    This is a great post, just like many of them on your blog! I have a question about CSS Control Adapter: What if I need to use the standard FormView behaviour on some aspx page, and the CSS friendly FormView behaviour on some other aspx pages on the same site? I guess I will have to develop a cusom control for this right? If so, please let me know of any good tutorial on how to do this you would know of.

    Best regards,

    JF

  • Hi Jean,

    I believe you can actually mark some pages to use the control adapters, and keep others using the built-in renderings.

    In general, it is probably easiest just to use them for all pages, though, to keep things consistent.

    Hope this helps,

    Scott

  • Ok>! There also seems to be another issue.. not fiqured out what as yet. I used the detailsview. Created a Template col. in the EditItem I included a dropdownlist and an Object datasource. When the control goes into Edit mode it just seems to hang. !

    Cheers!.

  • Hi Fuzzelogic,

    Can you try out the latest build of the CSS Control Adapters (http://weblogs.asp.net/scottgu/archive/2006/09/08/CSS-Control-Adapter-Toolkit-Update.aspx) and see if this is still an issue? If so, please send me email (scottgu@microsoft.com) and I'll have someone look at it.

    Thanks,

    Scott

  • Hi Scott,

    I have been using web parts to develop a customizable website. But by default, the web parts render table structure. I tried to overwrite the table structure rendered by WebPartZone to "div" but the javascript used by Web Parts doesn't like "div", because it is using "objTable.rows(index) to find the objects in the webpartzone and apparently the javascript is hard coded to use tables.

    Do you know any solution for overwriting the table structure rendered by web parts?

    Thanks you

  • Hi Bryon,

    Unfortunately I don't think there is a super easy way to override WebParts -- since some of the layout does assume tables (since the CSS to-do this positioning with divs isn't super easy). We are going to look at whether it is possible to build another control adapter for webparts in the future that uses -- but right now it probably isn't very easy.

    Sorry!

    Scott

  • will it slow things down, I mean for page rendering stuff ???

  • Hi Ludmal,

    There shouldn't be a performance hit when using the CSS Adapters.

    Thanks,

    Scott

  • Is there anyway to have curved menus(at the top left and right edges) in the menu control.

  • Almost everything seems to work fine with the Menu Adapter (only adapter I'm interested in :-)

    I say "almost" because this does not work:

    /* While you hover over a list item (li) you are also hovering over a link or span because */
    /* the link or span covers the interior of the li. So you can set some hover-related styles */
    /* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
    .MainMenu ul.AspNet-Menu li a:hover,
    .MainMenu ul.AspNet-Menu li span.Asp-Menu-Hover
    {
    color: White;
    background: transparent url(../img/activeArrowRight.gif) right center no-repeat;
    }

    The activeArrow is never displayed on my menus. I'm using the adapers 1.0. Any possible causes?

    Thanks!

  • Hi Prashant,

    Can you send me more details on the issue you are seeing? I can then help loop you in with the developer of the CSS Control Adapters to investigate.

    Thanks,

    Scott

  • This control adapter is a really bad attempt at pure CSS. You guys should just learn "accessible forms" using CSS and you would not need all the adapters, javascript & other stuff in your site.

  • Hi Scott,

    how to make the menu control support arabic (Direction Right to Left - RTL)

    Thanks

  • I want to be able to use the DataListAdapter for one datalist in my web application. All other datalists should behave normally. How do you go about using the DataListAdapter for only one control? Any help would be greatly appreciated.

  • Putting out the Control Adapters is a great science experiment. However, what I am looking for is a set of controls from a vendor that work in IE, FF, and Safari. Using the stock asp.net controls or the Control adapters is a waste of time if you have an internet or intranet site. Why spend weeks/months working on a project when in the end only ie users can view it?
    The tools provided by MS to web developers are truly shameful because they can not be relied on to produce reliable output. The very least MS could do is put up a page and say these controls work and these don't and we don't plan on ever fixing them.

  • Gave Up >> The out of the box ASP.NET controls work cross browser in IE, FF, Safari and Opera.

    The CSS Control Adapters also emit consistent CSS markup for all browsers.

    What specifically are you running into?

    Thanks,

    Scott

  • Hi theer I just started using the menu adapter from the toolkit and it is great.
    One thing I cant figureout - I have all my css in one css file as they need to be changed dependent on user prefernce. This worked fine whithout the adapter.
    But I have two menu controls on the screen and using the adapter the generated html tags use the same id names for both so i cannot style them different within the same css style sheet
    I am new to this so I may be just not understanding but how do i achieve this
    Help please
    Thanks
    Lee

  • Hi Lee,

    You can't vary the control adapter being used by user, but you can change the CSS file or ASP.NET Theme that is being applied on a per-user basis.

    This tutorial of mine shows how to do this: http://weblogs.asp.net/scottgu/archive/2006/07/22/Recipe_3A00_-Dynamic-Site-Layout-and-Style-Personalization-with-ASP.NET--.aspx

    Hope this helps,

    Scott

Comments have been disabled for this content.