CSS List Help: Extra Space in IE

**swishstudios** · Oct 3, 2004 17:03

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;
}

**Paul O'B** · Oct 4, 2004 08:05

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

**krycielo** · Oct 4, 2004 08:35

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.

**Paul O'B** · Oct 4, 2004 08:56

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

**krycielo** · Oct 4, 2004 09:14

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;
}

**Paul O'B** · Oct 4, 2004 09:49

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

**krycielo** · Oct 4, 2004 10:08

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!

**Paul O'B** · Oct 4, 2004 10:30

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

**krycielo** · Oct 4, 2004 10:42

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!

**Paul O'B** · Oct 4, 2004 10:52

lol -You beat me to it - I just realised that also

Glad you fixed it

Paul

**swishstudios** · Oct 4, 2004 14:56

Thanks again for the help Paul O'B!

User Tag List

Thread: CSS List Help: Extra Space in IE

Thread Tools

Display

CSS List Help: Extra Space in IE

Bookmarks

Bookmarks

Posting Permissions