RIGHTLIST already defined.

you can only use id once. therefore you need to change the name of the second id.

Or you might be able to get away with no id on the ul at all.

<div id="rightlist">
<ul>
<li>list one</li>
<li>list two</li>
</ul>
</div>

the only reason I can see to have an ID on the UL as well as the div is if the div contains multiple UL's that you want to style differently.

As to the line break you could give a li a class and then wack some bottom margin onto that to get the desired effect.

I already have another list hence the reason for the ID.

When I change the name of #rightlist to something else my list moves. I've included all the code for this right div section below incase the error can be spotted somewhere else.

[code]
#right{
width: 180px;
height: 350px;
float:right;
margin-left: -5px;
background-image:url(images/greyleft.gif);
background-color:#cccccc;
}
.righttext{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
margin:30px 3px 0px 15px;
}
/* rightlist */
#rightlist{
color: black;
margin:0px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
text-align:left;
float:left;
padding-left: 8px;
}
#rightlist li
{
list-style: none;
}
/* bottomlist */
#bottomlist{
width: 500px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#999999;
text-align:center;
padding-left: 140px;
}

Thanks

we really need to see the whole picture. can you give us a link to the site? or at the very least all the css and xhtml code

Does this help?

http://www.stickandgo.com/test/index3.html

/* CSS Document */
body{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
background-color:#FFFFFF;
text-align:left;
}
#container{
width: 800px;
border: solid black 1px; 
margin-left: 30px;
margin-right:30px;
border: solid black 1px; 
height: 595px;
}
#main{
margin-left: 30px;
margin-right:30px;
}
#topheader{
height: 110px;
background-image:url(images/signpostheader.jpg);
background-repeat:no-repeat;
}
#left{
width: 178px;
float:left;
height: 350px;
background-color:#1177AA;
}
#center{
width: 426px;
height: 340px;
float:right;
text-align:right;
padding-right: 15px;
padding-top: 10px;
background-position: top right;
background-color:#FDF7E1;
}
#right{
width: 180px;
height: 350px;
float:right;
margin-left: -5px;
background-image:url(images/greyleft.gif);
background-color:#cccccc;
}
#topbandhome{
width: 171px;
height: 25px;
margin-top:85px;
float:right;
margin-left: -5px;
background-color:#cccccc;
}
#topbandstrip{
width: 625px;
height: 25px;
margin-top:85px;
float:left;
background-color:#1177AA;
}
#homeimage{
width: 800px;
height:95px;
background-image:url(images/exampleimage.gif);
background-color:#66CC66;
}
/* menu */
#navlist
{
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 5px;
width: 12em;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#navlist li
{
list-style: none;
margin: 0;
font-size: 1em;
}

#navlist a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 3px;
padding-left: 10px;
}

#navlist a#current { border-color: #5bd #035 #068 #f30; 
}

#navlist a
{
width: 99%;
/* only necessary for Internet Explorer */
}

#navlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 11.6em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}

#navcontainer>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}

#navlist a:hover, #navlist a#current:hover
{
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 3px;
padding-left: 10px;
}

#navlist a:active, #navlist a#current:active
{
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 3px;
padding-left: 10px;
}
/* bodytext */
.welcometxt{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:left;
margin-left:5px;
}
h1 {
	margin:0px 0px 5px 15px;
	font-size:12px;
	font-weight:bold;
	color:#000000;
	text-align:left;
	}
p {
	font:11px/20px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 16px 15px;
	padding:0px;
	text-align:left;
	}
	.righttext{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
margin:30px 3px 0px 15px;
}
/* rightlist */
#rightlist{
color: black;
margin:0px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
text-align:left;
float:left;
padding-left: 8px;
}
#rightlist li
{
list-style: none;
}
/* bottomlist */
#bottomlist{
width: 500px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#999999;
text-align:center;
padding-left: 140px;
}
/* toptelephone */
.telephone{
padding-top: 4px;
padding-left: 8px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#3399CC;
letter-spacing: 1px;

}

ok, I'd get rid of the id on the ul, and leave it on the div. then to access the list in your css just use #rightlist ul li {blah blah blah}.

I now have

<div id="rightlist">
<ul>
<li>one</li>

and

#rightlist ul li
{
list-style: none;
}

However the list is ignoring the padding-left: 8px; and shifts the list over towards the right again even if I remove the padding. not sure what else I can change!

can you put it up so I can take a look?

Now I've just done...

margin:0px 0px 0px -30px;

and this works, however firstly I thought FF would ignore the margin (works in FF) and secondly, isn't bad to use negative?

I don't think you should need to. can you put it up live so I can take a look?

how does it look on ie?

Hey Smudgie,

IDs should only be used once in a document - classes would be better if you're going to use it twice - but you don't even have to.

The solution is to not give your UL an ID at all. Just define a style for a UL child of your rightlist ID in your CSS like so:

#rightlist ul {
    margin: 0;
    padding-left: 8px;
}

Cheers,

Rob

:roll: