1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

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

Discussion in 'Web Design & Development' started by pcpro17, Jul 9, 2007.

Thread Status:
Not open for further replies.
Advertisement
  1. pcpro17

    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!
     

    Attached Files:

  2. pcpro17

    pcpro17 Thread Starter

    Joined:
    Oct 9, 2006
    Messages:
    469
  3. pcpro17

    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
     
  4. yankees26an

    yankees26an

    Joined:
    Mar 27, 2007
    Messages:
    46
    wow that code looks pretty neat :)

    Mine is usually all over the place xD
     
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 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/593749

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice