Navigation Region CSS problem

Question

workspace : RGWORK
user : tester
pass: test12
apllication name :TESTER 01
page : 2
How do I fix the css of my navigation region? their are lines that are extending in the bottom of the region.. How will I solve that?

Answer 1

The Simple Red (theme 1) CSS includes the following rule:
.navigation-region div {
    overflow: hidden;
    width: 183px;
    padding: 0 0 4px;
    background: url(../images/bg-navigation-b.gif) no-repeat 0 100%;
}The <tt>.navigation-region div</tt> descendant selector causes this rule to be applied to all <tt>div</tt> elements that are contained within elements with a class of <tt>.navigation-region</tt>. As it seems unfeasible to expect apps to never have <tt>div</tt>s in a navigation region&mdash;as you've discovered&mdash;I'd say this is definitely a bug. We certainly shouldn't get these kind of artefacts from a combination of built-in components and templates.
The CSS selector for this rule should be more specific. There are a number of different possible ways to do this. Combining child and pseudo-class<tt>:first-child</tt> pseudo-class is one of them, and avoids having to make any changes to the template HTML.
The best way to fix this is to copy the theme, modify the errant CSS, and republish the theme in the repository. (In some cases, such as in a hosted environment, this might not be possible.)
As a simple fix in this example, I created a small custom style sheet and a new page template referencing it:
.navigation-region div {
  padding: 0;
  background: none;
.navigation-region > div:first-child {
  overflow: hidden;
  width: 183px;
  padding: 0 0 4px;
  background: url(/i/themes/theme_1/images/bg-navigation-b.gif) no-repeat 0 100%;
}The first rule resets the problem properties using the same descendant selector as the theme CSS; the second is the "correct" rule that only affects the first child <tt>div</tt> in <tt>.navigation-region</tt> elements.
There's a slight problem with this fix as the initial reset rule will affect all <tt>div</tt>s in <tt>.navigation-region</tt> elements: it's necessary to ensure that any rules setting <tt>padding</tt> or <tt>background</tt> on other <tt>div</tt>s need to follow this one in the cascade or be more specific than this one, hence creating a copy of the theme is the best option.