User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 402,689 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,410 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1195 | Replies: 7 | Solved
Reply
Join Date: Jan 2007
Posts: 2,537
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 111
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Style for just numbers in ol lists

  #1  
Apr 12th, 2008
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.
Daylight-saving time uses more gasoline
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Nov 2007
Location: Arkansas
Posts: 368
Reputation: buddylee17 will become famous soon enough buddylee17 will become famous soon enough 
Rep Power: 2
Solved Threads: 70
buddylee17's Avatar
buddylee17 buddylee17 is offline Offline
Posting Whiz

Re: Style for just numbers in ol lists

  #2  
Apr 12th, 2008
It's not pretty nor creative but is Valid XHTML 1.0 Strict:
  1. <ol>
  2. <li style="font-size:24px">
  3. <span style="font-size:12px">This text is 12px. The bullet number is 24px.</span>
  4. </li>
  5. <li>
  6. <span style="font-size:12px">This text is 12px. The bullet number is 12px.</span>
  7. </li>
  8. </ol>
Last edited by buddylee17 : Apr 12th, 2008 at 1:56 pm.
Reply With Quote  
Join Date: Jan 2007
Posts: 2,537
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 111
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: Style for just numbers in ol lists

  #3  
Apr 13th, 2008
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.
Daylight-saving time uses more gasoline
Reply With Quote  
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Rep Power: 4
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Re: Style for just numbers in ol lists

  #4  
Apr 13th, 2008
There may be a solution, but I can almsot gaurentee that it will only work on a few browsers!
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
Reply With Quote  
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Rep Power: 4
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Re: Style for just numbers in ol lists

  #5  
Apr 13th, 2008
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

Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
Reply With Quote  
Join Date: Jul 2006
Location: Deptford, London
Posts: 943
Reputation: MattEvans has a spectacular aura about MattEvans has a spectacular aura about 
Rep Power: 5
Solved Threads: 47
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is online now Online
Posting Shark

Re: Style for just numbers in ol lists

  #6  
Apr 14th, 2008
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.
If it only works in Internet Explorer; it doesn't work.
Reply With Quote  
Join Date: Jan 2007
Posts: 2,537
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 111
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: Style for just numbers in ol lists

  #7  
Apr 14th, 2008
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:

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

body>ol>li {styles}
body>ol>li>* {styles}
body>ol>li>h2 {styles}
Last edited by MidiMagic : Apr 14th, 2008 at 4:31 pm.
Daylight-saving time uses more gasoline
Reply With Quote  
Join Date: Jan 2007
Posts: 2,537
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 111
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: Style for just numbers in ol lists

  #8  
Apr 14th, 2008
Originally Posted by autocrat View Post
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.
Daylight-saving time uses more gasoline
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

DaniWeb HTML and CSS Marketplace
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes

Other Threads in the HTML and CSS Forum

All times are GMT -4. The time now is 5:15 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC