13 replies [Last post]
smudgie
Offline
Enthusiast
Last seen: 15 years 10 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

The list works fine how I want it to in both IE & FF, however in W3C is says RIGHTLIST already defined, what do I need to do in order to correct this error?

#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;
list-style: none;

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

html

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

Also If I want to add a line break within my list how can I do this? If I add a <br> again I get a W3C error.

Thanks

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

RIGHTLIST already defined.

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

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 15 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

RIGHTLIST already defined.

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.

smudgie
Offline
Enthusiast
Last seen: 15 years 10 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

RIGHTLIST already defined.

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

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

RIGHTLIST already defined.

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

smudgie
Offline
Enthusiast
Last seen: 15 years 10 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

RIGHTLIST already defined.

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;

}

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

RIGHTLIST already defined.

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}.

smudgie
Offline
Enthusiast
Last seen: 15 years 10 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

RIGHTLIST already defined.

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!

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

RIGHTLIST already defined.

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

smudgie
Offline
Enthusiast
Last seen: 15 years 10 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

RIGHTLIST already defined.

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?

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

RIGHTLIST already defined.

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?

rsnider
Offline
newbie
Toronto, Canada
Last seen: 16 years 38 weeks ago
Toronto, Canada
Joined: 2006-01-06
Posts: 1
Points: 0

Re: RIGHTLIST already defined.

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

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

RIGHTLIST already defined.

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

:roll:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

RIGHTLIST already defined.

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

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

Laughing out loud

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me