473,725 Members | 1,734 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.dt d">
<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=ut f-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_v iew">
<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
2 2438
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.dt d">

<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:absolu te;
left:25px;
top:25px;
width: 400px;
}
</style>
</head>
<body >
<div id="holder">
<div style="backgrou nd-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.c om 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
3751
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>
0
2108
by: edgard | last post by:
Hi! IE6 has a bug while printing floating tags. I solved some of them positioning elements as relative. But I've got the trouble with definition lists. Floating to left the definition term causes printing errors if the definition term + definition data don´t fit in a line. You can check it at http://www.padsoft.net/barix2/ The screen rendering works fine, but printing fails on the definition list
7
4248
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...
0
3552
by: Jimmy Cerra | last post by:
I recently came up with a cool little stylesheet for definition lists. There is a small demostration for the impatient . 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
26
3177
by: Alexander Block | last post by:
Hello newsgroup, let's say I have a function like template<class Type> inline bool areEqual(const Type &a, const Type &b) { return ( a == b ); }
13
3338
by: maadhuu | last post by:
hello , i would like to know as to why double is more efficient than float . thanking you, ranjan.
2
1600
by: Ian N | last post by:
Hi, I've been trying to get my CSS menu to float to the middle of the page. As i'm also designing to cater for users with 800 x 600 browsers, i have split the menu into two lists, this way it'll break onto the next line rather than forcing the user to scroll sideways. I can't get the two lists to float centrally, Any one got any ideas?
3
10664
by: Arnie | last post by:
Folks, We ran into a pretty significant performance penalty when casting floats. We've identified a code workaround that we wanted to pass along but also was wondering if others had experience with this and if there is a better solution. -jeff
15
7863
by: akomiakov | last post by:
Is there a technical reason why one can't initialize a cost static non- integral data member in a class?
0
8872
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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8747
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,...
0
9392
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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9246
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9162
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,...
0
8069
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 launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6694
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5997
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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3211
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 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.