CSS - List Bullet Image Displaying Differently In Ie

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>

Is there a way to decrease a default spacing between bullet and text in <ul>?

Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines.

Hello,

I've created a menu by using an unordered list. Some of the list's items have submenus which is done with another unordered list nested inside the first. So my menu/list would look something like this:

( XX = the bullet image )

Code:

XX Item 1
XX Item 2
XX Item 3
      XX Item 3-1
      XX Item 3-2
XX Item 4

I was wondering if it is possible to use a different bullet image for the nested/indented unordered list? So the menu/list would now look like:

( XX and ZZ = the bullet images )

Code:

XX Item 1
XX Item 2
XX Item 3
      ZZ Item 3-1
      ZZ Item 3-2
XX Item 4

My existing code is:

Code:

<ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li>Item 3
         <ul>
          <li><a href="#">Item 3-1</a></li>
          <li><a href="#">Item 3-2</a></li>
          </ul>
        </li>
        <li><a href="#">Item 4</a></li>
        </ul>

And my existing ul CSS is:

Code:

ul {
	list-style-position: outside;
	list-style-type: square;
	margin-left: 18px;
	margin-bottom: 0px;
	padding: 0px;
	list-style-image: url(/graphics/layout_05/list_bullet.gif);
	margin-top: 0px;
	margin-right: 0px;
}

Thank you for any and all help!

when using unordered lists, is there any way to get more than 3 different bullet designs as you go into deeper nests? after the 3rd nest, the same bullet design is used over and over again.

Hi all,

Probably easy, but I'm stumped...

At this test page, I have now included a little horizontal image spacer image IN the list on the right. You'll notice that it has a bullet just like the text links do.

I want the image right where it, preferably with no space above or below it between the "Resume" & "I Can Help" links. If I close the UL tag after Resume, then re-open it before I Can Help, the gap is too big. So I threw the image directly into the list!

But I gotta kill the bullet.

How?

CSS FILE.

Thanks!

Chris

I've used bullet image for a list but it give more indent then i want to use. I've checked the padding and marging for the other DIV ID's and set all to zero but also there is more indent in the left side. How is it possible to reduce the left indent for the list?

Code:

.test1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	height: 15px;
	color: #003366;
	text-align: left;
	list-style-image: url(bullet1.gif);
	border: 1px solid #000099;
	list-style-position: outside;
	width: 150px;
	margin: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#test2{
	width:215px;
	background-image: url(1bg-menu-v-mid.gif);
	background-repeat: repeat-y;
	border: thin solid #000066;
	float: left;
}

I'm trying to add "shadow" (which is in fact, an image) effect behind the border of my "centerContent" (i.e. the area where the main description text lies).

Presently looking page can be seen on:

http://allinclusivewebdesign.byetho...esign/about.php

The related CSS code is:

Code:

#centerContentContainer
{
	width:100%;
}

#centerContentShadow
{
	background:url(content-shadow.jpg) #FFFFFF;
	width:760px;
	float:left;
}

#centerContent
{
	background:url(contentbackground.jpg) #FFFF00;
	color:black;
	text-align:center;
	position:relative;
	width:700px; 
	margin-left:30px;
	float:left;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
}

And to display it within each html files, I've got:

Code:

<div id="centerContentContainer">
<div id="centerContentShadow">
<div id="centerContent">

Now, the problem is, it looks differently in my Firefox & Internet Explorer browser. In Firefox it displays perfectly well (except the "bottomMenu"), as it can be seen from:

http://allinclusivewebdesign.byetho...esign/about.php

while in Internet Explorer this "centerContent" drags down.

In addition, in Firefox AND Internet Explorer, my "bottomMenu"'s width gets change to the same width as the "centerContent" itself rather than the 100% width, as it was displaying earlier (http://allinclusivewebdesign.byetho...esign/about.php)

I wonder if anyone around could possibly point me in the right direction to get the desired output, since all I want is just the shadow image displaying behind the "centerContent" i.e. around the left & right border.

Hi everyone

A bit of a call for help with some niggly issues - all found on the following page and css:

http://www.crashingbydesign.com.au/rsaa/index.html
http://www.crashingbydesign.com.au/rsaa/home.css

1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!!

2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on??

All help appreciated.

Cheers

Bevester

I have a <ul> which uses a list-style-image as a bullet, positioned outside. In FF this works fine, but in IE the bullet sometimes displays, sometimes appears obscured. It doesn't appear to be the flickering effect that other posts about bullets have mentioned. It is static and changes only on refresh.

Code:

#content ul {
	list-style-image: url(../assets/bullet.gif);
	list-style-position: outside;
	color: black;
	vertical-align: middle;
}
#content li {
	color: black;
	line-height: 1.8em;
	font-size: 12px;
}

Code:

