[Pro] Blogger CSS menus with rounded corners and shadows

Hi there

Hope you all had a Happy New Year and a great Christmas.

I’m working on a new site and have decided to incorporate two pieces of code previously posted here to enhance the CSS menus.

This is the markup code I have inserted before /head

	<style type="text/css">
		.fwNavItem a {
			-webkit-transition: all 0.5s;
			-moz-transition: all 0.5s;
			-o-transition: all 0.5s;
			-ms-transition: all 0.5s;
			transition: all 0.5s;
		}

<!--
.sub {
-webkit-box-shadow: #505050 3px 3px 16px;
-moz-box-shadow: #505050 3px 3px 16px;
box-shadow: #505050 3px 3px 16px;
}
ul.sub, ul.sub li.fwLastChild, ul.sub li.fwLastChild a {
	-webkit-border-bottom-right-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	-moz-border-radius-bottomright: 7px;
	-moz-border-radius-bottomleft: 7px;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
      background: #303030;
}
-->
</style>

You can see it working on the unfinished site at http://www.ltbuses.com/index2.php

However when I use the same code in the Blogger template it complains that:

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The string “–” is not permitted within comments.

I’d really appreciate it if someone could let me know how I should change this markup so Blogger will be happy with it.

Many thanks

Gordon


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Gordon,

try the following:

<style type="text/css">
.fwNavItem a {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.sub {
    -webkit-box-shadow: #505050 3px 3px 16px;
    -moz-box-shadow: #505050 3px 3px 16px;
box-shadow: #505050 3px 3px 16px;
}
ul.sub, ul.sub li.fwLastChild, ul.sub li.fwLastChild a {
    -webkit-border-bottom-right-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    background: #303030;
}
</style>

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Joe

Brilliant - all working perfectly, many thanks.

I know the code is easily edited but a “CSS Menu Extras” page action where you could change all the settings would be great if some action-eer was able to work their magic.

All the best

Gordon
http://www.gordonlow.net/

On 5 Jan 2011, at 12:08pm, Joe Billings wrote:

Hi Gordon,

try the following:

<style type="text/css">
.fwNavItem a {
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   -ms-transition: all 0.5s;
   transition: all 0.5s;
}
.sub {
   -webkit-box-shadow: #505050 3px 3px 16px;
   -moz-box-shadow: #505050 3px 3px 16px;
box-shadow: #505050 3px 3px 16px;
}
ul.sub, ul.sub li.fwLastChild, ul.sub li.fwLastChild a {
   -webkit-border-bottom-right-radius: 7px;
   -webkit-border-bottom-left-radius: 7px;
   -moz-border-radius-bottomright: 7px;
   -moz-border-radius-bottomleft: 7px;
   border-bottom-right-radius: 7px;
   border-bottom-left-radius: 7px;
   background: #303030;
}
</style>

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options