.NET and Open Source: better together


  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

CSS survival guide, part 2

There are two important things to understand when dealing with CSS - how to address element you are styling and why in the world it does not picking the style you are trying to assign it. For the first part you might consider to install add-in to your browser, there are many for FireFox and IE alike, so that it will actually show element address for you.  For example, Developer Toolbar for FF can show you full path to tag cloud link in the browser panel like shown in the picture. The second important thing to remember is that CSS called "cascading" for a reason: all styles down the road will cancel those on top. Which is a good thing - this way you can style all anchors first and then be able to override style for the second layer anchors canceling some attributes, keeping others and yet adding some on top.  And this is what we generally doing here: first level menu buttons have it's own style, sub-menus keep some of the attributes and cancel others so that sub-menus look different.  To overcome browser incompatibility we will add conditional block to the header of the page: More...

CSS survival guide (developer addition)

When you are a developer working with CSS on “as needed” bases, you have to be prepared for some pain and frustration. Don’t get me wrong, I love CSS – and what not to love? It makes your HTML code clean and light-weight, pages load faster and all formatting logic neatly separated from presentation markup. Beautiful! But I hate it, too. There are two major problems with CSS: it is not intuitive and every browser has its own parser doing job “better” (differently) than others. Practically, it means that when working on CSS you have to fire up 3-4 different browsers and test every line as you go. More...

Transforming unsorted list into CSS horizontal menu

Lately I’ve been working on the new cool theme for BlogEngine that I’m going to share with community. One of the tasks is to let it be more content oriented, which is a bit different then other themes. Basically, it comes down to having good navigation menu that will allow you to utilize stand-alone pages in BlogEngine to its full potential. Currently, you have a choice to make page a “child” of the other page so that pages do have hierarchy and can be nested into the tree-like structure. It just not rendered by BlogEngine this way, at least not right now. To make it happen I used code published on the BlogEngine forum, just making a few changes to fit my needs. This is a simple control that looks inside core library and renders all BlogEngine pages into unsorted list. Then, you can just add it to your theme and here you have it: More...