CSS - Problems With Unordered Lists

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

I can't seem to find any issues of this on the web, or maybe I'm not doing a correct search. here's my problem.

I'm creating a horizontal menu with an unordered list <ul> with each <li> tag using a background image. My problem is, in IE (both ie6 & 7), the menu seems to display having a staggered cascading effect. Firefox works great as usual...

see screenshot at http://clubsix1.com/images/cascade_effect.png

Here's my CSS code:

Code:

#masthead ul#mystuffnav {
	padding:0;
	margin:0;
	width:334px;
}
#masthead ul#mystuffnav li {
	float:left;
	margin-bottom:1px;
	clear: both;
}

/* Fancy Buttons, My Stuff Nav */
#masthead ul#mystuffnav a.button,
#masthead ul#mystuffnav a.button:link,
#masthead ul#mystuffnav a.button:visited {
    padding:3px 7px 5px;
    text-decoration:none;
    outline:none;
	/*display:block; OQO */
    font-size:10px;
    float:left;
    text-align:center;
    margin:0 1px 0 0;
    line-height:1em;
}

Help is GREATLY appreciated! =)

Quick question...

I am trying to make an unordered list and have the first level have no indent/margin. But I want the second level to be indented 15 pixels. I'm having problems getting this done. Any suggestions?

Thanks

www.l33tmonkey.com/sun/index.html

completely ignoring the image issues, which are next on the list to sort out, I have a problem.

I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them

So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire.

the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS

I've got an odd bug in IE7 that's got me completely stumped.

I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it.

My main page works just fine.

Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container.

The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on.

I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated.

eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something.

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.

Hi Everyone,

I'm new to the forum and somewhat new to CSS.

I am developing a simple webpage that has a horizontal unordered list serving as a navigation bar.

Firefox adds what looks like about 20px of extra space above and below the entire list while internet explorer shows it aligned top left.

Eventually I would like to center the unordered list top and bottom, but I can't seem to get any alignment formatting to work at all.

Here is the problem code:
Code:

<div id="navbox">
	<ul id="navbar">
    <li><a href="index.html">HOME</a></li>
    <li><a href="http://showrooms.canadatrader.com/7010/7622">INVENTORY</a></li>
    <li><a href="formapp.html">APPLY NOW</a></li>
    <li><a href="mailto:rjtria@gmail.com">EMAIL ME</a></li>
   </ul>
  </div>

And the corresponding CSS:
Code:

#navbox {
	background-color: #B1C5D0;
	height: 50px;
	width: 760px;
	overflow: visible;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
	color: #036;
	font-weight: bold;
	font-size: 130%;
	font-family: "Courier New", Courier, monospace;
	line-height: normal;
}
#navbar li {
	display: inline;
	list-style-type: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	padding-right: 10px;
	padding-left: 10px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

I know it's not much.. but it's making me crazy.
I have tried zeroing out all padding / margins to no avail...

Any help would be greatly appreciated!!
Thanks in advance!
Celeste

OK i have a nested list:

PHP Code:
<div id="sideMenu">
        <ul>
            <li><a href="">Menswear</a>
          <ul>
            <li><a href="">Shalwar</a></li>
            <li><a href="">Shalwar2</a></li>
         </ul>            
        </li>
        <li><a href="">Womenswear</a></li>
        <li><a href="">Jewelry</a></li>            
    </ul>
</div> 





i am applying css to it! i want to set the background of the LI to be one colour but i want the background of the nested lists to be another. but what is happening (and its not really a bug) is that whne i apply the background colour to LI this colour also goes behind the nested lis?

http://www.zahra-zahra.com/fullpage.html i am talking about the side menu (purple and light purple) is there a "fix"?

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'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

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!

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>