List Issues in Firefox and Safari

Question

Hello. I have a website I'm trying to work on whereby I have
vertical menu in the sidebar on the left-hand side of the page.
I've created it using the attached code.
I have that code enclosed within a div entitled simply
"menu". Now - I also want to be able to insert bullets into my main
content of the page (outside of the #menu div). But when I try to
of course create bullets within the text, it applies the styling
that I have on the menu. The main text is within a div called
"contentMain".
I've attempted to bypass by putting in the contentMain and
contentMain ul li css attached.
But the bullets refuse to line up correctly in any browser.
Your help in this matter is greatly appreciated. I'm pulling my
hair out here.
Many thanks -
Kevin

Answer 1

Hello,
This CSS:
#contentMain ul li {
only changes the li within #contentMain. It doesn't change
the UL.
The UL still gets it's styling from the ul,li { CSS.
You'll need two styles to make the ul and li in #contentMain
unique:
#contentMain ul
and
#contentMain ul li
Take care,
Tim
"kevin_stagg" <[email protected]> wrote in
message
news:[email protected]...
> Hello. I have a website I'm trying to work on whereby I
have vertical menu
> in
> the sidebar on the left-hand side of the page. I've
created it using the
> following:
>
> ul, li{
> margin: 0;
> padding: 0;
> list-style-type: none;
> }
>
> ul a:link {
> text-decoration: none;
> color: #669900;
> }
>
> ul a:visited {
> text-decoration: none;
> color: #999;
> }
>
> ul a:hover {
> text-decoration: none;
> color: #000;
> }
>
> li {
> border-bottom-width: 1px;
> border-bottom-style: solid;
> border-bottom-color: #CCC;
> }
>
> I have that code enclosed within a div entitled simply
"menu". Now - I
> also
> want to be able to insert bullets into my main content
of the page
> (outside of
> the #menu div). But when I try to of course create
bullets within the
> text, it
> applies the styling that I have on the menu. The main
text is within a div
> called "contentMain".
>
> I've attempted to bypass by putting in the following:
>
> #contentMain {
> background-color: #FFF;
> padding: 20px 10px 35px 230px;
> text-align: justify;
> }
>
> #contentMain ul li {
> font-family: Arial, Helvetica, sans-serif;
> margin: 0;
> padding-left: 10px;
> font-size: 1em;
> border-bottom-width: 0;
> border-bottom-style: none;
> list-style-type: disc;
> text-indent: 5em;
> }
>
> But the bullets refuse to line up correctly in any
browser. Your help in
> this
> matter is greatly appreciated. I'm pulling my hair out
here.
>
> Many thanks -
> Kevin
>
>
> ul, li{
> margin: 0;
> padding: 0;
> list-style-type: none;
> }
>
> ul a:link {
> text-decoration: none;
> color: #669900;
> }
>
> ul a:visited {
> text-decoration: none;
> color: #999;
> }
>
> ul a:hover {
> text-decoration: none;
> color: #000;
> }
>
> li {
> border-bottom-width: 1px;
> border-bottom-style: solid;
> border-bottom-color: #CCC;
> }
>