CSS selector not allowed when using middleware UI

Question

Basically, I am building a horizontal navigation bar. I have the following markup:

<ui:style src="../common.css" type="client.resources.HomeResources.Style"> @external gwt-Anchor; .gwt-Anchor { text-decoration: none; } </ui:style> <g:HTMLPanel styleName="navbar"> <ul> <li><g:Anchor ></g:Anchor> |</li> <li><g:Anchor ></g:Anchor> |</li> <li><g:Anchor ></g:Anchor> |</li> <li><g:Anchor ></g:Anchor> |</li> <li><g:Anchor ></g:Anchor> |</li> <li><g:Anchor ></g:Anchor> |</li> <li><g:Anchor ></g:Anchor></li> </ul> 

common.css has the following rules:

 ul { margin: 0; padding: 0; text-align: left; font-weight: bold; line-height: 25px; } ul li { display: inline; text-align: right; } ul li a { color: #0077C0; font-size: 12px; margin-right: 15px; padding: 4px 0 4px 5px; text-decoration: none; } ul li a:HOVER { color: #F0721C; } 

When using the rules defined above, everything works fine. The problem is that I have ul elements in other parts of the page, so I added div.navbar before each rule as follows:

 div.navbar ul{} div.navbar ul li{} etc... 

But these rules do not apply to ul elements inside the middleware UI template. What is wrong with my code?

Here is the generated HTML (usually in one line):

 <div class="navbar"><ul> <li><a class="gwt-Anchor">Item 1</a> |</li> <li><a class="gwt-Anchor">Item 2</a> |</li> <li><a class="gwt-Anchor">Item 3</a></li> </ul></div> 

---

RESOLVED

styleName="navbar" must be styleName="{style.navbar}"

Answer 1

I only ask because you did not specify this in your code example: you checked twice, is there a <div class="navbar"> that wraps ul ?

Also, if <g:HTMLPanel styleName="navbar"> generates a div, it does not close in the code you provided. Maybe you need </g:HTMLPanel ?