Extra Whitespace in List Links bug

joroco

10-09-2007, 09:49 PM

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:
<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:
.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"

binaryWeapon

10-09-2007, 11:03 PM

Could it be your indentation that it doesn't like? Try this and see if it works.
<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>

_Aerospace_Eng_

10-09-2007, 11:03 PM

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
<!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>

</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>

rmedek

10-09-2007, 11:15 PM

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" (http://www.google.com/search?q=holly%20hack):

#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:

<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.

joroco

10-10-2007, 02:56 PM

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. :confused:

Nightfire

10-10-2007, 03:19 PM

1 id per page. You can't have

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

You'll have to rename one of them

joroco

10-10-2007, 08:34 PM

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.

joroco

10-10-2007, 08:56 PM

Hi again,

Can this go in an external style sheet ?? If so where?
""

_Aerospace_Eng_

10-10-2007, 10:35 PM

Hi again,

Can this go in an external style sheet ?? If so where?
""

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.
* 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
#nav li, #nav li a {
height:1%;
}

And then call it into your document like so