<div id="content">
    <ul>	  
      <li>organisational development, training and coaching</li>
      <li>learning</li>
      <li>children's services</li>
      <li>evaluation and qualitative research</li>
      <li>public sector policy, strategy and enterprise</li>
      <li>partnership support and communities projects</li>
      <li>working with difficult and complex issues</li>
      <li>building capacity and capability</li>
    </ul>
</div>

It happens on a couple of other computers too. The page is XHTML 1.0 Strict. I tried to use a background image instead but would prefer not to do it this way.
Any advice would be good. Page is at sample page

I have followed several tutorials for using a bg image as a bullet and I can't figure out why it isn't working.

Here is the webpage

These are the items that should have a custom bullet (an upside down blue triangle)

Introducing the New ATS/ERS Standards
Spirometry Training is Essential

Guidelines for COPD Emphasize Spirometry Training
COPD: Make Your Goal Early Detection by Tom Petty

Here is the css:
Code:

#newsletter ul {
	padding: 0;
	list-style: none;
}

#newsletter li {
	margin-left: 30px;
	background-image: url(../images/bullet.gif) repeat-n;
}

Here is the xhtml:
Code:

	<div id="newsletter">		
		
	  	<h1>Vitalograph Newsletters</h1>
		
		<div class="row"> <span class="imgLeft"><a href="/pdfs/newsletters/vitalink_fall2005.pdf"><img src="../images/vitalink_fall2005.jpg" alt="vitalink spirometry newsletter" width="125" height="161" border="0" lowsrc="/pdfs/newsletters/vitalink_fall2005.pdf" /></a></span> 
          <h2>Vitalink Newsletter</h2>
			<ul>
				<li>Introducing the New ATS/ERS Standards</li>
				<li>Spirometry Training is Essential</li>
			</ul>

       <span><a href="/pdfs/newsletters/vitalink_fall2005.pdf" target="_blank">Vitalink 
        Fall 2005 (pdf 583 KB)</a></span>
		
		<ul>
		    <li>Guidelines for COPD Emphasize Spirometry Training</li>
			<li>COPD: Make Your Goal Early Detection by Tom Petty</li>
		</ul>
        <span><a href="/pdfs/newsletters/vitalink_spring2005.pdf" target="_blank">Vitalink 
        Spring 2005 (pdf 583 KB)</a></span> 
		</div>
		
		<div class="row">
        <h2>Pharma Newsletter</h2>
		
			<p>The Pharma Newsletter provides up to date information on Vitalograph's latest respiratory 
			clinical trials products and services, news about our people and where you can meet us. 
			It also highlights important new legislation and other relevant news in the industry that 
			we hope will be a useful resource for you. </p>
			
			
          <p><a href="/pdfs/newsletters/pharma_newsletter_jan2006.pdf" target="_blank">Pharma 
          January 2006 (pdf 76 KB)</a></p> 
		  
		  <p><a href="/pdfs/newsletters/pharma_april2006.pdf" target="_blank">Pharma 
          April 2006 (pdf 49 KB)</a></p>
		  
		   </div>
		  
		  <div class="line"></div>
		
		</div>

How do I prevent my bullet points overlaying the image? When the image is floated to the left, strange things happen to the <li> items. They seem to ignore the image.

This will probably make more sense if you try the code below with an appropriate image.

I can get around this problem by using table formatting, but I am trying to learn a CSS alternative.

Here is the code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
	<p>Hello</p>
	<ul>
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
	</ul>
	<img src="http://www.selestial.com/resources/image2.jpg" alt="any old image" style="float:left;"/>
	<p>Hello</p>
	<ul>
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
	</ul>
	<p>Hello</p>
	<ul>
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
	</ul>
</body>
</html>

I've got a unordered list, with a background image on the li a:link selector. I also need to replace the default bullet with an image BUT the image needs to display to the right of the <li> text. Is this possible? The image needs to appear immedately after the text (not aligned at the edge of the list or column).

So, for example,

list item i [img]
list item 2 with longer name [img]
list time 3 with short [img]


The list is generated dynamically, I cannot simply add the image to the list item text. Any help would be much appreciated - thanks!

I have a list that I've created with the list-style-type being an image.

For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly?

Below is the code. The cell that these lists sit in has has an id of 'cellid'.

Code:

#cellid {
margin: 0 0;
padding: 0 0;
}

#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}

#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}

The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space?

Thanks,

Brian

Here is a quick visual layout of my page

(container)
(div banner)
(div left column) (div middle content) (div right column)
(div footer)

In my (div left column) is a list that is aligned right which works great. However, lower in the (div left column) I wish to make another list and align it left. The problem is it won't align all the way to the left. It stops at about the center of the div. I didn't notice it on the first list because it aligned right just fine but it also stops in the middle.

