...

View Full Version : Extra Whitespace in List Links bug



joroco
10-09-2007, 10: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-10-2007, 12:03 AM
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-10-2007, 12:03 AM
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>
<!--[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>

rmedek
10-10-2007, 12:15 AM
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, 03: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, 04: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, 09: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, 09:56 PM
Hi again,

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

"<!--[if lte IE 6]>
<style type="text/css">
#nav li, #nav li a {
height:1%;
}
</style>
<![endif]-->"

_Aerospace_Eng_
10-10-2007, 11:35 PM
Hi again,

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

"<!--[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.

* 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

<!--[if lte IE 6]>
<link rel="stylesheet" href="iestyle.css" type="text/css">
<![endif]-->



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum