CSS - Different Bullet Depending On Depth Of 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.

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.

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!

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?

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>

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

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>

Hey,

I've run into some trouble with a menu.

Below is my CSS:
css Code:
Original - css Code #menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; } #menu ul li{ float: left; margin: 0 5px; } #menu ul li a{ color: #CCC; display: block; font-size: 0.75em; text-decoration: none; height: 28px; line-height: 28px; }

  

 #menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; }


 #menu ul li{ float: left; margin: 0 5px; }


 #menu ul li a{ color: #CCC; display: block; font-size: 0.75em; text-decoration: none; height: 28px; line-height: 28px; } 

As you can see, this is a horizontal menu using an unordered list with its list items floated left. I would have used inline on the list items as I prefer it to floating in this scenario, but the links within those list items are displayed as blocks so as to allow me to properly align a background image (not included) in links of a certain class - and block elements don't go inside inline ones nicely.

This is just fine in modern browsers. However, IE6 displays the links at 100% width (whereas other browsers contain the link text nicely), which ends up displaying the horizontal menu as a vertical list.

I'd rather avoid assigning a width to each menu item (that does fix the problem, but it's messy and harder to update). That's the only fix I've come up with.

Please let me know if you need any further information - otherwise, thank you in advance for any assistance!

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

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!