CSS - Inline List Items Displayed Vertically

whats the CSS for creating an unordered list that goes across the page rather than down with no bullet points?

Ok, i have this menu with links, but i have a few problems.

1) Don't know why, but i can't center the menu links. There is more space from left to the menu, than from the right to the end of the menu.

2) I'd like to change the properties of each link (using CSS) individually, so i can resize each one like i want. I've done it, but it nly worked in IE.

here's the site

PS: I still haven't converted pictures to .gif, so it takes a little bit to load all pictures (3).

Hi all,

Im hoping someone out there can help me.

Ive just discovered ive made a massive mistake by designing my site and viewing it in IE. It looks fine in IE, but of course there is one part that looks terrible in FF ( not FFs fault i know!)

The navigation bar is an inline list that is supposed to appear tabbed but in FF one of the tabs is pushed up a lot higher and I cant figure out what is pushing it up. i thought it might be the #ul secondary pushing it up (as this appears a bit wonky as well...)and i tried adding /* Hides from IE-mac \*/

#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */

but this didnt change anything. i tried using the DOM inspector that comes with firebug but I still cant figure out whats pushing up the one home page tab....

Any tips anyone might have would be greatly appreciated.



My style sheets is




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

2 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#content-container-two-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;
position:relative;
margin-bottom: 50px;
}

#content-main-two-column {
width:728px;
float:left;
}

#content-side-two-column {
float:right;
width:160px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

3 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-three-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;


position:relative;
}

#content-main-three-column {
width:355px;
float:left;
margin-left:25px;
}

#items-left {
width:148px;
float:left;
margin-right: 45px;

}

#items-right {
width:148px;
float:right;
margin-right: 45px;

}





#content-side2-three-column,
#content-side1-three-column {
width:150px;
font-size:1.1em;
}



#content-side2-three-column {
float:right;
}

#content-side1-three-column {
float:left;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

index page

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#three-column-container {
background:url(../../images/bg-three-column-home.png) repeat-y;
padding:0;
margin:20px 0 10px 0;
}

#three-column-side1 {
float:left;
width:148px;
margin-right: 45px;
}

#three-column-side2 {
float:right;
width:142px;
background-color: #E9E9E9;
padding-left: 2px;
padding-right: 2px;
}
.centre {
background-position: center;
margin-bottom: 5px;
text-align: center;
padding: 0px;
}


#three-column-side22 {
float:right;
width:148px;
}

#three-column-middle {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


#three-column-middle-air {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

html

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body {
margin:0px;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.4em;
color:#666666;
}

p {
margin:10px 0;
}

p.no-padding-no-margin {
padding:0;
margin:0;
}

hr{
color: #E5E5E5;
background-color: #E5E5E5;
height: 1px;
border:0;
margin:15px 0;
_margin:10px 0;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

headings

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


h1, h2, h3, h4, h5, h6 {
font-size:1.8em;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.1em;
margin:5px 0;
}

h1 {
margin-bottom:0;
}

h1, h2 {
margin-top:0px;
}

h2 {
font-size:1.3em;
}

h3 {
font-size:1.1em;
}

h3.small {
font-size:1.2em;
}

h4 {
font-size:1.1em;
}

h5 {
font-size:1.1em;
}

h6 {
font-size:1em;
}


a:link {
color:#d61719;
text-decoration:none;
}

a:visited {
color:#980000;
text-decoration:none;
}

a:hover {
text-decoration:none;
}

a:active {
color:#980000;
}

#content-side-two-column a:link,
#content-side2-three-column a:link,
#content-side1-three-column a:link,
#content-side-two-column a:visited,
#content-side2-three-column a:visited,
#content-side1-three-column a:visited {
text-decoration:none;
}

#content-side-two-column a:hover,
#content-side2-three-column a:hover,
#content-side1-three-column a:hover {
text-decoration:underline;
}



.img_text {

float:left;
margin-top:0px;
margin-right:10px;
margin-bottom:0px;

}




#poster-photo-container {

margin-left:auto;
margin-right:auto;
width:750px;

position:relative;
}

.poster-photo-image {

display:block;

}


ul {
margin:0;
padding:0;
list-style:none;
}

li {
list-style:none;
background:url(../../images/list-bullet-02.gif) no-repeat 0 .8em;
padding:.2em 0 .2em 1em;
margin-left:0.4em;

}



#content-side1-three-column ul.list-of-links,
#content-side2-three-column ul.list-of-links {
margin: 0 0 30px 0px;
}

ul.list-of-links li{

background-image:url(../../images/list-bullet-01-link.gif);
}

ul.list-of-links li.current {
background-color:#E5E5E5;
}


ul.no-lines,
ul.no-lines li {
border:none;
}



