473,703 Members | 4,129 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

] 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" ) :
] 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 3550

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

Similar topics

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 pertanant part of the schema: <snip>
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">
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>
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 the example with mozilla 1.2.1. Complete code is provided below so you can see what I mean. Anyone...
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 blank line between each one. URL is: http:www.slidenight.com
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. IE does not clear subsequent dt's, and they are not floated beneath the multiline dd element,...
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">
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 getting into C-strings, I thought, what if I take a C-string and
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 *looks* like this: <TABLE> <TR VALIGN=BASELINE><TD><B>Life<TD>The meaning of life
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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
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.