Thanks.  That worked for what I wanted.

Unfortunately this has now led to a style sheet nightmare with getting it to display as I want it to.  For some inexplicable reason, pages with related links are displaying perfectly, but pages without related links are now completely messed up.  The body text area background has changed colors, the footer content has moved WAYYYYYYY to the right side of the page to where you have to scroll over to see it.

But I have the xslt code working as I needed, so now it's just a matter of doing battle with the style sheet editing until I figure this out.

Thanks a bunch.

Wildlife, maybe your pagelayout is messed up because of the div#related-links is printed in the code even if the related links-field is empty. This can result in an empty div-tag, which means that the div will collapse and mess everything else up.

You could try to put the

<div id="related-links">

inside the <xsl:if>. This would mean that the div only shows up if the related links-field is filled out. Does this make sense?

/Kim A

Wildlife,

It's probably the MS XML processor attempting to close the empty tags.  Unfortunately that tends to mess up some css layout elements.  As mentioned you can test for the related links before generating the div tag.  However, if you need to have to div tag for layout purposes, like menu bar without menu items for design consistency, you can put a space between the start and end div tag using xsl:text.

<div id="related-links">

<xsl:text> </xsl:text>

<xsl:for-each ...>

//Link stuff here

</xsl:for-each>

</div>

This allows you to place a space between the elements without using the &nbsp; and your element should not longer close.  And yes there is an actual space between xsl:text and /xsl:text.

-Chris

Is there something wrong with using &nbsp; ?  I'm totally new to Umbraco, not an expert in the use of style sheets and am learning as I go along.  I used &nbsp; and that solved all the layout issues that I was having on pages without related links after getting this to work.

What I'm doing right now is going through all the Umbraco.tv videos one by one to learn everything.  As I'm doing them, I'm not only making sure I can get the functionality of everything working, but also the display of what's created. 

I've been having problems styling some of the elements being created by Umbraco itself.  I figured this one out on my own, but I still have a couple other elements that I haven't been able to figure out.  Specifically the individual elements of the login form and the individual elements of the forms that the Autoform package creates.  I was able to style the form itself as I wanted to (i.e.--background color, positioning, etc.), but I wasn't able to style the individual elements within it.  Everything I tried with that didn't have any impact on how the elements displayed.  I'm using Firebug in Firefox and Developer Tools in IE8 to try to figure out how to style these elements but haven't succeeded yet.  I think if I could see how to do it with one, I'd be able to do it with the rest.  For example, on the login form, how would I style just the top element that says "Log In".  In the way I have the form box styled, I'd like to change the background color and text color of just the element to make it appear as a header for the box instead of being two words with the same color and background as the rest of the form.  But I don't know where to access the code that is creating the login form.

Thanks again for the help.

There's nothing wrong with &nbsp; and can be used.  I have noticed it can effect certain styling in some cases, so just be aware of that.  The solution i gave was to correct a xslt parsing and cleanup issue more than a styling issue.  Preventing the self closing of tags.  That's why I suggested the method I did.

As for styling the login form I would suggest looking the the microsoft documentation to see all of the options available for the login server control.  http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.login.aspx.

The markup you use to place a microsoft control, is not usually the full rendered content.  So a 1 line server control will render as standard html.    Microsoft generally provides control properties to style individual elements, though not all elements.

As an alternative you can you can view the rendered html, and build your style rules off of that, based upon what is actually rendered.

-Chris

Chris, wildlife: A tip that I've learned recently is to use:

<xsl:comment />

This will prevent any styling from breaking as it does not produce an extra space where it doesn't need to be, instead it will generate:

<!-- -->

Sebastian and Chris:

I'm just going to leave the &nbsp; in there for now simply because it's working, following the "If it isn't broken, don't fix it" logic.  But I'm saving this thread so I can refer back to it later if I find that &nbsp; is messing things up on any later use of it.

Chris:

