CSS - Problems Using A Bg Image As A Bullet........

Can a bulleted list be split in to two collumns? and if so how? I've tried wrapping the list in <div>'s and trying to force it with margins and widths but can't get the result.

For example:

Code:

<ul><li>stuff1</li><li>stuff2</li><li>stuff</li><li>stuff3</li><li>stuff4</li><li>stuff5</li></ul>

stuff1 stuff2
stuff3 stuff4
stuff5

I've had a good look around for a solution and I've tried applying them to no avail.

I can't get the bullet lists to show in ie7 in the block on the right (they show fine in the content (on CV page) :

92 dot 48 dot 108 dot 113 /~legal

Any ideas?

Also, any quick design hints to improve the site?

I'm having an issue with a bullet, on www.wirelessguy.net
The last bullet isn't showing for some reason. Here is my HTML and CSS. When I take the class off of the HTML the bullets show up fine.

Code:

<ul class="phoneOneSpecs">
            <li>Color Display</li>
            <li>External Caller ID</li>
        	<li>Voice Activation</li>
            <li>Wireless Internet Access(WAP)</li>
        </ul>

Code:

.phoneOneSpecs, .phoneTwoSpecs, 
{
	position: absolute;
	top: 5%;
	right: 8%;
	font-size: 12px;
	list-style-type: circle;
}

Hi Guys,

I have what i think is a rather odd problem and i have not seen it before.

I have just finished creating a wordpress template for my blog which can be found at http://www.mobileshop.com/blog i have pretty much got everything sorted (except Safari pushing the RSS info down) but i have one strange problem in IE.

If you look on the right hand bar in a non IE browser you can see that the lists all have a little icon of a phone as the bullet points. Now if you switch to IE then you will see that the first item of each list is missing the phone icon. Even if i swap it back to normal bullets it still misses the first one off.

The <li>'s all seem structured fine in the html and my css is as follows...

Code:

#rightbar ul li ul {
	background: #fff url(images/cat-bg.gif);
	background-repeat: repeat-y;
	color: #03036a;
	padding: 8px;
	margin: 0;
	margin-top: 0;
}
#rightbar ul li ul li {
	margin: 0;
	margin-left: 20px;
	padding: 0;
	line-height: 20px;
	list-style-image: url(images/phone-bullet.png);
	background: none;
	font-size: 120%;
	width: 210px;
}

I know its probably not the best code but i cannot for the life of me work out why IE does not display the icon for the first <li> item, anyone have any ideas?

Thanx

Hi everyone,

Just two really quick questions.

Is there a way to get the list-style-image property to work for in-line unordered lists? And is there a way to remove the first bullet in the list?

Thanks for any help.

Is it possible to make the bullet go on the right hand side of the list item rather than on the left?

is it possible to change the bullet point color only of a list?

Hi again, fellas.

I have another annoyance. I've added some bullets that I want text right next to. I can't get the text to line up directly next to the bullets.

I've bordered the two problem div's to make it easier. Could ya'll have a look, please and tell me what is wrong?

http://www.bartlett-family.net/test2

Thanks!

Chris

I'm using an external style sheet and a Drupal site. I am pretty much of a CSS novice. No matter what I do, the default bullet is displaying. Sometimes, in the CSS stylesheet, I can have a graphic show up, but the regular bullet is showing as well.

I want to make a separate bullet that I can use just on certain pages.

It's on the home page of invisibleillnessdocfinder dot com

I don't see anywhere to upload the style sheet to show the code. There is a template, so even though I'm putting "List-style=none" the default tiny bullet shows up.

I'll be glad to email the stylesheet to anyone who can help.

Thanks,
Susan

problem fixed, please delete this post

every time i upload a picture through html or css it affects other images around it or creates a big gap how do i avoid this......also for a template im i best to use individual pictures or make the template all as 1 photo

