473,570 Members | 2,857 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Taming Definition Lists, or Generated Content in IE

I recently came up with a cool little stylesheet [1] for definition
lists. There is a small demostration for the impatient [2]. I hope
this helps someone.

Here's how I did it. Definition lists are usually styled something
like:

] Term
] A tab of white space followed by the definition
] By
] Marcus Tullius Cicero
] L. Ipsum
] James Cerra
] Created
] Circa 45 BC
] Issued
] December 24, 2003

And so on. However, I wanted to style my definition list as [2]:

] Term: A tab of white space followed by the definition
] By: Marcus Tullius Cicero, L. Ipsum, James Cerra
] Created: Circa 45 BC
] Issued: December 24, 2003

These lists are displayed inline, with generated content added (i.e.
": " or ", " between multiple dd elements). This was relatively
simple to do for Mozilla or Opera with the following four blocks:

] dt, dd {
] display: inline;
] margin: 0;
] padding: 0;
] }
]
] dd + dt:before {
] content: "\000A";
] white-space: pre;
] }
]
] dt:after {
] content: ": ";
] white-space: pre;
] }
]
] dd + dd:before {
] content: ", ";
] }

However, Internet Explorer doesn't support CSS 2.1 generated content,
the "+" selector, or ":before" and ":after" pseudo-classes. I solved
this problem by using Microsoft's dynamic styles. I created a "dummy"
property and added a dynamic style which does something after the
element is first loaded (otherwise, it would be applied over and over,
until the browser crashed). Here's a simple example:

] -ie556-content: expression(
] this.parsed ? 0 : (aJavaScriptFun ction(this), this.parsed=1)
] );

That will execute a JavaScript function on the element being styled
(referenced by the keyword, 'this') when it is first loaded. To add
the generated content in the specific contexts, I used another
conditional operator [3] with the DOM (W3C, Level 1) and a propitery
Microsoft function called "insertAdjacent Text". You call it against
the object being modified [4]. It takes two arguments: The first is
a string that specifies where to place the new text ("beforeBegi n",
"afterBegin ", "beforeEnd" , or "afterEnd") . The second argument is the
string to add.

Here's a practical example. The following is equivelent to the last
rule in my origional CSS (sorry about line breaks):

] dd {
] -ie556-content: expression(
] this.parsed ? 0 : (
] (previousSiblin g.nodeName == nodeName ?
insertAdjacentT ext("afterBegin ",", ") : 0),
] this.parsed=1
] )
] );
] }

Here are my three content-generation CSS rules added translated as two
rules for IE:

] dt {
] -ie556-content: expression(
] this.parsed ? 0 : (
] (previousSiblin g ? insertAdjacentT ext("afterBegin ","\\u000A" ) :
0),
] insertAdjacentT ext("beforeEnd" ,": "),
] this.parsed=1
] )
] );
] }
]
] dd {
] -ie556-content: expression(
] this.parsed ? 0 : (
] (previousSiblin g.nodeName == nodeName ?
insertAdjacentT ext("afterBegin ",", ") : 0),
] this.parsed=1
] )
] );
] }
Check out my source for an easier to read version [1], [2]. I hope
that gives someone some ideas for their own stylesheets.

--
Jimmy Cerra

[1] http://www.pitt.edu/~jfcst24/2004/04/05/test.css

[2] http://www.pitt.edu/~jfcst24/2004/04/05/testx.html

[3] The the confused, a conditional operator in JavaScript takes the
form: "test ? doneIfTrue : doneIfNotTrue".

[4] i.e. The "this" object, but that's already the default scope, so
it is unnecessary to be added.
Jul 20 '05 #1
0 3540

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2640
by: Brett Selleck | last post by:
We have an issue where the JAXB generated classes are creating an interface which references itself. The Schema is valid, and I have not seen this ran into before. The code is below. What is interesting, is if I change the name of ErrorType to Error the issue goes away. Has anyone else ran into this issue? Do you have a solution? The...
6
2845
by: Stanimir Stamenkov | last post by:
So if the 'type' attribute of the OL element is deprecated and authors should rely only on stylesheets how one could use a reference (as clear text) in the content to a particular list element? Suppose I have: <ol type="1" id="main"> <li>baba</li> <li>lele <ol type="a" id="ext">
9
3739
by: Dave H | last post by:
Hello, I have a query regarding definition lists. Is it good practice semantically to use the dt and dd elements to mark up questions and answers in a frequently asked questions list, or FAQ? Here is an example of just such a usage: <dl class="faq"> <di>
7
4233
by: Neil Zanella | last post by:
Hello, I have posted the following message before but got no replies... I am trying to format an HTML definition list with CSS so that it appears as follows, but am having the following problem: when the definition term (<dt>) on the left is too long, as in the HTML code posted below, the whole definition list gets messed up. I have tested...
9
1944
by: lists(nospam)at | last post by:
Howdy all, After following a tutorial on ALA (taming lists) I converted my navigation box from a table to a list. Generally very happy with it with the exception of IE6 on the Win platform (haven't tested earlier versions of IE on Win) On IE6 for Win the <li>'s are spaced apart vertically, almost looks as though there is an additional...
2
2433
by: krsgoss | last post by:
I'm trying to do a two column "form" layout based on article here: http://www.alistapart.com/stories/practicalcss/ The idea is to have a label, and a value using definition list markup. I float the dt left, and the dd right with fixed widths for each. This works fine in both IE and FF until I have a <br> elements within the dd elements. ...
6
5032
by: mno | last post by:
Hi all, I have a problem that I've been stuck with for the last couple of days that's driving me a bit more than crazy at this point. Sorry if this message is not very clear. I have a design that resembles the following: <div id="main"> <div class="image">
28
6016
by: hlubenow | last post by:
Hello, I really like Perl and Python for their flexible lists like @a (Perl) and a (Python), where you can easily store lots of strings or even a whole text-file. Now I'm not a C-professional, just a hobby-programmer trying to teach it myself. I found C rather difficult without those lists (and corresponding string-functions). Slowly...
4
3787
by: Steve Swift | last post by:
I'm trying to achieve a format of definition lists that matches the definition lists generated by IBM's "BookMaster" (from quite a few years ago). The effect is as if the terms and their definitions are in a two column table, all cells vertically aligned. But I'd like to achieve it with a combination of <DT<DDand CSS so that the result...
0
7729
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7637
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7950
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8000
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6332
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5523
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5247
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3684
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1238
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.