Forum Moderators: not2easy
In a nutshell, I want blocks of text to appear as question/answer, question/answer, each on it's own line, but sometimes I want to be able to add a second question/answer to the same line as the previous one. In the end I plan on using definition lists, however I've found normal divs have the same problem as when I implemented it with dt/dd, so I switched to them for illustrating the problem in my example code.
The only "solution" I've been able to come up with is to enforce a width on some wrapping div (or divs). Besides being a semantic nightmare, sometimes I want it to have a wider width, as seen in my example.
Am I doing something wrong? Is there some ridiculous IE7 only solution out there somewhere? I've googled and searched forums and I'm about to give up and go back to table based layout! Someone help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">.floatleft1
{
width: 100px;
height: 100px;
background-color: green;
border: 1px solid #000;
float: left;
clear: left;
}
.floatleft2
{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #000;
float: left;
}
.previousLine
{
float:left;
clear:none;
}
</style>
</head>
<body>
<div class="floatleft1">apple</div>
<div class="floatleft2">red</div>
<div class="floatleft1">banana</div>
<div class="floatleft2">yellow</div>
<div class="floatleft1 previousLine">bruised?</div>
<div class="floatleft2">no</div>
<div class="floatleft1">plum</div>
<div class="floatleft2">purple</div>
</body>
</html>
--Charlie
The by far easiest trick: develop in anything but IE
When done an dworkign properly in FF, opera, safari, ...
Try how it looks in IE6 and IE7, you can then add conditional comments for either both of them or for IE6 and IE7 separately, with code that works around the bugs in the different versions of IE without it affecting the rest of he standards compliant browsers.
In your html you can have e.g.:
<link rel="stylesheet" type="text/css" href="/style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/ie7.css" />
<![endif]-->
It it's little code that you need (not so likely if you followed the approach outlined above), you can also add the code directly in the html with a <style> tag.
The only "solution" I've been able to come up with is to enforce a width on some wrapping div (or divs). Besides being a semantic nightmare,
On the provided code in ie 6&7 the vsiual display is:
apple ¦ red ¦ yellow ¦ bruised? ¦ no ¦ purple
banana
plum
and in ff2&3 opera9, win safari:
apple ¦ red
banana ¦ yellow ¦ bruised? ¦ no
plum ¦ purple
However, it sounds like you want the non-ie display, and <dl>'s sound appropriate. This reproduces the non-ie div layout - and if that's not what you want, may be a tool to identify the visual layout you do want to achieve.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">
dl, dt, dd {
margin:0;
padding:0;
}dl {
clear:left;
}dt, dd {
float:left;
width:100px;
height:100px;
border:1px solid #000;
}dt {
background-color:green;
}dd {
background-color:red;
}
</style>
</head><body>
<dl title="all about an apple">
<dt>apple</dt>
<dd>red</dd>
</dl><dl title="all about a banana">
<dt>banana</dt>
<dd>yellow</dd>
<dt>bruised?</dt>
<dd>no</dd>
</dl><dl title="all about a plum">
<dt>plum</dt>
<dd>purple</dd>
</dl></body>
</html>
Note the use of a separate definition list for each fruit. This may/may not be semantically correct depending on your actual information, but seemed OK for the provided egs. Obviously some modification if all should be a single <dl>
apple ¦ red
banana ¦ yellow ¦ bruised? ¦ no
plum ¦ purple
and yes, for semantic reasons I was hoping to use a single dl. the lines with multiple "columns" would be for things like city/state/zip or begin_date/end_date, etc. but semantically it would still be part of the same "list". perhaps it would have been easier if I had just posted the DL code originally.
Again, I'm trying to achieve the FF3/Webkit layout in IE 7 (at least, and hopefully 6):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">dl.table-display
{
/*width: 45em;*/
margin: 2em 0;
padding: 0;
font-family: georgia, times, serif;
}
.table-display dt
{
width: 10em;
float: left;
margin: 0 0 0 0;
padding: .5em;
font-weight: bold;
clear: both;
}
.table-display dd
{
float: left;
width: 12em;
margin: 0 0 0 0;
padding: .5em;
}
dt.previousLine
{
float:left;
clear:none;
}
dt.wideQuestion
{
width: 20em;
}
</style>
</head>
<body>
<fieldset >
<legend ><span>This is a test.</span></legend>
<dl class="table-display" id="security_form">
<dt><label for="username">User Name:</label></dt>
<dd><input type="text" id="username" name="username"/></dd>
<dt><label for="password">Change Password:</label></dt>
<dd ><input type="password" id="password" name="password"/></dd>
<dt class="previousLine" ><label for="confirm">Confirm</label></dt>
<dd ><input type="text" id="confirm" name="confirm"/></dd>
<dt class="wideQuestion">Restrict access by IP address?</dt>
<dd>
<input type="radio" id="ip_yes" name="ip_address_flag_view" value="1"/><label for="ip_yes">yes</label>
<input type="radio" id="ip_no" name="ip_address_flag_view" value="0"/><label for="ip_no">no</label>
</dd>
</dl>
</fieldset>
</body>
</html>
Basically, this styles to form elements direct via classed definition lists - although definition lists can be made to work also.
Downsides are the difficulties getting ie and ff to deal with a legend (required for accessibility) for fieldsets, which has required some trickery (including use of a heading which needs to be relevant to the page outline to validate). I've indulged and used attribute selectors to get at the radio inputs, but that meant classing the fieldset for ie which doesn't understand them - you may prefer to just use the class to avoid the double-up.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">form, form * {
font-family: georgia, times, serif;
padding:0;
margin:0;
}fieldset {
padding:0.8em 0 0 0.6em;
}legend {
font-weight:bold;
}fieldset fieldset {
border:none;
padding-left:0;
}fieldset fieldset legend {
height:0;
width:0;
overflow:hidden;
visibility:hidden;
}label {
display:inline-block;
font-weight:bold;
min-width:8em;
width:auto;
margin-right:1em;
white-space:nowrap; /* allows wide labels to expand */
}input {
margin-right:2em;
padding:0;
}h4 {/* heading appropriate to outline */
display:inline;
}input[type=radio] {
min-width:1em;
margin-right:0em;
}label[for=ip_yes], label[for=ip_no] {
min-width:2em;
}</style>
<!--[if lte IE 6 ]>
<style type="text/css">
label {
display:inline;
width:8em;
}
</style>
<![endif]--><!--[if IE ]>
<style type="text/css">
.radio label, .radio input {
margin-right:0em;
min-width:2em;
width:2em;
}
</style>
<![endif]-->
</head>
<body><form>
<fieldset>
<legend>This is a test.</legend>
<label for="username">User Name:</label>
<input type="text" id="username" name="username"/>
<fieldset>
<legend>Change Password:</legend>
<label for="password">New Password:</label>
<input type="password" id="password" name="password"/>
<label for="confirm">Confirm Password:</label>
<input type="text" id="confirm" name="confirm"/>
</fieldset>
<fieldset class="radio">
<legend>Access by IP address?</legend>
<h4>Restrict Access by IP Address?</h4>
<input type="radio" id="ip_yes" name="ip_address_flag_view" value="1"/>
<label for="ip_yes">yes</label>
<input type="radio" id="ip_no" name="ip_address_flag_view" value="0"/>
<label for="ip_no">no</label>
</fieldset>
</fieldset>
</form></body>
</html>
Stealing the concept from you though, I wonder if creating sub DL's wouldn't do the trick though.... (coming back an hour later) ... well, I can't make the dang thing work. I'll give it a couple hours tomorrow during the day job! Thank you for the time!
-Charlie
e.g.
dt+dd+dt {...}
Only gotcha is that IE6 well it's not going to cooperate until you add something like IE7.js to make it understand the sibling selectors
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">dl.table-form{
clear:both;
}dl.table-form dd
{
margin-left:0px;
}dl.table-form dt {
/*
float left causes things that follow float to float to the left (eg. the following dd)
*/
float: left;
padding-left:.5em;
padding-right:.5em;}
dl.table-form .hidden_question {
display:none;
}dl.table-form dl{
margin-left:0px;
overflow:auto;
}dl.table-form dl dd{
/*
float left causes things that follow float to float to the left (eg. the following dt)
*/
float:left;
}</style>
</head>
<body>
<fieldset >
<legend ><span>This is a test.</span></legend>
<dl class="table-form" id="security_form">
<dt><label for="username">User Name:</label></dt>
<dd><input type="text" id="username" name="username"/></dd>
<dt class="hidden_question">password fields</dt>
<dd>
<dl>
<dt><label for="password">Change Password:</label></dt>
<dd><input type="password" id="password" name="password"/></dd>
<dt><label for="confirm">Confirm:</label></dt>
<dd><input type="text" id="confirm" name="confirm"/></dd>
</dl>
</dd>
<dt>Restrict access by IP address?</dt>
<dd>
<input type="radio" id="ip_yes" name="ip_address_flag_view" value="1"/><label for="ip_yes">yes</label>
<input type="radio" id="ip_no" name="ip_address_flag_view" value="0"/><label for="ip_no">no</label>
</dd>
</dl></fieldset>
</body>
</html>
I had originally resisted nesting the elements that are in a single line with each otherThis is good! ;)
With this particular example you'd need to create a new fieldset for every line.Resistance is better ;)
. Rather than using nested fieldsets, I'm using nested dls but pretty much borrowing the same ideas....
If you wish to code semantically, look to the content and that will suggest the html elements, and use css (not html elements) to achieve the display/"look"/layout. ... Which circles back to my statements about nesting.
Forwards: I don't think I understand your content enough to grasp the semantics - the provided eg is definitely not a definition list, but (IMO) good that you are trying to keep it as simple as possible. Some things to think about:
1. If you are using "table-form" as a class because in the real-world material this actually translates to tabulated data - then use a table. Or, select appropriate elements and use display:table.
2. There is no obvious reason for the <span> inside the legend
3. display:none for "hidden questions" works for visual users, but I understand some older accessibility devices do not render it. That is the reasoning behind the (convoluted)
fieldset fieldset legend {
height:0;
width:0;
overflow:hidden;
visibility:hidden;
}
So just make sure the hidden element really isn't needed - in which case ask whether it should be there in the first place, especially as the mark-up is a definition list - and if the thing isn't a definition term or description, it doubly! shouldn't be there :)
4. Unfortunately your beautifully crafted code still didn't perform in ie6 for me, so I've combined your <dl>'s with some simplified css to give you another eg. The placement of the class "sameline" isn't intuitive, but may give you something to work with. I've also included an example of using an ordinary list as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">
dl, dt, dd {
margin:0;
padding:0.6em 0;
font-family: georgia, times, serif;
white-space:nowrap;
font-weight:bold;
}dt {
float:left;
clear:left;
min-width:10em;
font-weight:bold;
}dd {
padding-right:0.6em;
}.sameline {
float:left;
clear:none;
}ul, li {
list-style-type:none;
margin:0;
padding:0;
float:left;
font-family: georgia, times, serif;
white-space:nowrap;
font-weight:bold;
min-width:1em;
}
</style><!--[if lte IE 6 ]>
<style type="text/css">
dt {
width:10em;
}
</style>
<![endif]--><!--[if IE ]>
<style type="text/css">
dt {
padding-left:0.6em;
}
</style>
<![endif]-->
</head><body>
<form>
<fieldset>
<legend>This is a test</legend>
<dl>
<dt><label for="username">User Name:</label></dt>
<dd><input type="text" id="username" name="username"/></dd><dt><label for="password">Change Password:</label></dt>
<dd class="sameline"><input type="password" id="password" name="password"/></dd>
<dt class="sameline"><label for="confirm">Confirm</label></dt>
<dd><input type="text" id="confirm" name="confirm"/></dd><dt>Restrict access by IP address?</dt>
<dd class="sameline"><input type="radio" id="ip_yes" name="ip_address_flag_view" value="1"/><label for="ip_yes">yes</label> </dd>
<dd><input type="radio" id="ip_no" name="ip_address_flag_view" value="0"/><label for="ip_no">no</label></dd><dt>No2 Restrict access by IP address?</dt>
<dd><ul>
<li><input type="radio" id="yes" name="ip_address_flag_view" value="1"/></li>
<li><label for="yes">yes</label></li>
<li><input type="radio" id="no" name="ip_address_flag_view" value="0"/></li>
<li><label for="no">no</label></li>
<li><input type="radio" id="undecided" name="ip_address_flag_view" value="0"/></li>
<li><label for="undecided">undecided</label></li>
</ul>
</dd>
</dl>
</fieldset>
</form></body>
</html>
Forwards: I don't think I understand your content enough to grasp the semantics - the provided eg is definitely not a definition list, but (IMO) good that you are trying to keep it as simple as possible. Some things to think about:
Well, it's not a "definition list" per se, but I was basing my choice largely off of this article:<>
Some of my forms will be using tables, specifically when I'm dealing with multiple database rows of information, but tables just didn't give me the flexibility for dealing with the data. The other option that goes unmentioned in the article is not using any wrapping code at all... just a long string of labels and inputs, but I have a feeling I'm going to need the css hooks that having wrapping tags provides.
2. There is no obvious reason for the <span> inside the legend
This will be the subject of a future thread! :)
3. display:none for "hidden questions" works for visual users, but I understand some older accessibility devices do not render it. That is the reasoning behind the (convoluted)...
I was wondering about that... thanks for the explanation!
The placement of the class "sameline" isn't intuitive, but may give you something to work with. I've also included an example of using an ordinary list as well.
The placement of the sameline class is what has been tripping me up from the beginning... I think I'm finally starting to see how floats are supposed to work.
I had been "float:left"ing <dd>'s because I thought that it was necessary in order to bring it up to the previous line where the <dt> was. Now I see that when the <dt> is floated, the <dd> will automatically be brought up to be beside it due to the natural flow.
This experience has been very educational! On to fieldset/legends! :)
[edited by: SuzyUK at 8:45 pm (utc) on Sep. 16, 2008]
[edit reason] sorry no personal links, see charter [/edit]
