2nd List Doesn't Work

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
   The following code doesn't work as I want, because the 2nd list
doesn't appear as a "list" (no bullets) and requires the <br> after each
item to appear as a vertical list of items.  The 1st list
("class="menu") is okay, but even though I attempt to declare a 2nd
(class="list") it doesn't render as a list.  I thought that the
"li.list" would suffice as a 2nd class declaration, but it seems to be
ignored.  What am I missing or doing wrong?  TIA

  <style type="text/css">
img {float:right; border:1px dotted black; margin:0px 40px 15px 20px;}
    <-- not sure why I have this... -->
ul.menu {float:left; width:100%; padding:0; margin:0; list-style-

a {width:10em; text-decoration:none; color:white; background-
   padding:0.2em 0.6em; border-right:1px solid white;}
p.leftmargin {margin-left: 40px}
    <-- my 2 "li" controls -->
li.list {margin-left: 60px}


<body style="color: rgb(255, 255, 255); background-color: Black;"
alink="#ff6600" link="#99ff99" vlink="#990099">
<div style="text-align: center;">

<ul>     <-- This list renders properly. -->
  <li><a class="menu" href="RHBuilding.html">The Building</a></li>
  <li><a class="menu" href="RHResidents.html">Resident Information</a>
  <li><a class="menu" href="RHOwners.html">Owner Information</a></li>
  <li><a class="menu" href="RHContact.html">Contact</a></li>
<div style="text-align: center;">
<font style="color: rgb(255, 204, 0);" size="+3"><span>Regency House
<font style="color: rgb(255, 204, 0);" size="+2"><span></span></font>
<div style="text-align: center;"><font style="color: rgb(255, 204, 0);"
<span>The In-Town Condominium Tower<br><br>
<img src="RH55_1.jpg" height="345" width="280">
<div style="text-align: left;">
<p class="leftmargin"><font align="left" color="white" size="+1">&nbsp;
Regency House is a 22-story luxury condominium building located in the
heart of
the midtown Phoenix Arts District, next to the renowned Heard Museum. It

<ul>    <-- This list doesn't work! -->
  <li class="list">118 units with balconies<br></li>
  <li class="list">Large heated pool<br></li>
  <li class="list">Spa<br></li>
  <li class="list">Underground parking<br></li>
  <li class="list">24/7 security<br></li>
  <li class="list">Social Room with TV, piano, bar and kitchen<br></li>
  <li class="list">Fitness Center<br></li>
  <li class="list">Library<br></li>
  <li class="list">Valet service<br></li>
  <li class="list">360&deg; unobstructed views<br></li>
  <li class="list">Light Rail station at front door<br></li>

Re: 2nd List Doesn't Work

Michael R. Copeland wrote:

Quoted text here. Click to load it

Post a URL.

Then visit these pages:
http://validator.w3.org /
(Use HTML 4.01 Strict)

You have a rather eclectic mix of CSS and ancient, last millennium
HTML-for-presentation in what you posted here.

   -Friends don't let friends drive Vista

Re: 2nd List Doesn't Work

Beauregard T. Shagnasty replied to hisself:

Quoted text here. Click to load it

Oh wait. I see you're the "Newbie" in another thread. Perhaps you could
visit this place:

http://www.000webhost.com /

Some affiliate spammers have been posting links to it in
alt.www.webmaster recently, though the service itself appears genuine.
It should certainly work for your test cases.

   -Friends don't let friends drive Vista

Re: 2nd List Doesn't Work

Quoted text here. Click to load it

Have a very carefull think about what the first of the above two rules does.


Re: 2nd List Doesn't Work

Quoted text here. Click to load it

   I did, and I tried to have 2 distinct "li" declarations: li.menu and
li.list.  When I did so, it destroyed the "li" that manipulates my
horizontal menu at the top of the page (the "display:inline"
declaration), and I wound up with a bulleted vertical list of the menu
items.  I couldn't figure out a way to declare 2 "li" types, and I had
to revert to the posted code (which at least handles my menu list).  
   To respond to your answer, does it mean that the first rule applies
to _all_ "li" rules - and that the second is a subset of it?  If so, how
_do_ I declare 2 separate and different rules for the "li"/"ul" sets
that do different things (other than what I tried)?  TIA

Re: 2nd List Doesn't Work

Quoted text here. Click to load it

Here is where a URL is mandatory for from the code you supply and the
description you give it should work. In other words: I don't believe you

li.menu {display: inline;} will *only* affect list items with class "menu".

Quoted text here. Click to load it

Yes, and the subset is those li's who specify class="list", but I would do
it differently:

<ul class=menu>
    <li> ...
    <li> ...

<ul class=list>
    <li> ...
    <li> ...

and then

.menu li {/* style rule for li elements inside anything with class "menu"*/
display: inline; ...}
.list li {/* style rule for li elements inside anything with class "list" */

Saves lots of typing and bandwidth and is what selectors are designed for.


Re: 2nd List Doesn't Work

On 31 Mar, 04:34, mrc2...@cox.net (Michael R. Copeland) wrote:
Quoted text here. Click to load it

Your selector is a bit promiscuous.

Quoted text here. Click to load it

is well over the top! That will affect every <li>

Also this use of class attributes on every list element is excessive
Quoted text here. Click to load it

when you can use this instead:
    <ul class="list" >

To fix your selector problem, instead use something like this:

    ul.menu li {display:inline; }

This should be enough to sort you out for today.

Even this won't work for all cases though. It works OK for

    <ul class="menu" >
        <li> ...

    <ul class="list" >
        <li> ...

but it would fail if you ever nested the lists

    <ul class="menu" >
        <li> ...
        <ul class="second-level-menu" >
            <li> ...

This is because
   ul.menu li { ...}
is a descendant selctor, i.e. it applies to any <li> that's below the
relevant <ul>, whether it's a direct child of that <ul> or not.

You can fix this in one of two ways. Either use a child selector
   ul.menu > li { ...}
so that the selector only applies to direct children
(elegant, but not reliable on all browsers though)

Or perhaps more pragmatically:

   ul.menu li { ... }

   ul.menu ul li {
        /* revert to default styling */
        display: list-item;

This means that only those <li> directly beneath <ul> will be changed,
the others maintain their list-item value.

The selector "ul.menu ul li" has higher specificity that "ul.menu li",
so its rules over-ride the less-specific. Understanding this behaviour
and the "cascade" is important to really understanding CSS.

PS - Whenever you set margin or padding on lists (<ul> or <li>) set
_all_16_ of their property values (4 margin, 4 padding, 2 elements).
This is because browser default styles are set up differently for
lists - some do it with margin, some do it with padding. If you want
consistency, you need to take explicit control of all of the

Site Timeline