[ale] CSS hell

Sat May 15 11:36:07 EDT 2004

Chris,

First of all, I took all of the redundant .groups class declarations and
stuck them in a single .groups definition. (Font-Family, Font-Weight, and
Font-Size) This cut down on the size of the stylesheet by eliminating
redundancy.

Next I eliminated all of the position styling for all list items. Since
the styles can be applied directly to the list itself, positioning the
individual list items at the same time can cause problems. Once those were
removed, I gave ol.groups a padding-left of about 50 pixels. From there I
incremented it down until it looked about where you wanted based on its
original appearence in IE, in this case the appropriate value is 10
pixels. 

Finally, if you're shooting for a list with bullets instead of numbers,
you should be using the ul (unordered list) tag. If you want a bulleted
list INSIDE a numbered list, just nest the ul inside the ol. If you want
images, you can use the list-style css attribute. 

-- 
Christopher R. Curzio     |  Quantum materiae materietur marmota monax
http://www.accipiter.org  |  si marmota monax materiam possit materiari?
:wq!

Thus Spake Christopher Fowler <cfowler at outpostsentinel.com>:
Sat, 15 May 2004 11:11:36 -0400

> Chris,
> 
> Thanks.  It looks good on IE at 1024x768 and on Epiphany.  I try to
> target 1024x768 even though I run 1280x1024.  
> 
> Would you mind taking a few moments and explaining the changes you made
> so I will know exactly what to do next time?
> 
> Is there a why I can convert some if not all of the numbers to bullets
> or images so the list may look a bit better?
> 
> Thanks,
> Chris
> 
> 
> On Sat, 2004-05-15 at 07:48, Christopher R. Curzio wrote:
> > AUGH. No! That is the WRONG ANSWER.
> > 
> > The right answer is to find out where the problem originates. In this
> > case, it is browser rendering behavior regarding lists. For my
> > solution, have a look at this implementation of your page,
> > Christopher:
> > 
> > http://www.accipiter.org/~ccurzio/windex.html
> > 
> > My fix displays consistently across Internet Explorer,
> > Mozilla/Firefox, Opera, and Konqueror. Using tables for layout is a
> > nasty hack and is never a real solution. 
> > 
> > For an explanation of the list issue (and how I fixed it) have a look
> > at this DevEdge article:
> > 
> > http://devedge.netscape.com/viewsource/2002/list-indent/