.feature-area {
background-color:#6799D1;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

images

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

img {
border:none;

}

.img_footer {
border:none;
padding-right:10px;

}
.photo-border {
padding:0px;
margin-bottom:5px;
display:block;

/*background-image: url(../../images/bg-photo.png);
background-repeat: repeat-x;
background-position: top;*/
}

.photo-float-left {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:40px;

}

.photo-float-details {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:1px;

}

.image-border-none {
border:none;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

FOOTER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#footer {
margin-top:3px;
margin-left:auto;
margin-right:auto;
width:740px;
padding:.8em 0 1em 10px;
position:relative;
font-size:0.9em;
text-align: center;
}



#footer a:link,
#footer a:visited {
color:#555450;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:hover {
color:#64645c;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:active {
color:#FFFFFF;
padding:0px 0px 0px 10px;
}






.arrow {
vertical-align:middle;
}



.clear {
clear:both;
}

.none {
display:none;
}

.dent {
margin-left: 20px;
}



/*Tabs*/


html, body {
margin: 0px;
padding: 0px;
}

body {
text-align: left;
}

#Wrapper {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
width: 750px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#Container {
background-color: #FFFFFF;
color: #333;
clear: both;
margin: 0px;
padding-top: 2.2em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 750px;
float: left;
border-top: 1px solid #C0C0C0;
display: block;
}




#Content {
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C0C0C0;
padding-bottom: 20px;
margin: 0px;
width: auto;
height: auto;
}

#Navigation {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color: #333333;
position: relative;
height: 50px;
display: block;
width: auto;
}
ul#primary {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 728px;
}

ul#primary li {
display: inline;
list-style: none;
}

ul#primary a,ul#primary a.active {
width: 10em;
display: block;
float: left;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 12px;
text-decoration: none;
color: #333;
letter-spacing: .1em;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 0;
}




ul#primary a.active,ul#primary a.active:hover {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
background: #ffffff;
color: #333;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}




ul#primary a {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
background: #e8e9e1;
}

ul#primary a:hover {
margin-top: 1;
border-color: #c0c0c0;
color: #333;
padding-bottom: 3px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
background: #e9eaea;
}
ul#secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -21px;
left: 1px;
width: 100%;
}

/* Hides from IE-mac \*/
#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */



ul#secondary li a {
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}

/* Hides from IE-mac \*/
#ul secondary li a {
width: auto;
display: inline;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}
/* End hide from IE-mac */

ul#secondary li a:hover {
color: #333;
border-top: none;
border-bottom: none;
border-left: none;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background: none;
}

ul#secondary li a:active {
color: #000;
font-weight: bold;
}

ul#secondary li:last-child a {
border: none;
}

.bold {

font-weight:bolder;
color:#000000;}


#number {

width:20opx; }



And some of the html

<div id="Wrapper">
<img src="pics/logo2.gif" align="right" />
<div id="Navigation">
<ul id="primary">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="print.html">Printing</a>

<ul id="secondary">
<li><a href="about.html">About us</a></li>
<li><a href="environment.html">Environment</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</li>
<li><a href="products.html">Products</a></li>
<li><a href="cart">View Cart</a>
<li><a href="contact.html">Contact us</a></li> </ul>
</div>
<div id="Container">
<div id="Content">
<div id="poster-photo-container"><img src="pics/header6.jpg" alt="" class="poster-photo-image" /></div>
<div id="content-container-two-column">
<div id="content-main-two-column">
<h1>
Welcome to The Picture Works Printing Room</h1>

I've tried the popular tricks to figure this out, but don't seem to have the touch.

In IE, the list item is 2px taller than in FF.

page:
URL Removed

CSS:

Code:

.mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul li {border-top: 1px solid #27466c; border-bottom: 1px solid #021940; background: url('../images/menu_bg.gif') top left repeat-y; display: block;}
.mainNav ul a, .mainNav ul span {display: block; height: 17px; padding-top: 4px; font: 11px Verdana,Sans-Serif; color: #ffffff;}
.mainNav ul a:link, .mainNav ul a:visited {text-decoration: none;}
.mainNav ul a:hover{text-decoration: none; color: #9fb3cb;}
.mainNav ul ul ul a:hover, .mainNav ul ul ul ul a:hover {text-decoration: none; color: #3e5064;}
.mainNav ul ul li {border: 0; background: url('../images/sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul li {border: 0; background: url('../images/sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul ul li {border: 0; background: url('../images/sub_sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.unselected, .selected, .empty {display: block; float: left; height: 21px; width: 22px;}
.currentPage {border-right: 4px solid #000530; margin-right: 1px;}

HTML on page (it's quite heavy)

Hi, I have a list of items, but when one item goes onto the next line, It doesn't align with the text above it. Here is an example. Look at the right hand column, and notice how the list items, when they go into 2 lines, the second line aligns with the bullet point and not the text.

Anyone know how to fix this?

thanks

Hi Guys,
I am trying to incorporate a CSS file into an xml document.I have the following problem.

My XML file is:

<!-- example of an list item -->

<?xml-stylesheet type="text/css" href="styledocument.css" ?>

<document>

<employee>
<firstname>peter</firstname>
<lastname>lance</lastname>
</employee>

</document>

My corresponding styledocument css file is :

employee {display:list-item;color:red;}
firstname {display:inline;}
lastname {display:inline;}

---

Output in IE5:

peter lance
-----

The expected output should be peter and lance as list items with bullets preceding them and in red color. But my output is
peter lance in just red color without any bullets.

List-item value of the display attribute is not recognised at all.

Can u help deal with this problem!!!

Hello,
I am trying to display a three column menu (each column is a list). I created a single container. Within that I created three more containers(each about 33% width). Each internal <div> for the separate columns are set to inline. When I put text in each of the 4 pairs of <divs> they display side by side. Just fine. But If the DIV contains a list, despite the fact that the DIVs defined as inline, it still drops to the next line and things like the background color don't even render. All of the box styles are identical except for the background color.

Shouldn't the <DIV> (defined with the display:inline) let me place whatever I want inside it? Just out of curiosity, I changed the first column into a 1 item list and it sifted to the right,.I don't know what that was based on. It also seemed to act like a block display, everytning went to the next line, and the background color was ignored. But the color attribute did render. ????? I haven't seen anything discussing the issues with defining lists inside of inline DIVs. I'm working with Firefox because that follows the standards better than IE although I have to make it work w/ IE too. What did has me pounding my head is how a UL tag seems to wipe out most (but not all) of the settings for the DIV containing it.

I am thinking of making the columns each list items as a work around but I don't know why what I tried doesn't work.

Thanks!

Randy

This is an simple example:
Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#box1 {
width:100px;
height:100px;
background-color:#FFFF33;
display:inline;
}

#box2 {
width: 100px;
height: 100px;
background-color:#FF8833;
display:inline;
}

#box3 {
width: 100px;
height: 100px;
background-color:#88FF33;
display:inline;
}

#box4 {
width: 100px;
height: 100px;
background-color:#CCCCCC;
display:inline;
}

#container {
width: 550px;
height 150px;
background-color:#CC66FF;
}

li {
list-style:none;
}

</style>
</head>

<body>
<div id="container">
<div id="box1">Column 1</div>
<div id="box2">Column 2</div>
<div id="box3">Column 3</div>
<div id="box4">
<ul>
<li>Column 4</li>
</ul>
</div>
</body>
</html> 

Damn another problem good thing you guys are so helpful....

What am I doing wrong here?

css
Code:

#footer{
	position:relative;
	z-index:-1;
	margin-top:-50px;
	background-color:#666666;
	width:100%;
	height:100px;
	margin-left:auto;
	margin-right:auto;
	border-top:#000000 10px solid;
}
#footer ul{
	position:absolute;
	padding:0px;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto; 
}
#footer li{
	display:inline;
	padding:0px;
	margin:0px;
}
#footer a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	
	border-right:#FFFFFF 1px solid;
}

html
Code:

<div id="footer">
	<ul>
    	<li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
        <li><a href="#">Nav 5</a></li>
        <li><a href="#">Nav 6</a></li>
        <li><a href="#">Nav 7</a></li>
    </ul>

</div>

Just can't seem to get the list centered inside the div

I have a list, Each item has a graphic as a background image, so each li is 60px high

Some of the text is long and wraps

Some of the text remains on one line

This means the the spacing is not consistent and looks a little odd

I've tried

Code:

ul#myListId li {
     vertical-align:middle;
}

and

Code:

ul#myListId li * {
     vertical-align:middle;
}

This has no effect in any of the browsers

Hi
I'm writing here after spending a few hours searching google without luck.

I bought a "mega menu" plug in for wordpress but its acting very odd.
It generally works as it should but ive found that theres something wrong with the formatting of the drop down menus.
There is an issue where line breaks do not happen at all, and most important - list items are not shown on a new line. The content all seems to flow around its self rather than being formatted.
See attached pic:
img14 .imageshack .us/img14/964/screenshot047cr .png

I did run the css and html though a validator and it spits out hundreds of errors but i think they are pretty much only shown because its css3.

I'm really curious what would cause line breaks to not appear after list items. I had thought previously it may be the css clashing with my themes css but i tried a fresh install on a really mimimal theme and the error is still there

We have a list of items that are not lining up under each other.

The list of items is under a class 'item-list',
each individual item that is in the list is listed as an instance of the same class ''view-item view-item-RecentReviewSummary'. Each list item consists of a title (a link), a small photo to the left with labels/text wrapping around the photo on the right.

