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
RIGHTLIST already defined.
you can only use id once. therefore you need to change the name of the second id.
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.
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
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
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; }
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}.
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!
RIGHTLIST already defined.
can you put it up so I can take a look?
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?
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?
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
RIGHTLIST already defined.
you can only use id once. therefore you need to change the name of the second id.
:roll:
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
