Re: html and css madness

Top Page
Attachments:
Message as email
+ (text/plain)
+ signature.asc (application/pgp-signature)
+ (text/plain)
Delete this message
Reply to this message
Author: Joseph Sinclair
Date:  
To: Main PLUG discussion list
Subject: Re: html and css madness
This would make a lot more sense in devel, but I'll answer here for now...

Craig White wrote:
> I am working through the pages w3.org and think I am finding some
> inconsistency.
>
> FWIW, I am using Firefox 1.5.0.7
>
> My first issue - the simpler issue.
>
> Using <OL> tags which are nested several levels (4 or 5), the numbering
> breaks on the third nested level if I enclose my list items like:
> <LI>Some Item</LI>
>
> If I omit the closing </LI>, they number correctly
>
> Has anyone else noticed this?
>
> Secondly and much more important - and actually the reason I am writing
> this...
>
> Using stylesheets is the recommended method for declaring types of <OL>
> (upper-roman, lower-roman, upper-latin, lower-latin, etc.) Using tags
> declared like
>
> <OL TYPE=I> (upper-roman)
> <OL TYPE=A> (upper-latin)
> <OL TYPE=i> (lower-roman)
> <OL TYPE=a> (lower-latin)
> all work as expected but the w3.org says these tags are deprecated which
> is why I want to use the css methodology...but I can't make it work.

---
Remember, CSS never works right if the browser is in quirks mode, so *MAKE SURE* your code is XHTML, *NOT* HTML 4.01 if you're going to use CSS.
As an aside, you really should *never* use HTML 4.01, all new pages should be XHTML 1.1.
>
> for example...my css...
>
> LI:before {
>     content: counter(item) ". ";
>     counter-increment: item;
>   } 
> LI { display: block }
> LI:before { content: counter(item) ". "; counter-increment: item }

---
Drop the 3 items above and see if the CSS works.
Also, note that if you declare your page to be XHTML, then both CSS and HTML are case sensitive, use lowercase for all tags.
> ol.romanupper {
>     list-style-type: upper-roman;
>     color: blue;
>   }
> ol.romanlower li {
>     list-style-type: lower-roman;
>     color: green;
>   }
> ol.alphaupper li {
>     list-style-type: upper-alpha;
>     color: red;
>   }

>
> some sample html code...
>     <ol class="romanupper">
>         <li>Quality Management Systems Manual == BLUE?

---
End your li tag before starting a subgroup
>         <ol class="alphaupper">

---
Subgroups need to be enclosed in their own li tag
>             <li>Rights, Responsibilities and Ethics == RED?
>             <li>Continuum of Care
>             <ol class="romanlower">
>                 <li>Utilization Review == GREEN?
>                 <li>Initial Screening-Assessment
>                 <li>Treatment Planning
>                 <li>Transfer-Discharge
>             </ol>
>             <li>Education

>

---
End all of your ol tags too.

Here's a reformed version:
<ol class="romanupper">
  <li>Quality Management Systems Manual == BLUE?</li>
  <li>
    <ol class="alphaupper">
      <li>Rights, Responsibilities and Ethics == RED?</li>
      <li>Continuum of Care</li>
      <li>
        <ol class="romanlower">
          <li>Utilization Review == GREEN?</li>
          <li>Initial Screening-Assessment</li>
          <li>Treatment Planning</li>
          <li>Transfer-Discharge</li>
        </ol>
      </li>
      <li>Education</li>
     </ol>
  </li>
</ol>


> The display shows the colors for only the first 2 levels...the alpha
> upper green is red and in all cases, the <OL> numerals are simply the
> standard numerals in all cases.
>
> Is this a Firefox issue, an HTML 4.01 issue or PEBKAC issue?
>
> Craig
>


==Joseph++

---------------------------------------------------
PLUG-discuss mailing list -
To subscribe, unsubscribe, or to change you mail settings:
http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss