[pcpro17]

Hello. I've been working on this most of the day, and the solution continues to elude me. If anyone has any ideas on what I'm doing wrong, I'd be greatly appreciative for some insight. Okay, here's what's happening...

I'm trying to make a horizontal menu for my site. This morning I got it all working and looking nice and pretty with basically a dummy page (a bunch of empty classified divisions to mimic the layout/color scheme). Then when I plugged the new menu module into my actual site it suddenly began ignoring all the padding, margin, width, height properties I'd specified. The only real change in the environment being I moved the inline CSS for the menu over to the actual CSS file (attached).

After working on it for several hours, I finally figured out that the margin and padding issues were related to inheritance (yuck!), so that's fixed. However, the width and height properties continue to be ignored. I'm currently using IE6. (I plan to test this out on some other browsers when I get home, but that's what I'm stuck with for now.) Can anyone see what I might be overlooking?

Here's a code snippet from the CSS file:

div.menu              {
  font                 : bold 12px arial, serif;
  margin               : 0px;
  padding              : 0px;
  }
div.menu ul          {
  list-style-type      : none;
  margin               : 0px 0px 5px 0px;
  padding              : 1px 0px 0px 0px;
  }
div.menu div.alignleft ul li { margin-right:5px; }
div.menu div.alignright ul li { margin-left:5px; }
div.menu ul li       {
  display              : inline;
  text-align           : center;
  width                : 100px;
  width                : expression(document.body.menu.li.width = "100px" );
  border-top           : 1px solid <?php echo $menu_border_color; ?>;
  border-right         : 3px solid <?php echo $menu_border_color; ?>;
  }
div.menu ul li a     {
  background-color     : <?php echo $menu_bg_color; ?>;
  vertical-align       : middle;
  margin               : 0px auto;
  padding              : 0px;
  width                : 100%;
  height               : 100%;
  }
div.menu ul li a:hover {
  background-color     : <?php echo $menu_bg_hover_color; ?>;
  text-decoration      : none;
  }

Here's also some compiled code from the page:

    <div class="menu">
<div class="alignleft">
    <ul>
      <li><a href="/">Home</a></li>
      <li class="page_item"><a href="http://www.correctnesscommentary.com/about/" title="About">About</a></li>
<li class="page_item current_page_item"><a href="http://www.correctnesscommentary.com/sitemap/" title="Site Map">Site Map</a></li>
<li class="page_item"><a href="http://www.correctnesscommentary.com/contact/" title="Contact Us">Contact Us</a></li>
      <li><a href="http://www.correctnesscommentary.com/wp/wp-login.php?action=register">Register</a></li>      <li><a href="http://www.correctnesscommentary.com/wp/wp-login.php">Login</a></li>
    </ul>
  </div>
  <div class="alignright">
    <ul>
      <li><a href="http://www.correctnesscommentary.com/feed/">Entries (RSS)</a></li>
      <li><a href="http://www.correctnesscommentary.com/comments/feed/">Comments (RSS)</a></li>
    </ul>
  </div></div> <!-- end 'menu' division -->

To see it in action go here:
http://www.correctnesscommentary.com...?cond=menutest

Any thoughts/suggestions would be greatly appreciated. Thanks!

[pcpro17]

bump

[pcpro17]

This issue has been resolved. Apparently it's not kosher to define width and height properties with CSS for inline HTML elements:

div.menu              {
  display              : block;
  margin               : 0px auto;
  margin-top           : 5px;
  margin-bottom        : 5px;
  padding              : 0px;
  width                : 800px;
  }
div.menu ul          {
  list-style-type      : none;
  margin               : 0px;
  padding              : 0px;
  }
div.menu ul li       {
  display              : inline-block;
  text-align           : center;
  font                 : bold 12px arial, serif;
  margin               : 0px;
  padding              : 0px;
  width                : 100px;
  border-top           : 1px solid <?php echo $menu_border_color; ?>;
  border-right         : 3px solid <?php echo $menu_border_color; ?>;
  }
div.menu div.alignleft ul li {
  margin-right         : 5px;
  float                : left;
  }
div.menu div.alignright ul li {
  margin-left          : 5px;
  float                : right;
  }
div.menu ul li a     {
  display              : block;
  background-color     : <?php echo $menu_bg_color; ?>;
  vertical-align       : middle;
  margin               : 0px auto;
  padding              : 8px 0px;
  width                : 100%;
  height               : 100%;
  }
div.menu ul li a:hover {
  background-color     : <?php echo $menu_bg_hover_color; ?>;
  text-decoration      : none;
  }

[yankees26an]

wow that code looks pretty neat

Mine is usually all over the place xD