467,118 Members | 991 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,118 developers. It's quick & easy.

IE float issue with definition lists

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, instead they show up directly below
the previous dt.

I'm really trying to avoid a table based approach, but I'm unable to
figure this out. Anyone have an idea as to why the sample below is
rendering like this in IE? Any help is appreciated. Thanks.
<!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" lang="en" xml:lang="en">
<head>
<title>My Page Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
/* detail view */

.detail_view {
margin: 0;
padding: 0;
}

.detail_view div {
float: left;
padding: 5px;
width: 100%;
margin: 0;
}

.detail_view dl {
margin: 0;
padding: 0;
width: 100%;
clear: both;
float: left;
}

.detail_view dt {
margin: 0;
padding: 0;
float: left;
font-weight: bold;
width: 35%;
clear: both;
display: inline;
}

.detail_view dd {
margin: 0;
padding: 0;
float: right;
width: 65%;
}

.detail_view dd div {
clear: both;
display: block;
background: yellow;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<div class="gutter">
<form method="post" action="#">
<div class="detail_view">
<dl>
<dt>Address:</dt><dd><div>IE won't clear birthday
label<br/>float</br>properly!</div></dd>
<dt>Birthday:</dt><dd>Mar. 2, 2000</dd>
<dt>Sex:</dt><dd>Male</dd>
<dt>Social Security:</dt><dd>123-45-6789</dd>
</dl>
</div>
</form>
</div>
</div>
</body>
</html>

Apr 18 '06 #1
  • viewed: 2264
Share:
2 Replies
jim
This works in msie & ffox; eliminates the dd's and the dt's too ;-)
Looks like you need a 2-column form holder so I tried to set it up in
that
way for you to easily adapt it to your needs.

Note that the width of the holder div and the set widths of the 'label'
and 'value'
div classes are what keeps everything lined up. if you need to
increase the width values,
then you should proportionately increase them all. -Jim

------------------------------------------------------------------------------------------------------------------------
<!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">
<head>
<title> 2-column layout
</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta name="language" content="en-us">
<style type="text/css">
..label {
display:inline;
float:left;
width:150px;
height:22px;
font-size:9pt;
text-align:right;
}

..value {
display:inline;
float:left;
width:150px;
height:22px;
font-size:9pt;
text-align:left;
margin-left:25px;
}
#holder {
position:absolute;
left:25px;
top:25px;
width: 400px;
}
</style>
</head>
<body >
<div id="holder">
<div style="background-color:black; color:white; font-family:arial;
font-size:12pt; text-align:center; border-bottom:4px

gray double; margin-bottom:5px; ">2-Column Form Holder</div>

<form name="myform" method="post" action="">
<div class="label"> Name:</div>
<div class="value"> <input type="text size="32"/> </div>

<div class="label"> Origin:</div>
<div class="value"> <input type="text size="32"/></div>

<div class="label"> Email:</div>
<div class="value"> <input type="text size="32"/></div>

<div class="label"> Occupation:</div>
<div class="value"> <input type="text size="32"/></div>

<div class="label"> Favorite Food:</div>
<div class="value"> <input type="text size="32"/></div>

<div class="label"> Fav Music:</div>
<div class="value"> <input type="text size="32"/></div>

<div class="label"><input type="submit" value="Submit"/></div>
<div class="value"><input type="reset" value="Reset"/>

</form>
</div>
</body>

Apr 18 '06 #2
kr*****@gmail.com wrote:

I'm really trying to avoid a table based approach, but I'm unable to
figure this out.

<dt>Birthday:</dt><dd>Mar. 2, 2000</dd>
<dt>Sex:</dt><dd>Male</dd>
etc.


This is tabular data. Use a table.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Apr 19 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Dave H | last post: by
reply views Thread by edgard | last post: by
7 posts views Thread by Neil Zanella | last post: by
reply views Thread by Jimmy Cerra | last post: by
26 posts views Thread by Alexander Block | last post: by
13 posts views Thread by maadhuu | last post: by
2 posts views Thread by Ian N | last post: by
15 posts views Thread by akomiakov@gmail.com | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.