Solved: Help! CSS Width & Height Properties Getting Ignored!

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

pcpro17

Thread Starter
Joined
Oct 9, 2006
Messages
469
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:

Code:
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:
Code:
    <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/sitemap/?cond=menutest

Any thoughts/suggestions would be greatly appreciated. Thanks!
 

Attachments

pcpro17

Thread Starter
Joined
Oct 9, 2006
Messages
469
This issue has been resolved. Apparently it's not kosher to define width and height properties with CSS for inline HTML elements:
Code:
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;
  }
:D
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top