I thought this was pretty odd, so I'm checking to see if anyone else has had a similar issue. I created a new theme for my site by coping the tutorial theme. In the layout.css file, I added the YUI Reset CSS code. Just something I do automatically.
/* Global Resetting (from Yahoo) */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
/*End Reset*/
I put it in layout.css because it gets loaded first.
In the typography.css file, I started adding my text styles.
/* Web Page Text Styles */
body {
background:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.95em;
}
h1 {
font-size:2.5em;
font-weight:bold;
color:#224C6A;
margin-bottom:10px;
}
h2 {
font-size:1.75em;
font-weight:bold;
color:#442571;
margin-bottom:7px;
}
h3 {
font-size:1.5em;
font-weight:bold;
font-style:italic;
margin-bottom:5px;
}
h4 {
font-size:1.25em;
font-weight:normal;
margin-bottom:5px;
}
h5 {
font-size:1em;
font-weight:normal;
margin-bottom:5px;
}
h6 {
font-size:0.85em;
font-weight:normal;
margin-bottom:5px;
}
p {
margin-bottom:20px;
line-height:1.5em;
}
ul, ol {
margin-bottom:20px;
}
ul li {
list-style:disc;
margin-left:35px;
}
ol li {
list-style:decimal;
margin-left:40px;
}
blockquote {
margin-left:20px;
}
When I added the styles for ul, ol, ul li and ol li, I noticed that the tree in the Admin panel suddenly gained a lot of margin on the left side, to the point were the text of the page names was getting cut off on the right side of the box.
I tracked down the issue with Firebug and ended up adding the following code to the cms/css/cms_left.css file.
/* These are styles I added to force the site tree layout to work in the admin panel */
ul li.Root {
margin:0;
}
ul ul li.Page {
margin:0;
}
ul ul li.ErrorPage {
margin:0;
}
ul ul li.BlogHolder {
margin:0;
}
ul ul ul li.BlogEntry {
margin:0;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
That works for the Site Content tab. The others still show a large margin at the second level of the tree, but the impact isn't as bad, so I'm just going to leave it.
My question is, why would defining the style for a generic tag for a theme have an effect on the tree in the admin panel?
Thanks in advance for any insight you can provide.