I like your idea about just styling what actually gets rendered, but I'm still not sure how I'd do that here.  Here is the code that is getting rendered (note that I added the div wrapper around the table in the template as part of my effort to style everything.  That worked for being able to do things like centering the table on the page and giving the entire table a different background color.  But efforts to do things like changing the colors of the login button have failed.

<div id="login-form">
<table cellspacing="0" cellpadding="1" border="0" id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1" style="border-collapse:collapse;">
  <tr>
     <td><table cellpadding="0" border="0">
            <tr>
             <td align="center" colspan="2">Log In</td>
          </tr><tr>
             <td align="right"><label for="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1_UserName">User Name:</label></td><td><input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$BodyContent$Login1$UserName" type="text" id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1_UserName" /><span id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1_UserNameRequired" title="User Name is required." style="color:Red;visibility:hidden;">*</span></td>
           </tr><tr>
             <td align="right"><label for="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1_Password">Password:</label></td><td><input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$BodyContent$Login1$Password" type="password" id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1_Password" /><span id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1_PasswordRequired" title="Password is required." style="color:Red;visibility:hidden;">*</span></td>
         </tr><tr>
             <td colspan="2"><input id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1_RememberMe" type="checkbox" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$BodyContent$Login1$RememberMe" /><label for="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1_RememberMe">Remember me next time.</label></td>
          </tr><tr>
             <td align="right" colspan="2"><input type="submit" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$BodyContent$Login1$LoginButton" value="Log In" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl00$ctl00$ContentPlaceHolderDefault$BodyContent$Login1$LoginButton&quot;, &quot;&quot;, true, &quot;ctl00$ctl00$ctl00$ContentPlaceHolderDefault$BodyContent$Login1&quot;, &quot;&quot;, false, false))" id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1_LoginButton" /></td>
            </tr>
      </table></td>
   </tr>
</table>
</div>

Here are the login-form style sheet elements I added:

#login-form
      {
   float: none !important;
          width: 210px;
      margin-left: auto;
    margin-right: auto;
   font-size: 9px;
          border: 1px solid #2763A5;
          background-color: #b5d8fc;
          color: #603813;
    }

#login-form form
      {
    float: none !important;
          width: 210px;
      margin-left: auto;
    margin-right: auto;
   font-size: 9px;
          border: 1px solid #2763A5;
          background-color: #b5d8fc;
          color: #603813;
    }

#login-form input
      {
   border: 1px solid #2763A5;
    background-color: #FFFFFF;
    color: #999999;
   font-size: 11px;
      padding: 3px;
     } 
  
#login-form .submit
      {
      padding: 2px;
     border: 1px solid #2763A5;
          background-color: #2763A5;
      color: #FFFFFF;
   font-size: 11px;
      }

There might be things with this not done correctly or redundantly.  I'm basically just trying things until something works and nothing has worked on this.

Focusing just on the

<td align="center" colspan="2">Log In</td>

line of rendered code, when I check that line in Firebug it says:

Inherited from  table#ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1

It only has the <td> with no id assigned to it.  So if I try to add a style sheet setting for td in my login-form styling, it will then apply that to all the td elements that come after it in this table, won't it?  If that's the case, then I can't make just this top <td> uniquely defined to have a different background color and text color from the other <td> elements.

I don't know if there is a way to do it with this table#ctl00_ctl00_ctl00_ContentPlaceHolderDefault_BodyContent_Login1 part because I'm not sure how to style that.  I'm OK with basic styling but when you get into stuff like this, I get confused by it.  I'm thinking that I'll still run into the same problem even if I knew how to do that because the line I'm wanting to apply this to is still just a regular <td> cell and anything I add to style it will also style all the other <td> cells.

Do you know where I can find the code that actually generates this login table?  If I knew where it was coming from, I could perhaps do some editing in there, for instance to maybe wrap the table within the table in the HTML code that gets rendered in its own <div> so that I can apply edits to just that single table, also change the <td> in the first login line I'm focusing on here into a <th> so I can style it uniquely apart from the other <td> cells.

Thanks for your efforts on this.  Much appreciated.

Kim A:  Sorry for not responding.  I somehow missed seeing your reply until just now.  The &nbsp approach worked fine for me, but I'll try what you said next time I run into something like this.  There will be more things that I add to this sidebar area I'm working on that will appear conditionally, so I'll try putting it inside IF next time.  I don't want to mess with what I have further at this point because it is working as is.  My newbie status to all of this has me leery of messing something up by playing with it more when I currently have it working fine. ;)

I'm seeing this on the Microsoft page you've steered me to:

"Applying CSS styles

<asp:Login ID="Login1" runat="server"></asp:Login>

OK, I found something now that I hadn't checked before.  In my Macros section, under Member Login, I see it is using the .NET User Control

usercontrols/umbracoMemberControls/umbLogin.ascx

So I'm assuming if I can access that file, I might be able to edit how the table displays in there.  Is this correct?

@Sebastiaan:

Damn Sebastiaan I didn't know that you could use a comment inside of an empty div-element, to make sure it didn't collapse. I'll try that the next time I have a similar issue :)

@Wildlife:

When your Umbraco-macro uses the umbLogin.ascx-file, you should be able to edit this file, and by this edit the HTML-output. Depending on how the file is coded though ;) But yes, the file can be found in the file-system.

/Kim A

Kim:  Our IT manager steered me to this package to do editing on these files in the admin area:

http://our.umbraco.org/projects/appcode--usercontrol-editor

It should be doable.  I have to try to style the login form, autoform, and the comments form this way next.

Sebastian, Thanks for the tip.  Wildlife, glad that you found something to work that you can style.  Referring to your earlier question about the source of the asp:login, that control is provided by microsoft and is embedded in one of their assemblies (dll) so you would not be able to see an ascx file for that control.

-Chris

is working on a reply...