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:
- <!--[if IE]><style type="text/css">@import"ie.css";</style> <![endif]-->
Now, all IE
"hacks" will be in their own style sheet (which might always come in
handy) and we should be ok with both IE and FF. The complete solution can be
downloaded here, it includes HTML page, 2 style sheets and 2 GIFs for rounded
corners. It should look identical in FF and IE, just as on the picture:
It also includes custom control file (PageMenu.cs). This is a control that actually renders BlogEngine pages as CSS unordered list and creates HTML block like one used in this example. To use it, simply drop it to the ~/App_Code/Controls and then in your theme use:
- <div id="navmenubox">
- <blog:PageMenu ID="PageMenu1" runat="Server" />
- </div>
Remember add JavaScript to the master page in your theme (copy it from HTML), otherwise sub-menus will never show up.
Or you can wait just a little bit more; I'm hoping to finish my theme over weekend or some day next week so you can grab the whole package.