SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS List Help: Extra Space in IE

    I am making a menu using a list and IE keeps adding extra padding. I have tried searching the forum, but nothing I found seems to work...even the add a space between <a> </a>.

    <ul id="menu">
    <li class="mainmenu"><a href="#">Home</a></li>
    <li class="mainmenu"><a href="#">About</a></li>
    <li class="mainmenu"><a href="#">Shared Hosting</a></li>
    <li class="mainmenu"><a href="#">Reseller Hosting</a></li>
    <li class="mainmenu"><a href="#">Contact</a></li>
    </ul>

    CSS:

    #menu {
    margin: 0px;
    padding: 0px;
    width: 169px;
    height: 19px;
    list-style-type: none;
    }
    #menu li {
    margin: 0px;
    padding: 0px;
    width: 169px;
    height: 19px;
    list-style-type: none;
    }
    .mainmenu A {
    width: 149px;
    height: 18px;
    background-image: url(images/menu.gif);
    font-family: Verdana;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    padding: 3px 0px 0px 20px;
    overflow: hidden;
    display: block;
    }
    .mainmenu A:hover {
    width: 149px;
    height: 18px;
    background-image: url(images/menu_over.gif);
    font-family: Verdana;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    padding: 3px 0px 0px 20px;
    overflow: hidden;
    display: block;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try something like this instead:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    ul#menu {
    margin: 0px;
    padding: 0px;
    width: 169px;
    list-style-type: none;
    }
    #menu li {
    margin: 0px;
    padding: 0px;
    width: 169px;
    height: 21px;
    line-height:21px;
    list-style-type: none;
    }
    ul#menu li a {
    width: 149px;
    height: 21px;
    background-image: url(images/menu.gif);
    font-family: Verdana;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    padding: 0px 0px 0px 20px;
    overflow: hidden;
    display: block;
    }
    * html#menu li a{width:169px;w\idth:149px}/* box model hack for ie5/5.5 and ie6 assuming standards mode */
    ul#menu li a:hover {
    background-image:url(images/menu_over.gif);
    } 
     
     
    </style>
    </head>
    <body>
    <ul id="menu">
    <li><a href="#">Home </a></li>
    <li><a href="#">About </a></li>
    <li><a href="#">Shared Hosting </a></li>
    <li><a href="#">Reseller Hosting </a></li>
    <li><a href="#">Contact </a></li>
    </ul>
    </body>
    </html>
    You had the menu at 19px high but its actually about 105px high lol. I took the top and bottom padding out and used height and line-height instead. This should align the text centrally on each line without the need for padding. I also shortened the unnecessary declarations and put in the box model hack for ie5/5.5.

    Hope that helps.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Athens
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -- I'm having the exact same problem with my menu (IE6 PC only) but don't see any code in your response. Could you repost if it's missing? Thanks.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    but don't see any code in your response.
    I can see a whole code block there or are you asking for something specific

    The usual problems with ie and gaps can be down to the whitespace in the code between the list items and one solution involves closing the whitespace and having the li elements back to back e.g. <li>stuff</li><li>more stuff</li> etc...

    Another solution is to add a space before the closing anchor in lists like the following.

    Code:
    <ul id="menu">
    <li><a href="#">Home </a></li>
    <li><a href="#">About </a></li>
    <li><a href="#">Shared Hosting </a></li>
    <li><a href="#">Reseller Hosting </a></li>
    <li><a href="#">Contact </a></li>
    </ul>
    Alternatively use a method as in my example above that does not produce a gap because top and bottom padding have not been set and line-height and height have been used to keep things consistent.

    However there are times when none of the above work and you may have to try other things as well (such as floats etc).

    If you want to post your code then I'll take a look.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Athens
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul - I tried adding the extra whitespace before the </a> and eliminating all whitespace between the </li><li> 's, but to no avail. Unfortunately I am not able to see the block of code you initially posted which must be my computer. However, I will accept your offer to take a look at my code...thanks a lot! (BTW: attached is a screenshot comparing the difference)

    CODE (whitespace added/removed as suggested):

    <div id="navcontainer">
    <ul id="navlist">
    <h3 class="navheader">About the Project</h3>
    <li><a href="intro.html" id="intronav">Introduction </a></li><li><a href="mission.html" id="missionnav">Mission </a></li><li><a href="faculty.html" id="facnav">Faculty </a></li></ul>
    </div>

    CSS (pardon...I'm a newbie):

    /* Menu section title text */

    .navheader {
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
    color: #F9D4A8;
    font-weight: bold;
    font-size: 14px;
    padding-left: 12px;
    margin-bottom: 4px;
    margin-top: 0;
    }

    /* Menu controls */

    #navcontainer {
    width: 190px;
    background-color: #471403;
    }

    #navcontainer ul
    {
    margin-left: 0;
    padding-left: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }

    #navcontainer li
    {
    list-style-type: none;
    background: url(images/bullet.gif) no-repeat top left;
    padding-left: 10px;
    }

    #navcontainer a
    {
    display: block;
    padding-left: 4px;
    width: 100%;
    background-color: #471403;
    }

    #navcontainer a:link, #navlist a:visited
    {
    color: #EEE;
    text-decoration: none;
    }

    #navcontainer a:hover
    {
    background-color: #9A3D1F;
    color: #ffffcc;


    /* Highlight active page.*/

    }
    body#intro a#intronav,
    body#mission a#missionnav,
    body#faculty a#facnav
    {
    color:#ffffcc;
    font-weight: bold;
    background:#791900;
    display: block;
    }
    Attached Images Attached Images

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try this code instead and see if it does what you want. I've just specified the line-height to make the browsers consistent.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .navheader {
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
    color: #F9D4A8;
    font-weight: bold;
    font-size: 14px;
    padding-left: 12px;
    margin-bottom: 4px;
    margin-top: 0; 
    }
    /* Menu controls */
    #navcontainer { 
    width: 190px;
    background-color: #471403;
    }
    #navcontainer ul {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    #navcontainer li {
    list-style-type: none;
    background: url(images/bullet.gif) no-repeat top left; 
    padding:0; 
    margin:0;
    line-height:16px;
    } 
    #navcontainer a {
    display: block;
    padding:0 0 0 20px; 
    overflow:hidden;
    background-color: #471403;
    }
    /* commented backslash mac hiding hack  \*/ 
    #navcontainer a {height:1%;}
    /* end hack */ 
    #navcontainer a:link, #navlist a:visited {
    color: #EEE;
    text-decoration: none;
    }
    #navcontainer a:hover {
    background-color: #9A3D1F;
    color: #ffffcc;
    /* Highlight active page.*/
    }
    body#intro a#intronav,
    body#mission a#missionnav,
    body#faculty a#facnav {
    color:#ffffcc;
    font-weight: bold;
    background:#791900;
    display: block;
    }
    </style>
    </head>
    <body>
    <div id="navcontainer"> 
      <ul id="navlist">
    	<h3 class="navheader">About the Project</h3>
    	<li><a href="intro.html" id="intronav">Introduction </a></li>
    	<li><a href="mission.html" id="missionnav">Mission </a></li>
    	<li><a href="faculty.html" id="facnav">Faculty </a></li>
      </ul>
    </div>
    </body>
    </html>
    Just in case you can't read that code block (although I can't think why) then here's the code again.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .navheader {
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
    color: #F9D4A8;
    font-weight: bold;
    font-size: 14px;
    padding-left: 12px;
    margin-bottom: 4px;
    margin-top: 0;
    }
    /* Menu controls */
    #navcontainer {
    width: 190px;
    background-color: #471403;
    }
    #navcontainer ul {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    #navcontainer li {
    list-style-type: none;
    background: url(images/bullet.gif) no-repeat top left;
    padding:0;
    margin:0;
    line-height:16px;
    }
    #navcontainer a {
    display: block;
    padding:0 0 0 20px;
    overflow:hidden;
    background-color: #471403;
    }
    /* commented backslash mac hiding hack \*/
    #navcontainer a {height:1%;}
    /* end hack */
    #navcontainer a:link, #navlist a:visited {
    color: #EEE;
    text-decoration: none;
    }
    #navcontainer a:hover {
    background-color: #9A3D1F;
    color: #ffffcc;
    /* Highlight active page.*/
    }
    body#intro a#intronav,
    body#mission a#missionnav,
    body#faculty a#facnav {
    color:#ffffcc;
    font-weight: bold;
    background:#791900;
    display: block;
    }
    </style>
    </head>
    <body>
    <div id="navcontainer">
    <ul id="navlist">
    <h3 class="navheader">About the Project</h3>
    <li><a href="intro.html" id="intronav">Introduction </a></li>
    <li><a href="mission.html" id="missionnav">Mission </a></li>
    <li><a href="faculty.html" id="facnav">Faculty </a></li>
    </ul>
    </div>
    </body>
    </html>

    Hope thats what you wanted.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Athens
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried the new code and it does eliminate the spacing problem in IE6 PC. Unfortunately it also eliminates the background image bullets, which maybe I can live without (but the bullets help distinguish a double-line link). It also eliminates ALL of the links in Mac IE5, leaving only the non-linked text (this happens both with and without the hack). Any other suggestions are welcomed!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Sorry about the bullets but I didn't have links to your images so I didn't notice. (This is why a link to the page is always best )

    The problem is simply that the background colour of the anchor is hiding the image. You can do a few things but prehaps the easiest is just to take the background colour out of the anchor and put it in the list.

    #navcontainer li {
    list-style-type: none;
    background:#471403 url(images/bullet.gif) no-repeat top left;
    padding:0;
    margin:0;
    line-height:16px;
    }
    #navcontainer a {
    display: block;
    padding:0 0 0 20px;
    overflow:hidden;
    }

    I'll have to get back to you with ie mac as I'll have to copy everything across to test.

    Paul

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Athens
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Greetings,

    You were dead on with your last diagnosis! It was the background color and now everything works.

    I determined what the problem was for the Mac...it's "overflow:hidden"
    For some reason that hides all of the links, but when I remove it all is well.

    Thanks so much for your help!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    lol -You beat me to it - I just realised that also

    Glad you fixed it

    Paul

  11. #11
    SitePoint Member
    Join Date
    Nov 2003
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the help Paul O'B!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •