Thread

My original css has attributes (padding) that I would like to have. Now that I have my menu as <pre><code>{mojo:site:page_list}/code] I no longer have the same padding. how do I add it within mojo?

Here is the original html that pulls the css.
<pre><code><div class=“menu”>
      <ul>
      <li>Home</li>
      <li>Products</li>
      <li>Services</li>
      <li> Contact Us</li>
      </ul>
    </div>/code]

Here is the css.
<pre><code>/* menu */ 
.menu { padding:1px 0 0 0; margin:0; width:600px; float:left; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left; }
.menu ul li { float:left; margin:0; padding:0; border:0; }
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:12px 9px; background:none; }
.menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left; }/code]

Aaron, thanks for the help. This still will not fix the padding issue. Here is the menu css.
The line with the padding is .menu ul li a span {padding:12px 9px; background:none;}

/* menu */ 
.menu { padding:1px 0 0 0; margin:0; width:600px; float:left; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left; }
.menu ul li { float:left; margin:0; padding:0; border:0; }
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:12px 9px; background:none; }
.menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left; }

Hi Tim,
You won’t be able to add any extra html into the menu when using the page_list tag (unless you use javascript). I’m not sure what you’re doing with the background images, but why not apply the padding directly to the <a> tag instead of the span?

Aaron

Thanks. I will try that…. good thought