Page view counter

Tableless skins, CSS, XHTML and DNN 3.x

Last post 08-23-2005 9:47 AM by rich freeman. 15 replies.

Sort Posts:

  • Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 4:29 AM
    • Loading...
    • kunle_X
    • Joined on 01-10-2005, 9:50 AM
    • Posts 67
    • Points 335
    Right, I've had enough of DNN's shortcomings with respect to clean tableless, CSS design and [X]HTML validation.

    I have a few questions:

    1. Is DNN 3.1 any better than DNN 3.0.13+ on this issue?. If so, is DNN 3.1.1+ out yet?. I've seen a few bug reports on 3.1 here already.

    2. Is stripping out the use of <table> for document structure in the DNN codebase all I need to do to support even complex CSS designs with negative margins, CSS-based vertical and horizontal centering and, restricted viewports (e.g. a site restricted to using just a 700x400 viewport for all it's content)?

    3. Is changing default.aspx all I need to do to [better] support XHTML output that validates?. Can I get validating XHTML strict output with DNN?

    4. Has anyone else done this before?. Successfully?

  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 6:32 AM
    • Loading...
    • DeveloperMCDBA
    • Joined on 05-08-2005, 8:08 AM
    • Deltona, FL, USA
    • Posts 1,114
    • Points 5,570
     kunle_X wrote:
    Right, I've had enough of DNN's shortcomings with respect to clean tableless, CSS design and [X]HTML validation.

    I agree it should be more standard, at least in regard to xhtml. Although avoidance of positioning with tables seems to be the good and standards trend, there are many that are scepticle of browsers ability to handle a pure table-less positioning aproach. I've never delved into this to the degree in which I would know if these concerns have any merit, however I think http://csszengarden.com/ shows there really isn't an excuse not to.

    I have always been frustrated with even Visual Studio .net's inability to create a nice net clean html bare bones page. The indention has been awful too. wtf? ...for 2003 & 2003! Glad to hear 2005 this is all very different.

    Would you like to create and post a bare bones skin that implements a clean xhtml non-table structure? I think many would find that valuable and would probably use it.

    DNNExperts did something similar here:
    http://www.dnnexperts.com/SkinsContainers/OptimizedDNN30Skins/tabid/124/Default.aspx

     kunle_X wrote:
    1. Is DNN 3.1 any better than DNN 3.0.13+ on this issue?. If so, is DNN 3.1.1+ out yet?. I've seen a few bug reports on 3.1 here already.

    3.1.1 is about to come out.
    http://www.dotnetnuke.com/Project/About/Downloads/tabid/125/Default.aspx
    I have no idea on the skins. Maybe one of the core members could comment.

     kunle_X wrote:
    2. Is stripping out the use of <table> for document structure in the DNN codebase all I need to do to support even complex CSS designs with negative margins, CSS-based vertical and horizontal centering and, restricted viewports (e.g. a site restricted to using just a 700x400 viewport for all it's content)?

    I think it would be that easy. I know I've changed many of the panes in doing different skins to div's or spans. Be sure to move the id with them, however.

     kunle_X wrote:
    3. Is changing default.aspx all I need to do to [better] support XHTML output that validates?. Can I get validating XHTML strict output with DNN?

    well, most important is to change the skins in the "~/portals/_default/" skins and containers folders from there. Read the skinning document that comes with the source of dnn. Look in the documents folder.

     kunle_X wrote:
    4. Has anyone else done this before?. Successfully?


    Again, check out DNNExperts.com

    This may not have anything to do directly with your questions, but this skin from speerio is quite impressive: http://skinergy.speerio.net/
  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 6:36 AM
    • Loading...
    • DeveloperMCDBA
    • Joined on 05-08-2005, 8:08 AM
    • Deltona, FL, USA
    • Posts 1,114
    • Points 5,570
  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 6:40 AM
    • Loading...
    • DeveloperMCDBA
    • Joined on 05-08-2005, 8:08 AM
    • Deltona, FL, USA
    • Posts 1,114
    • Points 5,570
    one more thing I want to mention is that the free text box which is the default editor is really bad at creating anything close to being xhmlt. You may want to look into using the fckeditor from sourceforge. there are providers available that make using this possible in dnn.
  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 7:21 AM
    • Loading...
    • nokiko
    • Joined on 10-22-2002, 2:36 PM
    • Utrecht, Netherlands
    • Posts 2,146
    • Points 10,740
    1. dont know

    2. you dont need tables for dnn panes anymore, i usually use div or span for my contentpanes  Look no tables :)

    3/ you can change defualt.aspx to minimize the nr of validation errors, but you can never get dnn3 to validats as xhtml strict because any asp.net page doenst validate as xhtml strict. You could use a filter that rewites the returned content in xhtml strict but this would require a core change

    4. I can do css skins and menu's but in order to realy validate you either need an xhtml strixt filter that you apply before rendered page is returned or maybe it could be done with a http module so you wouldnt need a core change just something added to the web.config
    Armand Datema
    5 Skins, 4 SkinObject, 38 Containers, 2 Modules and more Euro 50 a year.
    SchwingNuke
    Offshore DNN and ASP.net development
    Container Creator
  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 7:23 AM
    • Loading...
    • kunle_X
    • Joined on 01-10-2005, 9:50 AM
    • Posts 67
    • Points 335
     DeveloperMCDBA wrote:
    Would you like to create and post a bare bones skin that implements a clean xhtml non-table structure? I think many would find that valuable and would probably use it.

    DNNExperts did something similar here:
    http://www.dnnexperts.com/SkinsContainers/OptimizedDNN30Skins/tabid/124/Default.aspx


    Thanks for the link, I'll look into it. As for the skin, my understanding is that DNN would barf at any such skin that wasn't <table>-ized.

     DeveloperMCDBA wrote:

     kunle_X wrote:
    2. Is stripping out the use of <table> for document structure in the DNN codebase all I need to do to support even complex CSS designs with negative margins, CSS-based vertical and horizontal centering and, restricted viewports (e.g. a site restricted to using just a 700x400 viewport for all it's content)?

    I think it would be that easy. I know I've changed many of the panes in doing different skins to div's or spans. Be sure to move the id with them, however.

    Cool. I'm off to <div>-ify a local copy of DNN...

     DeveloperMCDBA wrote:

     kunle_X wrote:
    3. Is changing default.aspx all I need to do to [better] support XHTML output that validates?. Can I get validating XHTML strict output with DNN?

    well, most important is to change the skins in the "~/portals/_default/" skins and containers folders from there. Read the skinning document that comes with the source of dnn. Look in the documents folder.

    They are covered in my previous statement. The intent is to go through DNN and <div>-ify all/most uses of <table> for representing document structure/layout. That includes the default skin and any included skins I care to use (just DNN blue in my case).

     DeveloperMCDBA wrote:

     kunle_X wrote:
    4. Has anyone else done this before?. Successfully?


    Again, check out DNNExperts.com

    This may not have anything to do directly with your questions, but this skin from speerio is quite impressive: http://skinergy.speerio.net/


    Hmm, nice. Way too many tables in there though. Do you know any examples of pure CSS skins used with DNN?


  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 7:30 AM
    • Loading...
    • nokiko
    • Joined on 10-22-2002, 2:36 PM
    • Utrecht, Netherlands
    • Posts 2,146
    • Points 10,740
     DeveloperMCDBA wrote:

    Would you like to create and post a bare bones skin that implements a clean xhtml non-table structure? I think many would find that valuable and would probably use it.

    one more thing I want to mention is that the free text box which is the default editor is really bad at creating anything close to being xhmlt. You may want to look into using the fckeditor from sourceforge. there are providers available that make using this possible in dnn.


    I have a nr of bare starter skins on http://css.schwingnuke.com

     DeveloperMCDBA wrote:

    one more thing I want to mention is that the free text box which is the default editor is really bad at creating anything close to being xhmlt. You may want to look into using the fckeditor from sourceforge. there are providers available that make using this possible in dnn.


    as of last weel telerik has released there new component pack and it is xhtml 1.1 compliant , WAI-a and WCAG 1.0. This goed for there editors there grids and the navigation componetn and they do make your asp.net sites much more accessible.


    Armand Datema
    5 Skins, 4 SkinObject, 38 Containers, 2 Modules and more Euro 50 a year.
    SchwingNuke
    Offshore DNN and ASP.net development
    Container Creator
  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 7:49 AM
    • Loading...
    • kunle_X
    • Joined on 01-10-2005, 9:50 AM
    • Posts 67
    • Points 335
    Hi nokiko,

    Thanks for your comments.

     nokiko wrote:

    2. you dont need tables for dnn panes anymore, i usually use div or span for my contentpanes  Look no tables :)


    That *is* table-less markup. Is this running on a standard DNN site?. If so, what version of DNN and, what did you have to do to get the table-less skin working. What about the DNN admin functionality?. Do you use a table-less skin for your admin pages too?. Do the controlpanel/iconbar etc still work?. What about page previews?. Is all this available somewhere?

    On a related note, can you comment on whether you think your method would work with a table-less skin that is constrained to a 700x400 viewport using the techniques discussed here:   
    I relate my (on-going) issues about trying to use DNN with such a skin here but in summary, it didn't work ;-(.

    There seemed to be my 700x400 "window" kinda floating in the foreground and behind it the list of errors that DNN produced below the controlpanel/iconbar. I had to delete the portal I was testing the skin with since I couldn't do anything (including logout to see how the skin looked for a normal user). I was also unable to add any modules successfully even though I had a <div id="ContentPane"/> just for that reason.

     nokiko wrote:

    3/ you can change defualt.aspx to minimize the nr of validation errors, but you can never get dnn3 to validats as xhtml strict because any asp.net page doenst validate as xhtml strict. You could use a filter that rewites the returned content in xhtml strict but this would require a core change


    I've been investigating that using module/handlers. I don't care much about avoiding core changes since I always deploy a parallel copy of my tweaked DNN.

     nokiko wrote:

    4. I can do css skins and menu's but in order to realy validate you either need an xhtml strixt filter that you apply before rendered page is returned or maybe it could be done with a http module so you wouldnt need a core change just something added to the web.config


    I'm looking into this as a second step. My first step is to solve the "how to use tableless skins with DNN" and "how to use DNN for a 700x400 viewport" website. I don't mind having to use a single containing table to please DNN if that would help.

  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 9:45 AM
    • Loading...
    • nokiko
    • Joined on 10-22-2002, 2:36 PM
    • Utrecht, Netherlands
    • Posts 2,146
    • Points 10,740
    Hi

    css.schwingnuke.com is running on a standard dnn 3 install with a modified default.aspx and a css driven list based menu ( all downloadable after registration )

    designs like that require valid html proper doctype etc, thsi is just the reason why t wont work with dnn. Because of am incoorect doctype enad extermely invalid html ie renders in quirksmode. And with quirksmode you can never get the cenered designs. If im not misstaken it should be doable with the xhtml default.aspx from my site

    yuou need to add runat="server" to your contentpane div

    and i never mind too much about the admin part so i keep my standard admin skin and for the frontend I use the css design

    Armand Datema
    5 Skins, 4 SkinObject, 38 Containers, 2 Modules and more Euro 50 a year.
    SchwingNuke
    Offshore DNN and ASP.net development
    Container Creator
  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-20-2005, 2:36 PM
    • Loading...
    • kunle_X
    • Joined on 01-10-2005, 9:50 AM
    • Posts 67
    • Points 335
     nokiko wrote:
    Hi

    css.schwingnuke.com is running on a standard dnn 3 install with a modified default.aspx and a css driven list based menu ( all downloadable after registration )

    designs like that require valid html proper doctype etc, thsi is just the reason why t wont work with dnn. Because of am incoorect doctype enad extermely invalid html ie renders in quirksmode. And with quirksmode you can never get the cenered designs. If im not misstaken it should be doable with the xhtml default.aspx from my site

    yuou need to add runat="server" to your contentpane div

    and i never mind too much about the admin part so i keep my standard admin skin and for the frontend I use the css design



    Thanks for the runat="server" reminder. Don't know how I missed that.


    Still using a standard DNN 3.0.13 release, I now have my 700x400 viewport (it's changing as I battle with DNN) centered vert/horiz using a wrapper table as below.

    <table border="0" height="100%" width="100%">
      <tbody><tr>
          <td align="center" valign="center">
          <!-- 700x400 CONTENTS HERE IN DIVS -->  <br>
          </td>
        </tr>
      </tbody>
    </table>

     The centering works fine outside DNN but in DNN, the viewport is clipped to the top edge of the browser canvas. Only the bottom half is visible/accessible - so all the menu and login links etc aren't visible. Also tried using TreeView Menu but the clipping is still present.

    Can think of why DNN alters the rendering so much. Any ideas?

    PS: I'm using a modified default.aspx that is quite similar to yours now - same DOCTYPE in any case.


  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-21-2005, 8:08 AM
    • Loading...
    • kunle_X
    • Joined on 01-10-2005, 9:50 AM
    • Posts 67
    • Points 335
    Talking to myself, he he.

     kunle_X wrote:

    Right, I've had enough of DNN's shortcomings with respect to clean tableless, CSS design and [X]HTML validation.

    I have a few questions:

    1. Is DNN 3.1 any better than DNN 3.0.13+ on this issue?. If so, is DNN 3.1.1+ out yet?. I've seen a few bug reports on 3.1 here already.


    No. I found that this issue isn't any different in both versions.

     kunle_X wrote:

    2. Is stripping out the use of <table> for document structure in the DNN codebase all I need to do to support even complex CSS designs with negative margins, CSS-based vertical and horizontal centering and, restricted viewports (e.g. a site restricted to using just a 700x400 viewport for all it's content)?


    Perhaps. In my case, it is unlikely to work with the code that DNN spews out ever because of the need for strict XHTML compliance. The underlying ASP.NET and MS controls don't do XHTML in any case so you'd have to source a replacement. Especially if you use SolPartMenu. Use a single wrapping table instead (I posted the code a little while back).

    Additionally, arbitary 3rd party modules are likely to not work correctly (mess up the display) and need source modifications to work with such a customized DNN.

     kunle_X wrote:

    3. Is changing default.aspx all I need to do to [better] support XHTML output that validates?. Can I get validating XHTML strict output with DNN?


    Changing default.aspx certainly improves XHTML compliance but, DNN on ASP.NET v1.1 can probably never get there. The MS controls frustrate that effort.

     kunle_X wrote:

    4. Has anyone else done this before?. Successfully?


    Dunno but, seems Nokiko and Speerio have come closest.

  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-22-2005, 10:31 PM
    • Loading...
    • rich freeman
    • Joined on 08-12-2003, 6:22 AM
    • Barrie, ON, Canada
    • Posts 152
    • Points 744
    You might also want to check out the standards-compliant RTE from xstandard (www.xstandard.com).  I have used it on a small non-DNN CMS site we built and it works well.  Support was excellent too.

    I really appreciate this discussion.  We've been deciding between DNN and just building our own reusable standards-compliant CMS.  The functionality of DNN is very attractive, but compliance is a big sticking point - we've been building all our sites to be compliant as best we can, and I'm concerned whether DNN is going to be able to do it (especially considering that we haven't worked with it before and just wrote our own tools).  Any advice is appreciated.

    Rich

  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-23-2005, 2:16 AM
    • Loading...
    • nokiko
    • Joined on 10-22-2002, 2:36 PM
    • Utrecht, Netherlands
    • Posts 2,146
    • Points 10,740

    Hi

    If you are conciddering to either build your own i say use dnn and enhance that

    1. make an xhtmlsctrict filter or httpmodule ( better because then you dont mess with core and kan reuse it and pass around to us :)
    2. create a much easier controlpanel for admin that will be xhtml comliant
    3. get rid of solpart using a more standard comliant menu. I have a basic one at http://css.schwingnuke.com or a better easier to style and extendible one at my subscribtion site http://www.schwingnuke.com
    4. no more solpart in the whole dnn project, in the containers add [DROPDOWNACTIONS] instead of [SOLPARTACTIONS] to make your containers xhtml based
    5. replace all dnn label tags with your custom roled dnn literal tag so that you can use more semantic uses for titles etc. eg. dnn:literal type="h3" data="moduletitle"
    6. recode the core modules that you need into a more semantic way by using unorders lists and datalists
    7. use a standard comliant editor ( telerik is now fullaccessible and xhtml 1.1 compliant )
    8. if using custom modules make sure you ahve full control over what you return, so instead of grids use repeaters, use your own semantic grid control, use scott's technique for templated modules. I also have a full module framework in place for usr defined master table modyles that you can use for practically any maste detail type module, it is based on custom repeaters and fully template driven so you can use standard xhtml ( im selling that on snowcovered or you can contact me privately )
    9. lots of checking to amke sure everything stays valid ;)

    Armand Datema
    5 Skins, 4 SkinObject, 38 Containers, 2 Modules and more Euro 50 a year.
    SchwingNuke
    Offshore DNN and ASP.net development
    Container Creator
  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-23-2005, 7:36 AM
    • Loading...
    • kunle_X
    • Joined on 01-10-2005, 9:50 AM
    • Posts 67
    • Points 335
    Thanks, nokiko.

    Will look into this. Already built my own menu server controls, just finishing off the skinobjects. Will probably go the module way.

    Cheers!


  • Re: Tableless skins, CSS, XHTML and DNN 3.x

    08-23-2005, 9:02 AM
    • Loading...
    • nokiko
    • Joined on 10-22-2002, 2:36 PM
    • Utrecht, Netherlands
    • Posts 2,146
    • Points 10,740

    no thanks

    so what did you build allready, im lways happy with more stuff to make accessible valid and semantic html

    Armand Datema
    5 Skins, 4 SkinObject, 38 Containers, 2 Modules and more Euro 50 a year.
    SchwingNuke
    Offshore DNN and ASP.net development
    Container Creator
Page 1 of 2 (16 items) 1 2 Next >