Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS: problem with extra space

Posted on 2011-09-06
5
Medium Priority
?
649 Views
Last Modified: 2012-05-12
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
Comment
Question by:bruno_boccara
  • 2
  • 2
5 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 36489525
Try giving the .treeview a CSS style of padding:0;

Like this in your treemenu.css:

.treeview {padding:0;}
0
 

Author Comment

by:bruno_boccara
ID: 36489634
Already tried.
it works with Chrome and Safari.
it does not work with IE9....
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 36489649
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
 
LVL 8

Expert Comment

by:Jen0910
ID: 36489760
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
 

Author Closing Comment

by:bruno_boccara
ID: 36490138
so simple !!

thanks a lot.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question