Here is the HTML:
(go easy on the coding, I'm still pretty new at this stuff)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="css/common.css" type="text/css" media="screen" />
<title>Las Vegas Floor Care</title>
</head>

<body id="body">
<div id="container">
<div id="banner">
</div>
<div id="content">
<div id="content_left">
<div class="links">
<ul class="list">
<li><a href="index.htm"><span class="list_big">H</span>OME <span class="list_big">P</span>AGE</a></li>
<li><span class="list_big">R</span>ESIDENTIAL</li>
<li><span class="list_big">C</span>OMMERCIAL</li>
<li><span class="list_big">C</span>ONTACT <span class="list_big">U</span>S</li>
</ul>
</div>
<div class="special_offers">Special Internet Offers</div>
<img class="image_center" src="images/coupon.jpg" />
<ul class="list_offers">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
<div id="content_middle">
<div id="content_middle_top">
</div>
<p class="text"><img src="images/slogan.jpg" style="float:left; margin-right:2px" /> At Las Vegas Floor Care we use Prochem truck mount extractors, which have been rated number one for over 30 years. We also use the Bridgpoint brand of treatment solutions that are eco friendly, pet friendly, and are even biodegradable. We offer carpet repair, cleaning, and protection making you get more out of your carpet no matter what the situation. We also offer 3 different types of tile cleaning to fit the condition of your tile and your pocket book.</p>
<br />
<p class="text">We cater to all aspects of cleaning ranging from the average home owner who wants clean floors to the executive who needs to keep their office in tip top shape, and everything in between. There is no job too big or small. We offer several service packages for home owners with yearly service contracts.</p>
<div id="content_middle_bottom">
</div>
</div>
<div id="content_right">
<img class="image_center" src="images/contact.jpg" />
<div class="side_text">If you have questions or would like to schedule a cleaning, please contact us at <span class="contact_number">(702) 756-0148</span>.</div>
</div>
</div>
<div id="bottom">
<img src="images/bottom_top.jpg" align="top"/>
<p class="bottom_text">
Phone: (702) 756-0148
<br />
Fax: (206) 350-7320
<br />
</p>
</div>
</div>
</body>
</html>

Here is the CSS:

Code:

#banner {position:relative; width:700px; height:130px; clear:both; background-image:url(../images/banner.jpg)}

#body {text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/bg.jpg); margin-top:20px; background-position:center}

#bottom {position:relative; text-align:right; width:700px; clear:both; background-color:#970000}

.bottom_text {font-family:Calibri; font-size:14px; text-align:right; margin:0px 8px 0px 4px; color:#CCCCCC}

.contact_number {font-family:Calibri; font-size:12px; color:#970000}

#container {width:700px; margin-left:auto; margin-right:auto; text-align:left}

#content {position:relative; width:700px; overflow:auto; background-image:url(../images/content_bg.jpg); background-position:center}

#content_left {float:left; width:138px; margin-right:5px; clear:left}

#content_left_bottom {width:138px; background-color:#FF3399}

#content_left_top {width:138px; background-color:#FF3399}

#content_middle {float:left; width:414px}

#content_middle_bottom {width:414px; height:100px; background-image:url(../images/middle_bottom.jpg)}

#content_middle_top {width:414px; height:30px; background-image:url(../images/middle_top.jpg)}

#content_right {float:left; width:138px; margin-left:5px; clear:right}

#content_right_bottom {width:138px; background-color:#00FF00}

#content_right_top {width:138px; background-color:#00FF00}

.image_center {margin-left:auto; margin-right:auto; text-align:center; display:block}

.links a:link {text-decoration:none; color:#666666}
.links a:visited {text-decoration:none; color:#666666}
.links a:hover {text-decoration:underline; color:#970000}
.links a:active {text-decoration:none; color:#970000}

.list {font-family:Calibri; font-size:14px; list-style:none; text-align:right; margin:0px 4px 20px 4px; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#666666; padding-bottom:10px; padding-right:4px; color:#666666}

.list_big {font-family:Calibri; font-size:18px}

.list_offers {font-family:Calibri; font-size:12px; list-style:none; text-align:left; margin-left:0px; overflow:auto; color:#666666}

.side_text {font-family:Calibri; font-size:12px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}

.special_offers {font-family:Calibri; font-size:18px; text-align:center; margin-left:4px; color:#970000}

.text {font-family:Calibri; font-size:14px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}

Thanks ahead of time for any help.

Hi,

I'm using a right-to-left layout and I can't find a way to display my list items correctly on Firefox. When I insert something into the rtl div with a float, the list item does not wrap correctly.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
<!--
#content {
margin:0 200px 0 20px;
border: 2px solid #000;
direction:rtl;
}
#floatdiv {
width:100px;
height:100px;
margin:10px;
border: 1px solid #000;
float:left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="floatdiv"</div>
<p>This is a test</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>

Is there a problem in my code?

Thanks,

Ehud.