Hi
I have a two curved images. They sit fine on the webpages in FF but there is a gap in IE.
I have tried allsorts of things to get it sorted but nothing seems to work.
Have a look at me code:
PHP Code:
<div class='main'>
            <div style='float:left;'><img src='images/left_corner.gif'  alt='left_corner' /></div>
            <div style='float:right;'><img src='images/right_corner.gif'  alt='right_corner' /></div>
                <div class='proheader'>Problem with images</div>
        </div> 




And heres the CSS code:
PHP Code:
.main{
    position:absolute;
    top:125px;
    left:140px;
}

.proheader{
    background-color:#0099CC;
    font-size:12px;
    font-weight:800;
    height:19px;
} 




The file can b found at :
http://pfwd.org.uk/sfd/image_problem.htm
Please help
Thanks

My site is displaying properly and in good way to the bullet that i've used in menu in FF. But in IE 7 bullet and text is too close which make menu un attractive. How can i fix this? any suggestion. if you want you can see nepalmedia . com . np

thanks.

Hi

I've been trying make an <a> anchor nested within a <li> list tag appear on the same row as the bullet, with no avail.

It's hard for me to explain exactly, so I've uploaded two images:

This is how I'd like the list items to appear, substract the extra list item which I have no idea why it appears the
Image 1


This is how the list items appear:
Image 2


Here's the HTML:
Code:

    <div id="primary-sidebar">
      <div class="shadow">
        <div class="tlc"></div>
        <div class="trc"></div>
        <h2 class="box-title">
          Games list
        </h2>
        <div class="box-content-lhz">
          <ul id="games-list">
            <li>
              <a href="/intersection.html?anarchy_online">Anarachy Onlins</a>
            </li>
            <li>
              <a href="/intersection.html?Aion">Aion</a>
            </li>
            <li>
              <a href="/intersection.html">Aries Online</a>
            </li>
            <li>
              <a href="/intersection.html">Cabal Online</a>
            </li>
            <li>
              <a href="/intersection.html">Eve Online</a>
            </li>
            <li>
              <a href="/intersection.html">Guild Wars</a>
            </li>
            <li>
              <a href="/intersection.html">Harrier</a>
            </li>
            <li>
              <a href="/intersection.html">Jaxsos' world</a>
            </li>
            <li>
              <a href="/intersection.html">Kal Online</a>
            </li>
            <li>
              <a href="/intersection.html">Lemmings</a>
            </li>
            <li>
              <a href="/intersection.html">Leiviathan Online</a>
            </li>
            <li>
              <a href="/intersection.html">Party Online</a>
            </li>
            <li>
              <a href="/intersection.html">World of Warcraft (US)</a>
            </li>
            <li>
              <a href="/intersection.html">World of Warcraft (EU)</a>
            </li>
          </ul>
        </div>
        <div class="blc"></div>
        <div class="brc"></div>
      </div>
    </div>

Here's the CSS
Code:

ul {
	padding-left: 2em;	
	list-style: square;
}
#games-list {
	list-style-image: url("/_images/bullet1.gif");
	list-style-position: inside;
	margin: 0px;
	padding: 0px;
}
#games-list li {
}
#games-list a{
	font-weight: bold;
	font-family: verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	color: #424547;
	text-decoration: none;
	display: block;
	background: url(/_images/sprite-list.png) top left no-repeat;
	padding: 5px;
	padding-left: 20px;
}
#games-list a:hover{
	background-position: left -40px;
	color: #00a2ff;
}

I'd appreciate anyway help at all, as this has been on my mind for a while.

ok i have a list that has style:none. this list is a link.. now whenever a user wants to hover over it i want to add a pointer (arrow perhaps) on the left of the list...

Code:

#menu li  {
list-style:none;
}
#menu a, #menu a:visited {
	text-decoration:none;
	color:#0033FF;
}
#menu li a:hover {
list-style-image:url(images/pointer.jpg);
}
#menu a:hover {
	
	background-color:#0033FF;
	color:white;
	font-weight:bold;
}

now html
Code:

<ul>
		<li><a href="home.php">Home</a></li>
</ul>