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:

  1. <!--[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:

  1. <div id="navmenubox">
  2. <blog:PageMenu ID="PageMenu1" runat="Server" />
  3. </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.

Signature

Related posts

Add comment


 

  Country flag

biuquoteimg
Loading



<<  May 2008  >>
SuMoTuWeThFrSa
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567
Enhanced with Snapshots

Subscribe to Rtur.net