CSS - Multiple Bullet Types In Unordered List

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.

Apologies for such a novice question.

I'm creating a few Ordered and Unordered Lists and some of the List Items wrap to a second or third line. My additional lines are wrapping out to the left margin of the number or bullet, rather than wrapping only to the left margin of the text in the first line.

What is the command to style List Items to wrap so that the text all aligns left on the same margin, rather than aligning with the bullet or number?

Here are a couple of questions, all are in reference to THIS LAYOUT

1) There seems to be an Internet Explorer issue where bullets don't always show up on list items, any ideas how to fix this?

2) It wont validate in XHTML simply because of two urls I use, anyone have any hacks as to how to fix this?

3) I've only been able to test on IE and Firefox, so if anyone is on a different browser and can let me know of any other issues it would be amazing.

Thanks in advanced!

Hi,
I'm just diving in to CSS layout and gradually working through CSS IE bugs. I'm having so much trouble sorting this one out though!

I've got a fairly standard menu using UL and LI in a left hand container. Everything displays nicely in Firefox 1.5 and looks ok - initially in IE6 until you hover over the menus. In Firefox they change background colour and font colour as I want, however in ie6 when you hover the background doesn't change colour and the menu all squishes up together!

Where am I going wrong??

Here's the CSS for the elements:

Code:

#leftcol{
	float:left;
	padding: 0;
	width: 170px;
	background-color: #FFFFFF;
	
}

#SectionNav {
	background-image:url(../assets/images/sectionNavBack.png);
	background-repeat: no-repeat;
	background-color: transparent;
	width:150px;
	height: 323px;
	left: 0px;
	top: 0px;
	padding-left: 0px;
	display: block;
	
}

#SectionNav ul{
	margin-top: 0px;
	padding-top: 25px;
	
	background-color: transparent;
	list-style-type: none;
	font-size: 80%;
	list-style-image: url(../assets/images/ballBullet.png);
	display: block;
}

#SectionNav ul li a{
	color: #FFFFFF;
	display: block;
	margin-top: -5px;
	padding-botton: 10px;
	margin-bottom: 10px;
	text-decoration: none;
	height: 21px;
	background-image: url(../assets/images/SectionBtnBack.png);
	font-weight: 200;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#SectionNav ul li a:hover, #SectionNav ul li a:focus { 
	background-color: #0000FF;
	color: #FFCC00;

}

Here's the HTML:
Code:

<div id="leftcol">
<div id="SectionNav">
  	<ul>
		<li><a href="index.php">Home</a></li
		>
		<li><a href="#">News</a></li
		>
		<li><a href="#">Handicaps</a></li
		>
		<li><a href="#">Leaderboard</a></li
		>
		<li><a href="#">Competions</a></li
		>
		<li><a href="#">Media</a></li
		>
		<li><a href="#">Courses</a></li
		>
		<li><a href="#">Links</a></li
		>
	</ul>
  </div>
<!--End of SectionNav-->
</div>

I've played around with the various margins etc but no joy.

The page can be found at:

http://beta.sussexeast-gs.org.uk/index.php

Excuse the colours they're there to help me with layout for now.

Thanks

How do I remove the indenting that happens on a UL with CSS? I want a vertical list but I don't want it to indent as it messes up my design.

I'm hoping I can get a bit of help addressing the display of an unordered list. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance.

CSS --------------------------------
#pages {
margin-top: 12px;
float: right;
margin-right: 125px;
font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
color: #000;
}

#pages ul {
list-style-type: none;
margin: 0;
padding: .5em 0;
display: inline;
}

#pages li a {
display: block;
width: 1.5em;
height: 1.5em;
padding: 0;
text-align: center;
vertical-align: text-middle;
text-decoration: none;
}

#pages a:link, #pages a:visited {
margin: 0 10px 0 10px;
text-decoration: none;
color: #000;
}

#pages a:link#pagescurrent, #pages a:visited#pagescurrent {
border-bottom: 1px solid #000;
background: transparent;
color: #000;
}

#pages a:hover {
background-color: #949494;
color: #fff;
}



HTML --------------------------
<div id="pages">
<ul>
<li><a href="#" id="pagescurrent" title="next slide">1</a></li>
<li><a href="#" title="next slide">2</a></li>
<li><a href="#" title="next slide">3</a></li>
<li><a href="#" title="next slide">4</a></li>
</ul>
</div>