It happen when the page is wide (different monitors, resolutions etc) and in cases where the text wraps under it's photo (ie long enough text to require an extra line under the photo).
We were trying to use display: block, margins and positions to fix this. any ideas? Thank you. Some HTML/CSS following

HTML for first list item:
<div class="item-list">
<ul>
<li>
<div class='view-item view-item-RecentReviewSummary'>
<div class='view-field view-data-node_title'><a href="/millennium_park_lake_shore_walk">Millennium Park/Lake Shore Walk</a>
</div>
<div class='view-field view-data-node_data_field_small_image_field_small_image_fid'><img src="(URL address blocked: See forum rules)/files/ac_millennium_park_small.jpg" alt="Millenium Park" title="Millenium Park in the heart of Chicago" width="150" height="150" />
</div>
<div class='view-label view-label-node_data_field_reviewer_rating_field_reviewer_rating_value'>AC Rating
</div>
<div class='view-field view-data-node_data_field_reviewer_rating_field_reviewer_rating_value'>3
</div>
<div class='view-label view-label-node_data_field_description_field_description_value'>Summary
</div>
<div class='view-field view-data-node_data_field_description_field_description_value'>Check out the amazing "Cloud Gate" sculpture at
Millennium Park and then walk across Lake Shore Drive, Stroll along the Lake and then circle back through Grant Park toward Buckingham Fountain. This trip can be made easily with a wheelchair if your attendant likes to hike, however, the roughly two mile stroll may be a lot if you are on your own. Start by parking your car in the Grant Park North Parking Garage.
</div>
</div>
</li><li>

CSS: (each list item is a link, fields/labels and an image)

#view-label {}

.view-label-node_data_field_reviewer_rating_field_reviewer_rating_value {
/* AC Rating label */
float: left;
padding: 0 5px 0 0;
color: #369;
font-weight: bold;
text-decoration: italicize
}

.view-label-node_data_field_description_field_description_value {
/* Summary label */
color: 369;
font-weight: bold;
width: 350px;
padding: 4px 5px 0 0;
}


#view-field {}

.view-data-node_title {
/* attraction title value */
We thought putting code here would fix but didn't....
}

.view-data-node_data_field_reviewer_rating_field_reviewer_rating_value {
/* rating nbr */
position: relative; top;
float right;
background: url('fourstars.gif') no-repeat top left;
padding: 0 0 0 10px;
}

.view-data-node_data_field_description_field_description_value {
/* summary text */
margin-bottom: 15px;
font-size:.8em;
}

.view-data-node_data_field_small_image_field_small_image_fid {
/* image */
float: left;
margin-right: 5px;

I have an unordered list of 4 items that I have styling to be a horizontal navigation. I have set the css of the li to have a width of 25%. This works fine when the screen is full width but as I scale the browser to have a smaller width the text inside the li wrap - as to be expected. My question is, is there a way of ensuring that all 4 li's have the same height even when the content is of different lengths (thus some of the li's content do not wrap).
Also can this be done purely in CSS without the use of Jquery?
Thanks in advance

hello!
i'm trying to line up some text in my unordered list but haven't been able to figure out the CSS to make it look something like this: Code:

Accomplishments:

Job title		some job here
			another job
			yet another job

Duties			Designed company website.
			Proofread advertisements

Code:

<div id="resume">
	<h4>Accomplishments</h4>
	<ul>
		<li>Job title</li>
		<ul>
			<li>some job here</li>
			<li>another job</li>
			<li>yet another job</li>
		</ul>
			
		<li>Duties:</li>
		<ul>
			<li>Designed company website.</li>
			<li>Proofread advertisements</li>
		</ul>
	</ul>
</div>

so i tried doing stuff like Code:

div#resume ul li ul {
	position:absolute;
	top:-20px;
	left:50px;
}
div#resume ul li ul li{
	float:none
	position:relative;
}

i can't get the words, "Job title" to line up horizontally with the first list item, then have the list items listed vertically like in my example up top (i know it doesn't line up perfectly in here)
can someone correct my css??
thanks!
drGiggles

Hi,

I'm having a problem with some padding showing up oin both IE and Firefox with list items on my navbar. Please see:
http://81.17.252.110/~wallis1/new/

I want the nav items to come to the edges of the <ul> tag (want to make the white borders on the navigation items come to the edge) but there is this padding there for some unknown reason between the <ul> and the <li> items.

Please can you help as I'm tearing my hair out now,

Thanks in advance,

At h**p://www.topofferspage.com in IE6, the bullet points do not have images appearing unlike Firefox.

Before anyone says it's because of validation errors, it's not. I can turn off the offending stylesheets just fine and I get the same problem.


Little help? Why would background images not work in IE6 but every other browser?