Posts in Category: Site Design

More CSS Fun!

Tonight I updated the skin for this site to use the 3 column approach from here, one of the "holy grail" layouts. You can't really see a difference can you? Actually this page is only using 2 columns and I have code in the codebehind file for the master page to change the css class for the center div depending on whether there is anything in the left and right divs so right now you're really not seeing the "holy grail" technique but I thought it might be interesting to explain the various techniques I have found and tried so far and the pros and cons. I will say the approach of this one is the best one so far that I have actually been able to get working in mojoPortal.

I think I will move the mono links to the right column for a little while after I post this so you can see the 3 column div technique.

The most difficult thing in implementing a 3 column CSS layout is getting it to work in IE because the current released versions of IE are not as CSS compliant as they should be, hopefully this will be addressed in IE 7. It makes things really hard for web designers and developers to move forward with standards compliance when a dominant browser requires all kinds of crazy hacks in the css to make it work. Reminds me of a few years back when it was such a pain to make things work in Netscape 4.7 the same as they did in IE.

In mojoPortal you have 3 virtual columns available to you that you can add content to using the CMS features with reasonable uses being:
1 content in center only
2 content in left and center
3 content in right and center
4 content in left, center and right (aka 3 column layout)

Basically we're talking 1, 2, or 3 columns so one important goal of the css technique is it must be flexible enough to adapt to each scenario. My solution here is to programatically assign the css class to the center div and show and hide the left and right divs depending on if they have content. The different css classes assigned to the center div typically adjust the margins to either provide room for the outer columns or to take up the available space if the outer columns are empty. So basically we create a 3 column layout and remove things to make it 2 or 1 column so achieving the columns is really the biggest challenge.

The first 3 column approach that I got working in Firefox, IE, and Opera was one I learned from the wrox book, Accessible XHTML and CSS Web Sites.  It put the divs in this order: left, right, center, then it used float : left on the left side, float:right on the right side and since the float command takes the elements out of the flow of the page it allows the center to take the place where the floated divs would have been as if they weren't there at all. You do have to adjust the right and left margins of the center div so that it doesn't overlap the content of the floated divs on the sides. Its still had a problem in IE if you had any tables or divs inside the layout divs with a width of 100% sometimes this would push the content to the bottom of the page. But I found that if you change to 99% or 98% it generally fixes it and you don't usually notice the difference to much. So that worked and I have been running it on this site (until tonight) and on for several weeks now.

However the above approach has a few shortcomings. Positioning the dvs in the order left, right, center places the main content at the bottom of the markup which is not ideal for search engine consumption and poses a problem in browsers that have no css support because the content would display in physical order, again with the main content pushed to the bottom.

David Neal has also been working on CSS layout and pointing me to a lot of good resources. He tried this holy grail technique in mojoPortal and found he couldn't get it to work in IE even though the sample page does work. Then I tried the OneTrueLayout technique and came to the same result, they worked great in Firefox or  Opera but were out of whck in IE.  I think things fall apart in IE if the interior content of the layout divs also include divs with floats and positioning, in other words more complex markup and layout than the samples.

The OneTrueLayout technique is interesting, it orders the divs center, left, right and uses large negative margins to align things. Seemed pretty creative but it didn't work for me in IE. But there was a link in the OneTrueLayout Article to another article about the "holy grail" layout, but not the same one as above and it worked. This technique orders the divs in natural order, left, center, right, and it uses absolute positioning with fixed widths for the left and right columns and allows the center column to be fluid and use any available width. So its good for search, accessible, and it works with IE! Sweet!

Also it adapts nicely to 1 or 2 columns. I just hide the empty columns and change to a different css class on the center.

Along the way I also tried the CSS Creator, but again IE was a problem at least in mojoPortal. I also studied the CSS Zen Garden examples but I found they don't really lend themselves to wrapping around dynamic content, many of them are just way to artsy. I would love it if someone can prove me wrong and do something that artsy with mojoPortal but its beyond me to make something that artsy integrate with any possible content from articles to forums. I suppose it would be more reasonable to make a specific page that you wanted that artsy and then use the feature in mojoPortal that allows page specific skins. That kind of detailed styling is for when you know exactly ahead of time what the content of the page will be.

This is not to say that you can't do beautiful designs that will work with any dynamic content, I'm just saying some of those zen examples are way exotic and taylored to the specific conetnet of the page.

David's latest blog post pointed me at yet another great resource, Open Web Design, totally awesome for the design challenged like me. I should probably ditch some of the skins I made myself for mojoPortal and create new ones based on some free designs from this site.

This Page Is Valid XHTML 1.1!

I did a little more tweaking and now This Page Is Valid XHTML 1.1!

Again you have to try it with the source from a browser like Firefox, if you just point the validator at this page it renders down level which is not compliant.

I should note that the FCKeditor is only XHTML 1.0 compliant so any page with an editor will not validate against XHTML 1.1 until that support is in place. In any case since browsers seem to be forgiving I think I can still go forward with the XHTML 1.1 DOCTYPE

Also I had to fix even more content in the db where I have historically had the bad habit of using target=_blank on links to external sites. target is no longer valid in XHTML 1.1

This site is also currently using much more CSS layout and most of the table layout has been removed. I'm still working on a few areas of this and still need to update more of the built in skins to work with the new model but I figured it was good to go ahead and do the skin for this site first so I can test it in the real world.

Thanks go out to Alexander Orlov for help and good advice in working toward XHTML compliance.

This Page Is Valid XHTML 1.0 Transitional!

After a good bit of work, according to the Wc3 validator page, this page is Valid XHTML 1.0 Transitional!

Now if you want to confirm this yourself I will say you can't just enter the url and have it come up valid becuase when the validator pages makes a request it is rendered differently than when using a browser. In other words the .NET Server controls do their down level rendering when it can't detect the browser and apparently the downlevel rendering is not valid.

If you view this page with Firefox and then right click and view the page source then save this file as www.mojoportal.htm and upload it to the validator it gives it the nice approval.

Ultimately I would like to get to Strict compliance instead of Transitional but this is a step in the right direction.

Another factor that comes into play in a CMS like mojoPortal is whether the existing markup in the database that has been entered using the CMS features conforms. I think in general FCKeditor does produce valid markup, but I have found places where I edited stuff directly as source and I didn't do it with XHTML validation in mind at the time so I am cleaning things up in the content as well as in mojoportal code. For example using a valign attribute on a td is not valid for Transitional and moving forward toward Strict, links with a target attribute are not allowed so I am cleaning up things like that too.

I doubt if all the pages in this site are currently valid but I am making progress and eventually we will be able to proudly display the icon