I'm trying to change the list style from 'disc' to 'none' for some sections of my site, and I'm running into problems. The page in question is found at

luv . deepwaterchurch . com

then click on "Global Partners"

I'm trying to hide the discs for the lists in the twitter feed (left column) and the news feeds (inline in the main content)

I've tried adding list-style:none to what I think are the appropriate elements in my stylesheet, but nothing is working. I'm sure it's a simple fix, but I can't find it.

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>

I am creating a website for a game (unnamed so far) the template is located at syckgamingleague(dot)com in Firefox this site looks perfect works extremely well. In Opera the navigation doesn't seem to be working like I want it. In IE it seems as if everything that should be vertically aligned to the middle doesn't appear to do that.

I am just looking for a fix for the Opera navigation error currently but if you know the cause of the IE problems and would like to help that would be great.

The website is located at the URI: syckgamingleague(dot)com

I will include images for the display of each of the browsers mentioned above.

Firefox at the above link in root folder Firefox_Polkamon.jpg

Opera at the above link in root folder Opera_Polkamon.jpg

IE at the above link in root folder InternetExplorer_Polkamon.jpg

Sorry for no links but this forum would not allow it.
Name for game isn't Polkamon it is more of a codename than anything currently game isn't named.

Hello all,

I'm a relative newbie with css, so any help is greatly appreciated. I am trying to come up with some xhtml/css that can appropriately display several images and text inside of an unordered list. For example, say I have this:

Code:

<ul>
  <li>TEXT<img />TEXT<img /><a>LINK</a></li>
</ul>

I am trying to come up with a way that the text inside the <li> tag always is displayed at the same level as the top of the text, if that makes sense. Also, I'd like the list element to be of uniform height and width. Finally, I'd like the second image and link to be all the way to the right of the list element. Here's what I've got so far:

Code:

<ul style="vertical-align: top; list-style: none;">
  <li id="li_1" style="list-style:none;">
    <span style="width:150px; vertical-align:text-top;">1.) 
      <img src="/images/document.png" height="40px"/>TEXT
    </span><span style="float:right">
      <img src="/images/close.png" height="40px" />
      <a href="#" onclick="return false;">[Edit]</a>
    </span>
  </li>
</ul>

Simply put, this currently looks like crap. Any suggestions? Thanks in advance.

Hi,

I am using linked-in stylesheets for my webpage and have an unordered list, which is inside a div, for the phone number and email address (which is an email link) which are in the top right corner of the page. The whole page is in a container div.

I am trying to 'text-align' these two <li> elements to the right, the phone number does this but the email link just won't move to the right and is staying on the left! I have put the 'text-align: right' attribute for the 'ul' and the 'li' and the 'a' but to no avail.

The weird thing is, I also have an undordered list for my navigation which is also on the same page, running horizontal on the left side of the page, but these seem to work fine for the alignment (each link is centered nicely in their boxes).

Why won't the email link align right?!

My stylesheet code:

#garden-designer-contactbar ul {
display: block;
position:absolute;
text-align: right;
font-size: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
left:541px;
top:0px;
width:179px;
height:51px;
margin: 0;
padding: 0;
list-style-type: none;
z-index:6;
}

#garden-designer-contactbar li {
display: block;
text-align: right;
}

#garden-designer-contactbar a {
display: block;
position:absolute;
text-align: right;
font-size: 12px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
font-weight: normal;
}


My page code:

<div id="garden-designer-contactbar">
<ul>
<li>020 0000 000</li>
<li><a href="mailto:email@email.co.uk?subject=Garden Design" title="email Garden Design" align="right">email@email.co.uk</a></li>
</ul>
</div>

Does anyone know what might be going on? My container div for the whole page is set to 'text-align: left' but I tried removing that attribute and it just made other text on the page that wasn't specifically aligned, centre. And the email link seemed to stay where it was.

Any help much appreciated!

Hello all-
I have news headlines set up to display in a list. Each headline starts and ends with a quote. When a given head wraps, the next line begins directly under the quote mark:

"This is Headline 1"
"This is Headline 2 and When It Wraps,
the First Line Falls under the Quote Mark"

Ideally, I'd like to have the initial quote mark in each head hang out from the text, so that wrapped lines in that list item align underneath the first letter, rather than the quote mark.

Is it possible to use a character, i.e., the quote mark, as a list marker?
Thanks in advance...

- Tom Tedeschi