Page 1 of 1

Clear CSS

Posted: Tue Dec 18, 2007 9:30 pm
by alex.barylski
I have a menu define din my application it uses <ul> and <li>

Unfortunately it's a horizontal menu and I needed to float the elements..., the CSS looks like:

Code: Select all

#menu ul {

}

$menu li {
  float: right
  ...
}
Now I'm using just the elements for another tree like control...and it looks like the <li> elements are inheriting what was set for the menu items...although none of the styling is being applied, such as colors, etc...just the float and inline type properties seem to be applied...

I've tried setting each <li> with an inline style="float: clear"

But that didn't seem to do the trick.. :(

Should this be happening? I didn't apply any styles to the native <li> element but as I've shown above...

Posted: Tue Dec 18, 2007 9:39 pm
by feyd
$menu…

not… #menu?

Posted: Tue Dec 18, 2007 10:03 pm
by alex.barylski
That was just a typo... :oops:

My bad...problem still persists... :(

Posted: Tue Dec 18, 2007 10:25 pm
by Kieran Huggins
they shouldn't be inheriting the same properties, just like you shouldn't have two elements with the same ID 8)

Was that it?

Posted: Tue Dec 18, 2007 10:40 pm
by alex.barylski
Kieran Huggins wrote:they shouldn't be inheriting the same properties, just like you shouldn't have two elements with the same ID 8)

Was that it?
Is that whats going?

I didn't think it was assigning an element the same ID...I thought that was how selectors worked???

Code: Select all

#menu li {
  /* Specify styles which are specific to ANY <li> element inside any element which has a *menu* as an ID */
}

#menu a {
  /* Styles for any <a> which is inside #menu */
}
Thats causing a duplicate ID? I thought that was only the case inside the HTML when I used the same ID twice?

Posted: Wed Dec 19, 2007 12:54 am
by matthijs
You are correct. You should have a single instance of an ID in the HTML. You can have multiple rules for the same ID in the CSS.

I'd have to see some more code to understand the problem.

In general, some things are inherited, some things not. If you want to "overrule" floats, set an element to:

Code: Select all

#menu li { float:none; }