Theme CSS and admin bar list item conflicts

[greenshady]

Currently, if a theme adds CSS to basic ul or li elements, it might overwrite the admin bar. I can see this being a big issue with themes.

If looking at the attached screenshot, you will see a blue bullet and extra padding. This is caused by this CSS in a theme's style.css file:

ul li {
	padding-left: 10px;
	background: url(images/bullet.png) no-repeat 0 11px;
	}

This only seems to mess with the top level of the menu.

I imagine issues like this will be fairly common. We just need to make the CSS for the admin bar more specific so that general CSS code like this doesn't cause conflicts.

[duck_]

The problem being that the admin bar styles don't specifically set these values to 0/none, so even when the #wpadminbar ID is matched as the most important style for the bar it doesn't actually override. Patch attached worked in the following test placed at the bottom of Twenty Ten:

ul li {
	margin-top: 5px;
	padding-left: 10px;
	list-style: disc outside none;
	}

Probably want to check there aren't any other styles that need to be overridden for #wpadminbar

[nacin]

(In [16811]) Better reset for ul and li in the admin bar. props duck_, fixes #15727.

[nacin]

Probably want to check there aren't any other styles that need to be overridden for #wpadminbar

Would be good to do a sweep.

[ocean90]

Replying to nacin:

Probably want to check there aren't any other styles that need to be overridden for #wpadminbar

Would be good to do a sweep.

Done with [16862] & [16875] and my patch on #15611.