SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Curious Behavior

    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>

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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%;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Kravvitz. It works. Looks like I need to start studying positioning and getting familiar with the basic problems in IE.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks. This will be my commute reading for the week.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •