CSS - Spacing Between Bullets

Here's a quicky before the weekend (FINALLY!!!)...

Is there a way to detect if a user clicks on a bullet (or the entire LI tag)? I have this list, but I would like the browser to react differently when clicking on the LI text vs. the LI bullet icon.

I've read about putting the icon in background and then moving the text, and this seems to work except for a bug concerning text wrapping... so please don't suggest that...

I might be dreaming here... but the forums are usually very resourceful so why not!!

Thanx a ton.
Olografix

Hi, I have a problem with a menu.
I use joomla 1.5 and I create a sprite CSS menu as follow:

Code:

ul.menu-central { 
width: 970px;
display:inline;
}

ul.menu-central li {
display:inline;
}	
ul.menu-central li a {
	display: block; float:left; margin-left:5px; height: 80px; 
	background-image: url((URL address blocked: See forum rules));  text-indent: -9999px;

	
}
	ul.menu-central .item67 a {
		width: 150px; background-position: -10px -9px;
	}
	ul.menu-central .item72 a {
		width: 150px; background-position: -170px -9px;
	}
	ul.menu-central .item97 a {
		width: 150px; background-position: -330px -9px;
	}
	ul.menu-central .item79 a {
		width: 150px; background-position: -490px -9px;		
	}
	ul.menu-central .item98 a {
		width: 150px; background-position: -650px -9px;		
	}
	ul.menu-central .item99 a {
		width: 150px; background-position: -810px -9px;
	}
a { outline: none; }

In IE the bullets of the list are hidden, instead in Firefox are visible.
I try to put:
list-style:none and list-style-type: none in the css code, but nothing has happened.
Someone could you know how can I hide the bullets also in Firefox?
Thank you

I came across this today and realized I didn't have a nice clean answer for how to handle it. A client was editing a page where text was wrapping around an image. Something like this:

Code:

<div style="border: 1px solid blue; float: left; width: 100px; height: 200px">image</div>
<p>This is some text.</p>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>

She asked why the bullets weren't appearing. Sure enough, the bullets appear underneath the float, not next to it. Now I could enclose the bullets and the paragraph in a div and give that div some left padding, but this is a free form text page where she should just be able to type and have the text flow around the floated element. I shouldn't have to manually tweak styles on elements just so she can have bullets show up in the right place.

Is there an easy CSS method to make the bullets appear in the right place whether they're next to a floating element or not?

Hi, I have a list of items a bullet on the left --> check.gif (13 X 12) and I'm totally new with CSS...
but my check aligns ok only with IExplorer, firefox doesn't.

here is my code...

Code:

#myul
{
	color: #000000;
	font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
	list-style-position: outside;
	margin-left: 15%;
	margin-right: 15%
}

#myul li
{
	color: #0076a3;
	font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
	background-repeat: no-repeat;
	background-image: url(images/check.gif);
}

Code:

<ul id="myul" class="listObj">
<li class="style16">Test item 1</li>
<li>Checks all devices</li>
<li>Verifies ....quality, ....resolution, precision/accuracy</li>
<li>Compares current imagesbla bla bla bla bla bla bla bla bla some more below.........................ok thanks</li>
</ul>

PLEASE NOTE that I want the check align on top, sometimes the text lenght makes it move, I don't want that to happen.

Can you help
Thanks, my first post here

Please go to http://hometown.tmhdesign.com See the list on the right site with the check mark bullets. Scroll up and then back down and they disappear.

How do I go about making my unordered list use a image file or the bullet?

Code:

<ul>
  <li><a href="#onesweetcoma">One Sweet Coma </a></li>
  <li><a href="#untitled">Untitled</a></li>
  <li><a href="#freedomfound">Freedom Found </a></li>
  <li><a href="#yourwords">Your Words</a></li>
  <li><a href="#reprise">Reprise</a></li>
  <li><a href="#cantpullaway">Can't Pull Away </a></li>
  <li><a href="#sleepingawake">Sleeping Awake</a></li>
  <li><a href="#wherewestand">Where We Stand</a></li>
  <li><a href="#echooffthewalls">Echo Off the Walls </a></li>
</ul>

my image name is bullet.png

Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out?

Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!)

Code snippet is posted below. Cheers.

from stylesheet:
.bulletList li

{
margin-bottom: 1.5em;

padding-left: 0.75em;
list-style-image:url(../images/hsdmini.jpg);
color: #547A98;

}

from page:

<table width="100%" >
<tr>
<td align="left">
<ul class="bulletList"><strong>
<li>Credit cards accepted</li>
<li>Cheques accepted</li>
<li>Delivery to europe</li>
<li>40,000 products in store!</li>
</strong>
</ul>
</td>
</tr>
</table>

I've no idea why my sidebar continues to display unordered list bullets even though I'm pretty sure all parent CSS uses "list-style-none".

I've spent the last 2 hours trying different things, will someone please help this newbie out?

you can see the bulleted sidebar at this link:

www.dalcon.com/business

While trying to get text-overflow: ellipsis going with list items, I noticed that bullets were disappearing in Webkit (Safari and Chrome) and Opera browsers. I narrowed the problem down to overflow: hidden.

I understand why putting overflow: hidden on a list item can hide the bullets (firefox also hides them in that case), but I'm putting it on a div inside the list item, and the bullets are still going away in those browsers (firefox and ie still show them, but not webkit and opera).

This illustrates what I'm trying to do:
http://sethsticco.net/files/possiblebug.html

..and this narrows the problem down to overflow: hidden:
http://sethsticco.net/files/simpler.html
The first list is normal, with no styling. The second one has overflow: hidden applied to the <li> tags. The bullets disappear for firefox, webkit, and opera, but not ie. The third list is the important one. It only applies overflow: hidden to the <div> tags inside the <li> tags, but bullets still disappear for Webkit and Opera. The fourth list is only there to show what happens if I try using <span> tags. They act like divs when they get display: block, and they don't get the ellipsis when they're inline.
I feel like I've found a bug, but regardless, I really just want to get text-overflow: ellipsis going on list items. Does anyone have any ideas?

Hi,

I have tried putting list-style-type: none; in various places to remove the circle bullets from the list style in my code but I must be doing something wrong.

How can I remove the circle bullets from the expanding menus on this page ?

Thanks

Hi,

I am new to css and have written a code for a list menu in my page and i have added an image for instead of selecting the default bullets in css (ie. square, circle etc. so now my problem comes it looks perfect in Firefox browser but in IE 6 & 7 the position of the bullet image changes . In firefox it shows the bullet besides the text written and it is centered and perfect as i need but in IE 6 and 7 the image of the bullet moves up and sticks to the text instead of maintaining some distance with the text.

i am providing u the link of my page below:

r-interactive.net/clients/reed%5Fcss/

Also i am mentioning the css code which i have used for the list menu below :

Css :
Code:

ul#listmenu {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #959595;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
text-indent: 5px;
list-style-type: none;
list-style-image: url(../images/main_images/img_industry_bullet.gif);
list-style-position: inside;

}

ul#listmenu li {
list-style-image: url(../images/main_images/img_industry_bullet.gif);
margin-top: 0;
margin-right: 0;
margin-left: 0;
padding-top: 0.5em;
padding-right: 0;
padding-bottom: 0.5em;
padding-left: 0;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #207EC9;
clear: both;

}

Html :
Code:

<ul id="listmenu">
<li> Jewelry Industry</li>
<li> Aluminium Industry</li>
<li> Electronics Industry</li>
<li> Pharmaceutical Industry</li>
<li> Oil & Gas Industry</li>
<li> Cosmetics Industry</li>
</ul>

Help is always appreciated.

For a navigation I am using, I must use an li height to control spacing in IE6. I'm also using bullets to show a user where they are in the site by only having one bullet display at a time.

Unfortunately, the height assignment I use on my li causes IE to misplace the bullet next to its secondary nav.

Below is code I'm using to troubleshoot:

Code:

<ul><li><a href="#">dog</a></li>
  <li><a href="#">cat</a></li>
  <li class="here"><a href="#">fish</a></li> 
    <ul>
      <li><a href="#">trout</a></li>
      <li><a href="#">angel</a></li>
      <li><a href="#">salmon</a></li>
    </ul>
  <li><a href="#">turtle</a></li>
  <li><a href="#">elephant</a></li>
</ul>

Code:

li {height: 20px; list-style-type: none;}
li.here {list-style-type: disc;}

If a user is on the page fish, they will see that bullet point to page salmon.

Any recommendations?

Is it possible to change the bullets of an unordered list when you hover over the <li> element using CSS?

I've tried something like this..

Code:

#ulist ul{
	list-style: none;
}
#ulist li a{
	list-style: square;
}

the list
Code:

<ul id="ulist">
   <li><a href="#">Element 1</a></li>
   <li><a href="#">Element 2</a></li>
   <li><a href="#">Element 3</a></li>
   <li><a href="#">Element 4</a></li>
</ul>

But that doesn't work, the reason I think is because the list-style is being applyed to the <a> and not the <li> element.

If not a CSS, how would I use JavaScript to determine the <li> element and add the "square" bullet style to it?

Cheers,
Fozzy

i want to add styles to the text area content such as bold, itallic, indent, color and size (like our fourms Post new Thread text area).

how is it possible

wating for ur reply

bye

Hello All,

I wanted to ask a question. I'm having trouble with spacing between two divs. Here's the site I'm working on: johnraymondonline.com/mjbfoundation/

The problem is that I'm trying to put a 20pixel margin between the bottom footer div (that contains "test test") and the div just above it. I'm not having much luck at all. I've done a clear and also have checked the divs several times to see if I've missed any. I've even put a div between with some height and that doesn't work. I'm not sure if one of the div's above it has a fixed height.

Any help would be greatly appreciated!

Thanks!