Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Extra Whitespace in List Links bug

    Hi,

    I am using Dreamweaver CS3 and on that you can check to see if there is anything wrong. I have made a <ul> to make a menu box and when I check to see if all is fine it says this "Extra Whitespace in List Links bug" and highlights each one of my lists (<li>)

    Here is the HTML:
    Code:
    <div class="left_column">
            	<div id="nav">
                    <ul id="nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">CV</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
    And here is the CSS:
    Code:
    .left_column {
    	float: left;
    	background-color: #181818;
    	height: auto;
    	width: 200px;
    }
    
    #nav {
    	width: 200px;
    	background-color: #003399;
    }
    
    #nav ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #nav li {
    	border-bottom: 1px solid #fff;
    	margin: 0;
    }
    
    #nav li a {
    	display: block;
    	border-left: 10px solid #66aa21;
    	padding: 3px;
    	text-decoration: none;
    }
    I also checked on Adobe and tested what it said and then I got another error and also the white space problem was still there.

    Thanks all!

    P.S. Thought I had better write down what it says in Dreamweaver about the problem "If a link with display: block and no explicit dimensions is inside a list item, any spaces or linebreaks that follow the list item in the code will cause extra whitespace to appear in the browser.

    Affects: Internet Explorer 5.5, 6.0
    Likelihood: Very Likely"
    Last edited by joroco; 10-09-2007 at 10:01 PM.

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    AZ, USA
    Posts
    685
    Thanks
    6
    Thanked 46 Times in 46 Posts
    Could it be your indentation that it doesn't like? Try this and see if it works.
    Code:
    <div class="left_column">
    <div id="nav">
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">CV</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    </div>

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Word of advice, learn to hand code. This design view in DW isn't going to get you anywhere because you don't understand whats happening. Dreamweaver is not a browser. Try this
    Code:
    <!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=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .left_column {
    float: left;
    background-color: #181818;
    width: 200px;
    }
    #nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: none;
    width: 200px;
    background-color: #039;
    }
    #nav li {
    border-bottom: 1px solid #fff;
    margin: 0;
    }
    #nav li a {
    display: block;
    border-left: 10px solid #66aa21;
    padding: 3px;
    text-decoration: none;
    width:184px;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    #nav li, #nav li a {
    height:1%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="left_column">
    	<ul id="nav">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Portfolio</a></li>
    		<li><a href="#">CV</a></li>
    		<li><a href="#">Contact</a></li>
    	</ul>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    If a link with display: block and no explicit dimensions is inside a list item, any spaces or linebreaks that follow the list item in the code will cause extra whitespace to appear in the browser.
    That's exactly what you have going on… #nav li a has "display:block" given but no explicit sizes. To clarify what Aero said, you can either throw IE a little hack to give it "layout":

    Code:
    #nav li, #nav li a {
       height:1%;
    }
    …or some people code their lists a little trickier to fool IE—the idea being to remove all whitespace between LIs:

    Code:
    <ul id="nav">
       <li><a href="#">Home</a></li
       ><li><a href="#">Portfolio</a></li
       ><li><a href="#">CV</a></li
       ><li><a href="#">Contact</a></li>
    </ul>
    …I've never done it this way, but some people swear by it. Also, you have two "nav" IDs…remember you can only have one ID per page.

  • #5
    New Coder
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks to everyone that has replied. I will be checking through everything later and hopefully fix this little problem.

    "_Aerospace_Eng_" - I dont use dreamweaver design view at all. I only use dreamweaver to write the code.

    "rmedek" - "Also, you have two "nav" IDs…remember you can only have one ID per page."
    Only 1 ID per page or 1 ID per Class? Sorry, I don't really know how to ask that, hopefully you get what I mean.

  • #6
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    1 id per page. You can't have

    <div id="nav">
    <ul id="nav">

    You'll have to rename one of them

  • #7
    New Coder
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tested something before, I wanted an active link, the left margin disapears and the right margin stays. but when I coded it, it worked on IE but not firefox.
    Can someone write in a correct way of adding an "active" id/class to one of the links?

    Thankyou.

  • #8
    New Coder
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi again,

    Can this go in an external style sheet ?? If so where?
    Code:
    "<!--[if lte IE 6]>
    <style type="text/css">
    #nav li, #nav li a {
    height:1%;
    }
    </style>
    <![endif]-->"

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by joroco View Post
    Hi again,

    Can this go in an external style sheet ?? If so where?
    Code:
    "<!--[if lte IE 6]>
    <style type="text/css">
    #nav li, #nav li a {
    height:1%;
    }
    </style>
    <![endif]-->"
    Yes and no. You can put this directly in your external stylesheet but you would need to be sure your document is not in quirks mode, meaning you need a full valid doctype.
    Code:
    * html #nav li, * html #nav li a {
    height:1%;
    }
    Note: If you do this you can put the css in an existing stylesheet and you won't need to use the method below.

    or you can make a whole new stylesheet called iestyle.css
    Code:
    #nav li, #nav li a {
    height:1%;
    }
    And then call it into your document like so
    Code:
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="iestyle.css" type="text/css">
    <![endif]-->
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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