Curious Behavior

**cscott** · Jul 10, 2007 10:00

Hi,

I'm working on a simple navigation system, using DreamWeaver as my editor, and incrementally browser testing as I build. I've run into an issue in IE6 (PC) where the bottom-border for each link is much greater that the defined 1px. I was able to correct this by removing all of returns I put in between each <li> to clean up the code. I'm wondering what is it about the manual line breaks I'm inserting in the code that would cause this problem in IE6 and how to neatly format my code to avoid this.

I'm including both versions of the code, the first one was problematic while the second represents the fix.

Thanks.

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
/* global */
 
p, div, h1, h2, h3, h4, ul, li, form, input, select, option {
	margin:	0;
	padding: 0;
	}
 
img {
	margin:	0;
	padding: 0;
	border:	0;
	}
 
ul {
	list-style:	none;
	}
 
a {
	outline: 0;
	}
 
/* navigation */
 
#navcontainer {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #333333;
	width: 200px;
	}
 
#navcontainer h4 {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #333333;
	}
 
#navcontainer ul li a{
	font: bold 12px Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #333333;
	display: block;
    background-color: #dddddd;
	padding: 5px 5px 5px 5px;
	border: 0;
	border-bottom: 1px solid #ffffff;
	}
</style> 
</head>
 
<body>
<div id="navcontainer">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Services</a>
		<ul>
  		<li><a href="#">Applied Social Science Research &amp; Evaluation</a>
    		<ul>
    		<h4>Areas of Expertise</h4>
      		<li><a href="#">Program Evaluation</a></li>
      		<li><a href="#">Survey Research</a></li>
      		<li><a href="#">Needs Assesment &amp; Market Research Services</a></li>
      		<li><a href="#">Policy Research</a></li>
      		<li><a href="#">Organizational Assessment</a></li>
    	</ul>
	</li>
	</ul>
</li>
</ul>
</div>
</body>
</html>

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
/* global */
 
p, div, h1, h2, h3, h4, ul, li, form, input, select, option {
	margin:	0;
	padding: 0;
	}
 
img {
	margin:	0;
	padding: 0;
	border:	0;
	}
 
ul {
	list-style:	none;
	}
 
a {
	outline: 0;
	}
 
/* navigation */
 
#navcontainer {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #333333;
	width: 200px;
	}
 
#navcontainer h4 {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #333333;
	}
 
#navcontainer ul li a{
	font: bold 12px Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #333333;
	display: block;
    background-color: #dddddd;
	padding: 5px 5px 5px 5px;
	border: 0;
	border-bottom: 1px solid #ffffff;
	}
</style> 
</head>
 
<body>
<div id="navcontainer">
	<ul>
<li><a href="#">Home</a></li><li><a href="#">Services</a><ul><li><a href="#">Applied Social Science Research &amp; Evaluation</a><ul><h4>Areas of Expertise</h4><li><a href="#">Program Evaluation</a></li><li><a href="#">Survey Research</a></li><li><a href="#">Needs Assesment &amp; Market Research Services</a></li><li><a href="#">Policy Research</a></li><li><a href="#">Organizational Assessment</a></li></ul></li></ul>
</li>
</ul>
</div>
</body>
</html>

**Kravvitz** · Jul 10, 2007 14:49

That's a well known white-space bug in IE. I recommend doing this:

Code:

#navcontainer ul {
  float: left;
  width: 100&#37;;
  list-style-type: none;
}    
#navcontainer ul li {
  float: left;
  clear: left;
  width: 100%;
}

**cscott** · Jul 10, 2007 15:08

Thank you, Kravvitz. It works. Looks like I need to start studying positioning and getting familiar with the basic problems in IE.

**Kravvitz** · Jul 10, 2007 15:12

You're welcome.

A good place to start is here: Explorer Exposed! I recommend that you check out the rest of that site as well.

**cscott** · Jul 10, 2007 15:25

Many thanks. This will be my commute reading for the week.

**Dan Schulz** · Jul 10, 2007 19:44

Sorry, but I don't buy the "white space bug" theory. There is however a H4 heading directly underneath a UL tag. Get rid of that and validate your code.
http://validator.w3.org/

**Kravvitz** · Jul 10, 2007 22:40

You're welcome, cscott.

Good catch Dan, but fixing that doesn't remove the extra white-space between the <li>s.

cscott, the <h4> should come before that inner <ul>.

Code:

<div id="navcontainer">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a>
      <ul>
      <li><a href="#">Applied Social Science Research &amp; Evaluation</a>
        <h4>Areas of Expertise</h4>
        <ul>
          <li><a href="#">Program Evaluation</a></li>
          <li><a href="#">Survey Research</a></li>
          <li><a href="#">Needs Assesment &amp; Market Research Services</a></li>
          <li><a href="#">Policy Research</a></li>
          <li><a href="#">Organizational Assessment</a></li>
        </ul>
      </li>
      </ul>
    </li>
  </ul>
</div>

User Tag List

Thread: Curious Behavior

Thread Tools

Display

Curious Behavior

Bookmarks

Bookmarks

Posting Permissions