I'm getting an extra space at the bottom of my nav list in IE 6.0. I started with the list-o-matic code and went from there. I'm attaching a screen shot so you can see what I'm seeing. Any suggestions are appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#center{
width: 100%;
height: 100%;
text-align: center;
background-color: #A4C7D2;
}
#box {
width: 700px;
height: 100%;
border-right: 5px solid #000000;
border-left: 5px solid #000000;
background-color: #FFFFFF;
}
#content {
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
margin-top: 20px;
text-align: left;
background-color: #F5FAFA;
}
#flash {
border-bottom: 5px solid #000000;
z-index: 0;
}
#navcontainer {
width: 180px;
border: 2px solid #369;
}
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#navcontainer a
{
display: block;
width: 100%;
padding: 6px;
}
#navcontainer a:link, #navlist a:visited
{
color: #000;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="center">
<div id="box">
<div id="content">
<div id="flash">
<object classid="clsid
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700" height="100">
<param name="movie" value="top2.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"top2.swf" width="700" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="opaque"></embed></object>
</div>
<table width="700" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="192" valign="top"><div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Strategy</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Human Resources</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Risk Assessment</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Budgets & Forecasts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Performance Reporting</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Time Reporting & Projects</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Feedback</a></li>
</ul>
</div></td>
<td width="484"><p>asdfasdf</p>
<p>asd</p>
<p>f</p>
<p>as</p>
<p>df</p>
<p>asdf</p>
<p> </p>
<p>asdf</p>
<p> </p>
<p>asdf</p></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>So what???
It does not look out of place (actually it looks pretty nice) and IE users would never know that it "should not" be there....I want it be tight on the bottom like it is on the top. It's more of a personal knowledge thing at this point. I just want to know if it can be fixed or is this an IE rendering bug.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#center{
width: 100%;
height: 100%;
text-align: center;
background-color: #A4C7D2;
}
#box {
width: 700px;
height: 100%;
border-right: 5px solid #000000;
border-left: 5px solid #000000;
background-color: #FFFFFF;
}
#content {
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
margin-top: 20px;
text-align: left;
background-color: #F5FAFA;
}
#flash {
border-bottom: 5px solid #000000;
z-index: 0;
}
#navcontainer {
width: 180px;
border: 2px solid #369;
}
#navcontainer ul
{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: -1px;
padding: 0px;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#navcontainer a
{
display: block;
width: 100%;
padding-bottom: 6px;
padding-top: 6px;
padding-left: 2px; /* Cannot exceed border width */
}
#navcontainer a:link, #navlist a:visited
{
color: #000;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="center">
<div id="box">
<div id="content">
<div id="flash">
</div>
<table width="700" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="192" valign="top"><div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Strategy</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Human Resources</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Risk Assessment</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Budgets & Forecasts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Performance Reporting</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Time Reporting & Projects</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Feedback</a></li>
</ul>
</div></td>
<td width="484"><p>asdfasdf</p>
<p>asd</p>
<p>f</p>
<p>as</p>
<p>df</p>
<p>asdf</p>
<p> </p>
<p>asdf</p>
<p> </p>
<p>asdf</p></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Edit: didn't see anyone had posted a reply to this thread before I posted mine.
Thanks Jona that worked. I didn't know that the padding cannot exceed the border width. Is that an IE only thing?Originally posted by tomwoj
Thanks Jona that worked. I didn't know that the padding cannot exceed the border width. Is that an IE only thing?
Padding can exceed border-width, but if it does, since the width of the anchor is set to 100%, adding left padding more than the width of the border will make the anchor exceed the width of its containing element, in this case the list.I gotcha, thanks for explaining it.You're more than welcome.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#center{
width: 100%;
height: 100%;
text-align: center;
background-color: #A4C7D2;
}
#box {
width: 700px;
height: 100%;
border-right: 5px solid #000000;
border-left: 5px solid #000000;
background-color: #FFFFFF;
}
#content {
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
margin-top: 20px;
text-align: left;
background-color: #F5FAFA;
}
#flash {
border-bottom: 5px solid #000000;
z-index: 0;
}
#navcontainer {
width: 180px;
border: 2px solid #369;
}
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#navcontainer a
{
display: block;
width: 100%;
padding: 6px;
}
#navcontainer a:link, #navlist a:visited
{
color: #000;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="center">
<div id="box">
<div id="content">
<div id="flash">
<object classid="clsid
27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://Download .macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700" height="100"><param name="movie" value="top2.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<embed src=http://www.webdeveloper.com/forum/archive/index.php/"top2.swf" width="700" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="opaque"></embed></object>
</div>
<table width="700" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="192" valign="top"><div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Strategy</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Human Resources</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Risk Assessment</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Budgets & Forecasts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Performance Reporting</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Time Reporting & Projects</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Feedback</a></li>
</ul>
</div></td>
<td width="484"><p>asdfasdf</p>
<p>asd</p>
<p>f</p>
<p>as</p>
<p>df</p>
<p>asdf</p>
<p> </p>
<p>asdf</p>
<p> </p>
<p>asdf</p></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>So what???
It does not look out of place (actually it looks pretty nice) and IE users would never know that it "should not" be there....I want it be tight on the bottom like it is on the top. It's more of a personal knowledge thing at this point. I just want to know if it can be fixed or is this an IE rendering bug.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#center{
width: 100%;
height: 100%;
text-align: center;
background-color: #A4C7D2;
}
#box {
width: 700px;
height: 100%;
border-right: 5px solid #000000;
border-left: 5px solid #000000;
background-color: #FFFFFF;
}
#content {
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
margin-top: 20px;
text-align: left;
background-color: #F5FAFA;
}
#flash {
border-bottom: 5px solid #000000;
z-index: 0;
}
#navcontainer {
width: 180px;
border: 2px solid #369;
}
#navcontainer ul
{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: -1px;
padding: 0px;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#navcontainer a
{
display: block;
width: 100%;
padding-bottom: 6px;
padding-top: 6px;
padding-left: 2px; /* Cannot exceed border width */
}
#navcontainer a:link, #navlist a:visited
{
color: #000;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="center">
<div id="box">
<div id="content">
<div id="flash">
</div>
<table width="700" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="192" valign="top"><div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Strategy</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Human Resources</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Risk Assessment</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Budgets & Forecasts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Performance Reporting</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Time Reporting & Projects</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Feedback</a></li>
</ul>
</div></td>
<td width="484"><p>asdfasdf</p>
<p>asd</p>
<p>f</p>
<p>as</p>
<p>df</p>
<p>asdf</p>
<p> </p>
<p>asdf</p>
<p> </p>
<p>asdf</p></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Edit: didn't see anyone had posted a reply to this thread before I posted mine.
Thanks Jona that worked. I didn't know that the padding cannot exceed the border width. Is that an IE only thing?Originally posted by tomwoj Thanks Jona that worked. I didn't know that the padding cannot exceed the border width. Is that an IE only thing?
Padding can exceed border-width, but if it does, since the width of the anchor is set to 100%, adding left padding more than the width of the border will make the anchor exceed the width of its containing element, in this case the list.I gotcha, thanks for explaining it.You're more than welcome.