Web Analytics Made Easy -
StatCounter li block element spacing - CodingForum

Announcement

Collapse
No announcement yet.

li block element spacing

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • li block element spacing

    I have created a navigation using css and unordered lists. I want the whole li element to be a link (not just the text) and I'm running into spacing issues with IE - go figure!

    It looks exactly the way I want in FF but IE is bugging out because I'm not setting widths. If I set the width to 100% (the supposed default) it extends beyond my viewable area. Each element adds a space under the li and I've tried all sorts of combinations of padding and margins. I tried moving all of the unlordered lists onto one line and it helps but its not practical for editing purposes.

    <li>one</li><li>two</li>

    rather than

    <li>one</li>
    <li>two</li>

    I realize there is some extra code here and there and that's a result of trial and error testing... for example: border:0px dashed #ffffff

    http://tmarkart-sitemgr.nandomedia.c...ite/index.html

    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #2
    To get rid of the space below your list items reduce the line height. Look at the left menu on my main page. I have used list items in it and you'll find no unreasonable space below them. That same thing stumped me too at first.

    I have also made left margin and left padding zero so the list items will slide to the left instead of being indented like they normally would be.

    http://dwight.tendirect.com/
    Master Newbie http://dwightstegall.com/

    Comment


    • #3
      In my struggles I tried adding line-height:1em; but it doesn't give me the results I'm looking for.

      The only thing I've been able to do that has an effect is when I set the width of the block element to a set px width. I really want the whole block clickable but when I set the width to 100% it extends beyond the viewable space.

      The whole nav sits inside a div with the id=cssnew

      CSS
      Code:
          #cssnew         {width:90%; margin:0px auto; border:0px dashed #ffffff;}
          #cssnew ul, li  {list-style-type:none; padding:0px 0px 0px 0px; margin:0px 0px 1px 0px;}
          #cssnew a       {font-family:Verdana,Arial,Helvetica,sans-serif; color:#bbbbbb; text-decoration:none;}
          #cssnew a:hover {color:#2F6D92;}     
      
          #maincat {width:165px; background:url(../images/nav_head_bkgd.gif) repeat-x !important;}
          #maincat a {width:155px; display:block; font-size:11px; font-weight:bold; padding:2px 5px; color:#244E67; border:0px dashed #ffffff;}
          #maincat a:hover {color:#244E67;}
          
          #submenu li a {width:145px; display:block; background-color:#D7D7D7; padding:2px 10px; color:#244E67; border:0px dashed #ffffff;}
          #submenu li a:hover {background-color:#E8E8E8; color:#30B65B;}

      HTML
      Code:
      <div id="cssnew">
          <table width="100%" align="center">
          <tr>
              <td width="50%"><a href="#" title="Show All Managers" OnClick="MM_showHideLayers('layer1a','','hide'); MM_showHideLayers('layer1b','','show'); MM_showHideLayers('layer1','','show'); MM_showHideLayers('layer2a','','hide'); MM_showHideLayers('layer2b','','show'); MM_showHideLayers('layer2','','show'); MM_showHideLayers('layer3a','','hide'); MM_showHideLayers('layer3b','','show'); MM_showHideLayers('layer3','','show')">(+)</a></td>
              <td width="50%" align="right"><a href="#" title="Hide All Managers" OnClick="MM_showHideLayers('layer1a','','show'); MM_showHideLayers('layer1b','','hide'); MM_showHideLayers('layer1','','hide'); MM_showHideLayers('layer2a','','show'); MM_showHideLayers('layer2b','','hide'); MM_showHideLayers('layer2','','hide'); MM_showHideLayers('layer3a','','show'); MM_showHideLayers('layer3b','','hide'); MM_showHideLayers('layer3','','hide')">(-)</a></td>
          </tr>
          </table> 
          <!--// Account Manager //-->
          <div id="layer1a" style="display:none;">
              <ul id="maincat">
                  <li><a href="#" OnClick="MM_showHideLayers('layer1a','','hide'); MM_showHideLayers('layer1b','','show'); MM_showHideLayers('layer1','','show')">Account Manager</a></li>
              </ul>
          </div>
          <div id="layer1b">
              <ul id="maincat">
                  <li><a href="#" OnClick="MM_showHideLayers('layer1a','','show'); MM_showHideLayers('layer1b','','hide'); MM_showHideLayers('layer1','','hide')">Account Manager</a></li>
              </ul>
          </div>
          <div id="layer1">
              <ul id="submenu">
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('account_add.html|main||');">Add Account</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('account_search.html|main||');">Search Accounts</a></li>
              </ul>
          </div>
          
          
          
          
          
          
          
          
          
          <!--// Report Manager //-->
          <div id="layer2a" style="display:none;">
              <ul id="maincat">
                  <li><a href="#" OnClick="MM_showHideLayers('layer2a','','hide'); MM_showHideLayers('layer2b','','show'); MM_showHideLayers('layer2','','show')">Report Manager</a></li>
              </ul>
          </div>
          <div id="layer2b">
              <ul id="maincat">
                  <li><a href="#" OnClick="MM_showHideLayers('layer2a','','show'); MM_showHideLayers('layer2b','','hide'); MM_showHideLayers('layer2','','hide')">Report Manager</a></li>
              </ul>
          </div>
          <div id="layer2">
              <ul id="submenu">
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Account Overview</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Manage Account Reports</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Add Account Report</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Add Log Report</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Manage Log Reports</a></li>
              </ul>
          </div>
          <!--// Publication Manager //-->
          <div id="layer3a" style="display:none;">
              <ul id="maincat">
                  <li><a href="#" OnClick=" MM_showHideLayers('layer3a','','hide'); MM_showHideLayers('layer3b','','show'); MM_showHideLayers('layer3','','show'); MM_showHideLayers('layer4a','','show')">Publication Manager</a></li>
              </ul>
          </div>
          <div id="layer3b">
              <ul id="maincat">
                  <li><a href="#" OnClick="MM_showHideLayers('layer3a','','show'); MM_showHideLayers('layer3b','','hide'); MM_showHideLayers('layer3','','hide')">Publication Manager</a></li>
              </ul>
          </div>
          <div id="layer3">
              <ul id="submenu">
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Custom Fields</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Account Fields</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Segments</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Cookies</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Domains</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Email Messages</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Error Messages</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Preferences</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Restricted Urls</a></li>
                  <li><a href="#" onMouseOver="window.status='';return true;" onMouseOut="window.status=''" onClick="LinkHandler('#');">Templates</a></li>
              </ul>    
          </div>    
      </div>
      When I add set pixel widths I get it close in both browsers but IE still adds extra spacing between the li tags. I can't figure out why the pixel widths are different just to get them to display the same...

      check out the extra spacing in IE... why cant I leave the width out? Shouldn't it default to 100%?

      -WebMark Art
      Programming is 80% thinking and 20% spelling

      Comment


      • #4
        First, a couple notes on your CSS: you should use shorthand more when you can, and there is no need to append a unit to a 0 value. For instance:

        #id {margin: 0}

        For details on the various shorthand methods of writing CSS that are available: http://www.webcredible.co.uk/user-fr...operties.shtml



        Now, to fix that issue, do this for IE:

        #container li {
        float: left;
        width: 100%;
        /* then whatever else is specific to your implementation */
        }
        Last edited by ]|V|[agnus; Aug 1, 2005, 05:47 PM.

        Opposite of Sequitur

        Comment


        • #5
          As I said in the original post

          I realize there is some extra code here and there and that's a result of trial and error testing...
          I don't want shorthand code right now because it is easier for me to change things back and forth for testing.

          Apparently either my code has changed since the last time you took a look or it doesn't do what I want it to because it actually makes it worse. Like I said, any time I set the width to 100% the block elements extend well beyond the viewable area.
          -WebMark Art
          Programming is 80% thinking and 20% spelling

          Comment


          • #6
            Originally posted by webmarkart
            As I said in the original post
            Right, and then you followed up with an example of SHORTHAND.

            *sigh*

            Anyway... it's hard to get a clear picture of what's going on because of the frameset (eww) and plethora of inline styles and scripting (eww and eww again)... but it seems like your containing blocks are not properly set to the right width then, because 100% = 100%... ul#submenu, for instance, does not have a width set. therefore it will be 100% of its containing block like every block element is by default. so, instead of setting 145px on the li's, set it on the container, and try the float trick again...

            Opposite of Sequitur

            Comment


            • #7
              This is a tacky solution but it works. After each element, begin a comment.
              Code:
              <ul><!--
              --><li><a href="foo">bar</a></li><!--
              --><li><a href="foo">bar</a></li><!--
              --><li><a href="foo">bar</a></li><!--
              --><li><a href="foo">bar</a></li><!--
              --><li><a href="foo">bar</a></li><!--
              --><li><a href="foo">bar</a></li><!--
              --></ul>
              CATdude about IE6: "All your box-model are belong to us"

              Comment


              • #8
                Right, and then you followed up with an example of SHORTHAND.

                *sigh*

                So quick to speculate! And incorrectly at that... *sigh*

                I realize there is some extra code here and there and that's a result of trial and error testing...
                Some is defined as part of a whole. I expanded shorthand code as I needed to for testing purposes. I'm all for constructive critisism but whether the code is shorthand or not has NO effect on why the navigation isn't spacing correctly. I appreciate your comments and suggestions and I will try all to use them.
                -WebMark Art
                Programming is 80% thinking and 20% spelling

                Comment


                • #9
                  I searched csscreator.com forum and found a compromise solution:

                  http://www.csscreator.com/css-forum/...ca8ae0e7bfb752
                  ...setting the li elements to display: inline; and having the <a> tags set to display: block;...

                  /* --------------------- CSS Navigation Classes --------------------- */
                  #cssnew {width:90%; margin:0px auto;}
                  #cssnew ul, li {list-style-type:none; padding:0px; margin:0px 0px 1px 0px;}
                  #cssnew a {color:#bbb;}
                  #cssnew a:hover {color:#2F6D92;}

                  #maincat {background:url(../images/nav_head_bkgd.gif) repeat-x !important;}
                  #maincat li {display:inline;}
                  #maincat a {display:block; font-size:11px; font-weight:bold; padding:2px 5px; color:#244E67;}
                  #maincat a:hover {color:#244E67;}

                  #submenu li {display:inline;}
                  #submenu li a {display:block; background-color:#D7D7D7; padding:2px 10px; color:#244E67; margin:0px 0px 1px 0px;}
                  #submenu li a:hover {background-color:#E8E8E8; color:#30B65B;}
                  Last edited by webmarkart; Aug 3, 2005, 10:47 AM. Reason: updating code
                  -WebMark Art
                  Programming is 80% thinking and 20% spelling

                  Comment

                  Working...
                  X