• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 655
  • Last Modified:

CSS: problem with extra space

Hello, I have a problem with script from dynamicdrive dhtml.
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
I have extra space on the left of the list.
wich style or changes do I add to avoid these extra spaces.
I tried some solution that was working with safari/chrome and not with IE9.

Thanks for your help. in red the extra space
<HTML>
<head>
<script type="text/javascript" src="simpletreemenu.js">
/***********************************************
* Simple Tree Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<link rel="stylesheet" type="text/css" href="simpletree.css" />
</head>
<BODY>
<ul id="treemenu1" class="treeview">
<li>Item 1</li>
<li>Item 2</li>
<li>Folder 1
	<ul>
	<li>Sub Item 1.1</li>
	<li>Sub Item 1.2</li>
	</ul>
</li>
<li>Item 3</li>
<li>Folder 2
	<ul>
	<li>Sub Item 2.1</li>
	<li>Folder 2.1
		<ul>
		<li>Sub Item 2.1.1</li>
		<li>Sub Item 2.1.2</li>
		</ul>
	</li>
</ul>
</li>
<li>Item 4</li>
</ul>
<script type="text/javascript">
ddtreemenu.createTree("treemenu1", true)
</script>
</BODY>
</HTML>

Open in new window

simpletree.css
0
bruno_boccara
Asked:
bruno_boccara
  • 2
  • 2
1 Solution
 
LZ1Commented:
Try giving the .treeview a CSS style of padding:0;

Like this in your treemenu.css:

.treeview {padding:0;}
0
 
bruno_boccaraAuthor Commented:
Already tried.
it works with Chrome and Safari.
it does not work with IE9....
0
 
LZ1Commented:
If your page is as simple as you've posted, first you should start out with a reset CSS to alleviate cross-browser defaults.

http://meyerweb.com/eric/tools/css/reset/

Paste that CSS before any other CSS and then let us know.
0
 
Jen0910Commented:
If LZ1's suggestion doesn't work, I would change your CSS to ID's and eliminate the need to call a separate class. Line 13 of your HTML would look like this: <ul id="treeview">

and your CSS:
#treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

#treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(list.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}

#treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}

#treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

#treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}

Open in new window


Strange as it sounds, have seen positioning oddities utilizing classes before. I try to us them only for text/visual styles, and leave my positioning (margins, padding, etc.) to div IDs. Hope that helps.
0
 
bruno_boccaraAuthor Commented:
so simple !!

thanks a lot.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now