Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to reduce the space between the <ul> and <li> tags 2

Status
Not open for further replies.
ReportingAnalyst

ReportingAnalyst

MIS
Joined
Oct 11, 2006
Messages
300
Location
US
Hi,

I built a tree dynamically using styled UL tags. It is nested. The code is a working sample to see that there is so much space between the manager and their subordinates. How can I reduce this space? Which property do I use to reduce the space?

Thanks.

Code: 
<html>
<body>

</body>
</html>

<HTML>
<HEAD>
<style type="text/css">
.ulcontent{
display:none;
}

#menu {
  padding:0;
  margin:0;
  }
#menu li {
  list-style-type:none;
  }

#menu ul {
padding: 0;
margin: 6px;
list-style-type: none;
}

a.a_style:link {color:#0000ff; text-decoration:none;}
a.a_style:visited {color:#0000ff; text-decoration:none;}
a.a_style:hover {color:#ff0000; text-decoration:underline;}
a.a_style:hover {color:#ff0000; text-decoration:underline;}

</style>
<script type="text/javascript">
function s_Hide(el){
	obj = document.getElementById(el).style;
	(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Organization with styled Unordered Lists</TITLE>
</HEAD>
<BODY>



<form name="commissionReports" method=post>


<ul id="menu">
	<li>
		<input type="radio" checked name="empid" id="empid" value="22979">
		<a href="#" class="a_style" onclick="s_Hide('1472'); return false;">TopMgr</a><font size=1>(22979)</font>
		<ul id="1472" class="ulcontent">
			&nbsp;&nbsp;
			<li>
				<input type="radio" name="empid" id="empid" value="8208">
				<a href="#" class="a_style" onclick="s_Hide('1703'); return false;">Mgr1</a><font size=1>&nbsp;(8208)</font>
				<ul id="1703" class="ulcontent">
				&nbsp;&nbsp;&nbsp;&nbsp;
					<li>
					<input type="radio" name="empid" id="empid" value="40801">
					Subordinate1&nbsp;<font size=1>(40801)</font>
					</li>

					&nbsp;&nbsp;&nbsp;&nbsp;
					<li>
					<input type="radio" name="empid" id="empid" value="8089">
					<a href="#" class="a_style" onclick="s_Hide('3290'); return false;">Mgr2</a><font size=1>&nbsp;(8089)</font>
					<ul id="3290" class="ulcontent">

						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li>
						<input type="radio" name="empid" id="empid" value="806">
						Subordinate2&nbsp;<font size=1>(806)</font>
						</li>
					</ul>
					</li>

					&nbsp;&nbsp;&nbsp;&nbsp;
					<li>
					<input type="radio" name="empid" id="empid" value="82">
					Subordinate4&nbsp;<font size=1>(82)</font>
					</li>

					&nbsp;&nbsp;&nbsp;&nbsp;
					<li>
					<input type="radio" name="empid" id="empid" value="26">
					Subordinate5&nbsp;<font size=1>(26)</font>
					</li>

					&nbsp;&nbsp;&nbsp;&nbsp;
					<li>
					<input type="radio" name="empid" id="empid" value="80">
					Subordinate6&nbsp;<font size=1>(80)</font>
					</li>

				</ul>
			</li>

			&nbsp;&nbsp;
			<li>
			<input type="radio" name="empid" id="empid" value="28">
			Subordinate7&nbsp;<font size=1>(28)</font>
			</li>

			&nbsp;&nbsp;
			<li>
			<input type="radio" name="empid" id="empid" value="40">
			<a href="#" class="a_style" onclick="s_Hide('2109922'); return false;">Mgr3</a><font size=1>&nbsp;(40)</font>

				<ul id="2109922" class="ulcontent">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<li>
					<input type="radio" name="empid" id="empid" value="41">
					Subordinate8&nbsp;<font size=1>(41)</font>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>


</form>


</body>
</html>
 
Sort by date Sort by votes
ReportingAnalyst,

whenever i create a website, i do this:

Code: 
* {
   border: 0;
   padding: 0;
   margin: 0;
}

because different browsers render different elements differently.

you can then explicity set margins, borders and paddings for each element type in your css.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
I tried the following CSS script:

Code: 
* {
   border: 0;
   padding: 0;
   margin: 0;
}

#menu {
  padding:0;
  margin:0;
  }
#menu li {
  list-style-type:none;
  }

#menu ul {
padding: 0;
margin: 5px;
list-style-type: none;
}

But I still get a lot of space between the UL and LI tags for the above HTML script.

Thanks.
 
Upvote 0 Downvote
You have an awful lot of &nbsp; not in any specific tags (between <ul> and </ul> but not between any <li> and </li>).

Try removing all of the extra whitespace.
 
Upvote 0 Downvote
Seconding Borvik - get rid of the &nbsp's. Assign a class to each mgm level with a margin-left value increasing according to the mgm (sub) level.
 
Upvote 0 Downvote
I had an indent function that indented the subordinates by that many non breaking white spaces based on the hierarchy. But after replacing the earlier span tag with the styled ul tag, it shows better now.

Thanks for the tip.
 
Upvote 0 Downvote
there should not be anything (other than whitespace) between your li tags. [tt]&nbsp'[/tt] is not whitespace, it's an html entity. as Borvik and dkdude have already said, get rid of that.

you should also strongly consider the use of a complete document type (doctype). google for the phrase and you'll get several results.

that will allow you to validate your code ( which will point out errors like the one I mentioned above, before you need to bring them to the forum.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
This w3 is so cool. Here I work within a textpad environment, so something like this to point my errors is so useful for me instead of having to wreck my head and resorting to this forum.

Thanks.
 
Upvote 0 Downvote
... and if your pages reside on a public server then use FireFox - just hit ctrl+shift+h ... then your page is validated directly in the browser (with w3.org's validator). Now that's cool, huh ;-)
 
Upvote 0 Downvote
Is there a way of using this validator for IE 6.0 browsers other than pasting my script into the textarea within the w3 validator browser?

Thanks.
 
Upvote 0 Downvote
you'll most likely need to put your page out on a public server where the validator can read it.

otherwise, you can search for "Internet Explorer 6 validator plugin" to see if you get anything.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
524
lmcate
lmcate
cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
Mike Lewis
  • Locked
  • Question Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis
bdwilcox
  • Locked
  • Question Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
1K
bdwilcox
bdwilcox
soni21
  • Locked
  • Question Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top