html and css madness

Joseph Sinclair plug-discussion at stcaz.net
Sun Oct 22 18:41:26 MST 2006


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++

-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 191 bytes
Desc: OpenPGP digital signature
Url : http://lists.PLUG.phoenix.az.us/pipermail/plug-discuss/attachments/20061022/2f47d0d8/attachment.pgp 


More information about the PLUG-discuss mailing list