CSS - How Do I Get Rid Of The Padding Around The List Style Image ?

I'm having a "can't think" day.

How would I get rid of the space(s) between the image icon and the <li> folder or file name on my test website?

On the left-hand side of my test website, there is a directory tree listing.

You'll see that php files are indicated with an php file icon for example.

I don't want that much space between the file name and the file icon.



Test website: www seemyinvestments dot com

I am working on a pop out menu on warrenhomes .

The image displays properly in firefox and IE8, but the menu leaves are cut off in IE7 (or IE8 compatibility mode).

pushing the list-style-position:inside; line isn't really helping either. Can someone tell me why ie7 is displaying list-style-image differently and possibly how I can correct this issue?

Hi,

Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side?

/Hubba Bubba

how do you remove the "padding" of the ul on the left hand side?

I've tried the popular tricks to figure this out, but don't seem to have the touch.

In IE, the list item is 2px taller than in FF.

page:
URL Removed

CSS:

Code:

.mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul li {border-top: 1px solid #27466c; border-bottom: 1px solid #021940; background: url('../images/menu_bg.gif') top left repeat-y; display: block;}
.mainNav ul a, .mainNav ul span {display: block; height: 17px; padding-top: 4px; font: 11px Verdana,Sans-Serif; color: #ffffff;}
.mainNav ul a:link, .mainNav ul a:visited {text-decoration: none;}
.mainNav ul a:hover{text-decoration: none; color: #9fb3cb;}
.mainNav ul ul ul a:hover, .mainNav ul ul ul ul a:hover {text-decoration: none; color: #3e5064;}
.mainNav ul ul li {border: 0; background: url('../images/sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul li {border: 0; background: url('../images/sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul ul li {border: 0; background: url('../images/sub_sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.unselected, .selected, .empty {display: block; float: left; height: 21px; width: 22px;}
.currentPage {border-right: 4px solid #000530; margin-right: 1px;}

HTML on page (it's quite heavy)

Hi,

I'm having a problem with some padding showing up oin both IE and Firefox with list items on my navbar. Please see:
http://81.17.252.110/~wallis1/new/

I want the nav items to come to the edges of the <ul> tag (want to make the white borders on the navigation items come to the edge) but there is this padding there for some unknown reason between the <ul> and the <li> items.

Please can you help as I'm tearing my hair out now,

Thanks in advance,

I have a horizontel list as my menu with a 1px border to the right of each item as a seperator. Each item has 10px padding to the left and right. In all browsers it shows up as expected in the middle of the menu items but in Explorer the border is way closer to the right, almost pushed up against the item to the right. Any help please.

Hi there,

I have a list which I want to display the sub items without any left spacing.. so they are listed directly beneath the parent item.

It works fine in IE, but not in FF or Opera.

This is what I have:

Code:

<ul id="treemenu1" class="treeview" style=" padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 10px; padding-left: 0px;" >
            
			  <li style="list-style: none;">
			  <img src="images/arrow.gif" border="0" > 
               <a class="nav_main" href="#"><strong>Parent Item</strong></a>
			  </li>
			  
                <ul style="list-style: none;">
                  <li style="border-bottom: 1px dashed #444444;  padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 0px; "><a class="nav_sub" href="page"><img src="images/arrow.gif" border="0" >Sub Item</a></li>

etc...

I have tried use margin-left: 0px but that still doesn't work.

Any ideas what I'm doing wrong?

I have the ul style specifically assigned where I want, but another style is overriding it.

I'm using the same script on a different site and it works fine.

The style sheets for the two sites are similar, but there are a few minor differences. But I don't really want to make big changes that would affect other pages in the site.

Here's the style that I suspect is overriding the one I want to use:

ul {margin: 0px; padding: 0px}
ul li {margin: 0px 0px 0px 8px; padding: 3px 0px 0px 10px; background-image:url(../arrow.gif); background-repeat:no-repeat; background-position: 0px 7px; list-style-image:url(../spacer.gif)}
ul ul li {margin: 0px 0px 0px 8px; padding: 3px 0px 0px 10px; background-image:url(../reddot.gif); background-repeat:no-repeat; background-position: 0px 7px; list-style-image:url(../spacer.gif)}

And here's the style I've applied to that one section of the page:

ul.list_specials li {
list-style-type:none;
}


Unfortunately, I'm too new to the boards and can't put links in my posts yet. Otherwise I could send links from the two different sites.
What am I doing wrong?

Thanks,

Ann

Please look at this page - http://www.tmhdesign2.com The list nav up at the top I have a bg image for the a tag and want to not display the bullet for the <li> but list-style-top:none does not work...

I am trying to use ul list to organize my images.

Here is how it should look like.

IMAGE IMAGE IMAGE
text text text

But instead, I get

IMAGEtext IMAGEtext IMAGEtext

Code:

<style>
/**************************************************************
   Thumbnail Lists
 **************************************************************/

ul.thumbs,
ul.thumbs li {
  margin: 0;
  padding: 0;
}

ul.thumbs li {
  margin: 0 0 15px 0 !important;
  margin: 0;
  padding: 0px;
  list-style: none;
}

ul.thumbs li.pagination {
  margin: 10px;
  padding: 0px;
  list-style: none;
  display:block;
}

a.thumb img {
  border: 5px solid #ccc;
}

a:hover.thumb img {
  background: #8EB4C6;
  border: 5px solid #000;
}

a:hover.thumb {
  background: none;
}

a.thumb span {
  width: 100%;
  display: block;
  margin-top: -5px !important;
  margin-top: -2px;
}
</style>

      <ul class="thumbs">

        <li>
        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/8P5B7K8M_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=13" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li>

        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/7K4V6F7H_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=12" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li>
        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/0C7O9X0A_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=11" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li>
        	<a href="#" class="thumb"><img src="/FLPM/media/news/images/1Q8B0L1N_sm.jpg" alt="" class="floatLeft" /></a>
         	<a href="?Process=DeleteImage&IMAGEID=10" class="thumb"><span class="floatLeft">DELETE</span></a>
		</li>

        <li class="pagination">1.&nbsp;</li>

	</ul>

I dont get what is my list styles for the footer content section. listed items dont appear listed and I could not vertically center the div.

Footer content section is right above the copyright notice.
http://www.aslanyurek.com/rtt/


Code:

/* content footer.css */

#fcontent{
	height:80px;
	width:790px;
	background-color:#999999;
}
#fcontent .help{
	float: left;
  	height: 60px;
  	width: 300px;
	vertical-align:middle;
	background-color:#FFFFCC;
}
#fcontent .catalog{
	float: left;
  	height: 60px;
  	width: 300px;
	vertical-align:middle;
	margin-left:10px;
	background-color:#F0FFCC;
}
#fcontent li {
	float:left;
	list-style-type:square inside;
	margin-left:25px;
}
#fcontent li a {
	display:block;
}

So far I've been unable to find the answer to this question despite numerous Google searches, and am sincerely hoping someone here can give me the definitive answer.

I have an unordered list which requires use of the decimal-leading-zero list style type. However, I need to start the number at 00 instead of 01.

In HTML the way you do this is to put inside the UL tag start="0", but this is not validatable, and actually deprecated.

How can I begin a list with 00 rather than 01 for the decimal-leading-zero list-style-type?

TIA for all help and advice.

Here is some code below. How do I write it, that only the title is bold and not the description?

Code:

<html>
<head>
    <style type="text/css">
        .selected {font-weight: bold; }
    </style>
</head>
<body>
<ul>
    <li class="selected">Title</li>
        <ul>
            <li>description 1</li>
            <li>description 2</li>
            <li>description 3</li>
        </ul>
    </ul>
</body>
</html>