Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 12563

Apr 12th, 2008

Style for just numbers in ol lists

Expand Post »

How do you make a style that affects the font attributes of only the numbers in ordered lists (ol) without affecting the contents of the list items?

No kludges please, and the solution must validate as XHTML 1.0 strict.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Apr 12th, 2008

Re: Style for just numbers in ol lists

It's not pretty nor creative but is Valid XHTML 1.0 Strict:

html Syntax (Toggle Plain Text)
<ol>
<li style="font-size:24px">
<span style="font-size:12px">This text is 12px. The bullet number is 24px.</span>
</li>
<li>
<span style="font-size:12px">This text is 12px. The bullet number is 12px.</span>
</li>
</ol>
<ol>
<li style="font-size:24px">
<span style="font-size:12px">This text is 12px. The bullet number is 24px.</span>
</li>
<li>
<span style="font-size:12px">This text is 12px. The bullet number is 12px.</span>
</li>
</ol>

Last edited by buddylee17; Apr 12th, 2008 at 2:56 pm.

buddylee17

Reputation Points: 232

Solved Threads: 137

Practically a Master Poster

Offline

665 posts
since Nov 2007

Permalink

Apr 13th, 2008

Re: Style for just numbers in ol lists

I had thought of that, but I was hoping to allow the rest of the text in the list to inherit the style outside the list.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Apr 13th, 2008

Re: Style for just numbers in ol lists

There may be a solution, but I can almsot gaurentee that it will only work on a few browsers!

autocrat

Reputation Points: 63

Solved Threads: 12

Posting Pro in Training

Offline

427 posts
since Feb 2005

Permalink

Apr 13th, 2008

Re: Style for just numbers in ol lists

Okay... you say that you want it to take on the same style as outside the list.
Please tell me you have styling for Paragraphs...????

If so, simply use a Paragraph inside the List (should still be Valid, Semantic etc.), and then, where you haveyou paragraph style, simply follow it with
, ol p

autocrat

Reputation Points: 63

Solved Threads: 12

Posting Pro in Training

Offline

427 posts
since Feb 2005

Permalink

Apr 14th, 2008

Re: Style for just numbers in ol lists

It's not a kludge to have an outer style affect the list ( including the bullets/numbers ) and have an inner style affect the content of items themselves. Use 'relative' styles if possible , e.g use font-size: 80%; on the outside, font-size: 125%; on the inside. If you have no way to speak 'relatively' e.g. if you're setting font-face for the list and want to restore it within items; plan this from the beginning and make style selectors that summarize and apply properties to the 'outer' body text, and text inside list items. Then use deep, more specific selectors to affect certain lists and their outer areas differently, etc, etc. You may find that it becomes quite less of a problem than you imagine it may be.

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Apr 14th, 2008

Re: Style for just numbers in ol lists

Thanks.

The problem was that I had:

- a master list of several hundred elements
- an h2 title at the top of each list item
- several different kinds of html elements in the different list items (after the h2 titles)
- adding a class to each element other than the li and h2 tags would have been time-prohibitive.

The normal-sized li numbers looked funny beside the large h2 text in the headers. I wanted the li numbers to take the font and size from the h2 tag.

I was converting an old "tag soup" HTML file where someone actually got it to work on most browsers in quirks mode. But the trouble is that it had tangled tags:

HTML and CSS Syntax (Toggle Plain Text)
<ol>
   <h2><li>heading 1</h2>
     <p>body of list item</p>
   <h2><li>heading 2</h2>
     <p>body of list item</p>
</ol>
<ol>
   <h2><li>heading 1</h2>
     <p>body of list item</p>
   <h2><li>heading 2</h2>
     <p>body of list item</p>
</ol>

Every attempt to validate this and make it render like the old page failed.

I solved it by using these selectors:

HTML and CSS Syntax (Toggle Plain Text)

body>ol>li {styles}
body>ol>li>* {styles}
body>ol>li>h2 {styles}

Last edited by MidiMagic; Apr 14th, 2008 at 5:31 pm.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Apr 14th, 2008

Re: Style for just numbers in ol lists

Click to Expand / Collapse Quote originally posted by autocrat ...

Okay... you say that you want it to take on the same style as outside the list.
Please tell me you have styling for Paragraphs...????

No, because they were taking different styles from parent tags at various places in the document. If they weren't, it would have been easier.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Help with Forms

Next Thread in HTML and CSS Forum Timeline: Page working in IE7/8b, Opera9, Safari3, but NOT Firefox2/3b5

DaniWeb Message

Cancel Changes

User Name
Password