Definition list with floated title - IE6 horizontal space

[martal]

Hello people, my first post.

My definition list, with a left floated dt and more than one dd, is aligned correctly in all browsers apart from IE6.

Problem: the first dd has added space before it.

When height is set precisely for dt, aligns correctly, but I don't want to do that.

When float is removed, aligns correctly, but the dds don't start on the same line as the dt.

Problem is identical with pixels.

Here is the HTML:

<dl>
<dt class="first">Present</dt>
<dd class="first">Blue</dd>
<dd>Green</dd>
<dd>Black</dd>
<dt class="last">Apologies</dt>
<dd class="last">Brown fox jumps</dd>
</dl>

and the CSS:

dl {
margin-top: 0.187em; /* 3px */
background: #DDEFFF;
color: inherit;
}

dt {
float: left;
clear: both;
width: 6.75em; /* 180px */
font-weight: bold;
font-size: 0.875em;
text-align: right;
}

dd {
border-left: 1px solid #F0F8FF;
margin-left: 8.571em; /* originally 120px */
padding: 0 0.642em 0 0.857em; /* originally 0px 9px 0 12px */
font-size: 0.875em;
}

dt.first, dd.first {
padding-top: 0.75em; /* 12px */
}

dt.last, dd.last {
padding-top: 0.75em; /* 12px */
padding-bottom: 0.75em; /* 12px */
}

Would appreciate any help on this.

[swa66]

IE has a bug that doubles margins in certain cases, try if it's that.

Position is everything recommends "display: inline;" as a fix.

[Xapti]

I assume you have a proper doctype, yes?
Aside from that, you could try triggering haslayout or something. I don't know what exactly what you mean by "aligns correctly" though, cause this is horizontal spacing, yes? how is alignment a problem for horizontal positioning of inline objects?

[Setek]

IE has a bug that doubles margins in certain cases, try if it's that.

Position is everything recommends "display: inline;" as a fix.

Hmm nah can't be that, it's only when the element is floated that it will have a double margin. There's no horizontal margin on the

dt

that could account for that.

My definition list, with a left floated dt and more than one dd, is aligned correctly in all browsers apart from IE6.

Problem: the first dd has added space before it.

By a space, I'm guessing you mean ~ 3px? It's the 3px text jog...

Normally if you had one block container to the right of a floated element, you could just trigger hasLayout on that container, but the problem with lining up multiple elements at an imaginary "column" point is that triggering hasLayout won't work -- because only one is next to a floated element, the others below aren't.

Hmm... from hazy memory, could you give

dt { margin-left: -3px; }

a go? :) It should nix the 3px text jog on the

dt

for the first element, then every

dd

should start at the same horizontal point. Hopefully.

It's either that or having to put a hook on the first

dd

(the one affected) and making that one have a negative left margin of 3px.

[edited by: Setek at 2:52 am (utc) on Mar. 31, 2008]

[martal]

Thanks all for your input.

To explain better, it is 3px added at the start of the dd "Blue". So Blue shifts 3px to the right, subsequent dds align as required underneath, this in IE6 only.

None of your ideas are working.

I took this definition list css off a decent looking site, but now I see the example is bad in IE6 too.

My mistake, I should have checked that.

Is this kind of definition list, with multiple dds, more than one dt, bound to fail in IE6? Is there another way I can do this?

[SuzyUK]

Is this kind of definition list, with multiple dds, more than one dt, bound to fail in IE6? Is there another way I can do this?

I'm afraid so, because of the 3px text jog and because you haven't got anything you can wrap around the dd's and still be semantically correct

there is v.likely another way to do this, using a nested list or a div in an <li> but it seems a shame as the <dl> does seem to make sense here :(

actually how about a ul for your names/colors inside a single dd - maybe that would work?

[Setek]

None of your ideas are working.

Hmm I made a test case, and sorry my bad -3px on the

<dd>

doesn't work, but if you minus 3px from the left margin of all the other

<dd>

s...

HTML:

<dl>
 <dt>This is the &#8220;left column&#8221;</dt>
 <dd class="first">This is the first definition (the one affected by the 3px text jog)</dd>
 <dd>Aliquam erat volutpat. Aliquam erat volutpat. Phasellus pede lorem, viverra quis, posuere sed, tempor sit amet, risus.</dd>
 <dd>Cras posuere iaculis augue. Cras rhoncus tortor sed lacus. Curabitur non felis eget quam mollis laoreet.</dd>
 <dd>Mauris mollis, ante et pretium pulvinar, purus nunc condimentum magna, ut pellentesque nisi est sit amet leo.</dd>
</dl>

CSS:

dl dt { float: left;
 clear: left;
 display: inline;
 width: 145px; }
dl dd { margin-left: 150px; }

And just for IE 6:

dl dd.first { margin-left: 147px; }

But this means any

<dd>

that you have next to a

<dt>

, it will have to have this class. A tad annoying.

Might be easier if you change the markup as SuzyUK suggested, and have a

<ul>

with list items inside one

<dd>

.

[SuzyUK]

here's one way that should work, and yes it involves the recode to use 1 x DD because only one of them can be "fixed" without manually coding each one as setek says - btw in the page where I set up the test code it was actually the first 2 x dd's that were affected, not just the first one, so that would be not only be a tad annoying it would be a bit hit and miss?

try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
dt, dd, ul {padding: 0; margin: 0; list-style: none;}
dl {background: #DDEFFF; color: #000; font-size: 14px;}

dt {
float: left;
clear: left;
width: 180px;
font-weight: bold;
text-align: right;
margin-top: 2px;
margin-right: 10px; /* make right margin half or gap required */
background: #dad; /* temporary */
}

dd {
background: #0f0; /* temporary */
overflow: hidden; /* make dd clear the left floated dts, hasLayout below does that for ie6 and below */
border-left: 1px solid #f00;
padding-top: 2px; /* same as top margin on dt */
padding-bottom: 15px; /* change to suit required gap between each list */
padding-left: 10px; /* left padding = other half of required gap */
}

* html dd {zoom: 1; /* hasLayout for IE6 and below to make dd clear left floated dt's */}
</style>
</head>
<body>
<dl>
<dt>Present</dt>
<dd><ul>
<li>Blue</li>
<li>Green</li>
<li>Black</li>
</ul></dd>
<dt>Apologies</dt>
<dd><ul>
<li>Brown fox jumps</li>
</ul></dd>
</dl>
</body>
</html>

it would actually work without nesting the ul too, if you don't want the excess code.. however it is IMHO a list of people so it's up to you.
e.g.

<dt>Present</dt>
<dd>Blue<br>Black<br>Green</dd>

-Suzy

[martal]

SuzyUK, I inserted a ul in a single dd as you suggested, but never even got to removing the bullets, as the first li was being shifted 3px, in IE6!

Setek, I commented out by own stuff and copied and pasted your css. Does the job in IE6, but Firefox and IE7 are shifted 3 px the other way on the first dd.

Should have mentioned, DOCTYPE is Strict 1.0

[SuzyUK]

SuzyUK, I inserted a ul in a single dd as you suggested, but never even got to removing the bullets, as the first li was being shifted 3px, in IE6!

hehe yes that doesn't fix it, but it allows it to be fixed because then you can then apply seteks or my fix to the single DD parent element

if you want to use the margin manipulation you should feed the differing values to IE6 and below only, either via a conditional comment or the * html hack.. it's quite safe as it's a back hack.

my sample code is not manipulating the margins it's using the newer behavior of overflow (IE7 and 8 get it along with the rest of the compliant browsers).. and haslayout for IE6 and below.

sorry never meant to suggest it was as simple as adding the list, just that it was going to need for your <dd>'s to be wrapped in something.. then realised it was easier to use the <dd> to wrap the list ;)

[edited by: SuzyUK at 4:01 pm (utc) on April 2, 2008]

[Dave75]

the first dd has added space before it.

That's the text-indent property you need to change it to 0 for no space.

When height is set precisely for dt, aligns correctly, but I don't want to do that.

Use line-height property to control the height of a non-block level element.

When float is removed, aligns correctly, but the dds don't start on the same line as the dt.

dd also needs to be floated.

Edit: I should also mention that if you are using two dd for one dt you will need to add a br element with the width of the dt to make up the gap. :)

[edited by: Dave75 at 4:42 pm (utc) on April 2, 2008]

[Setek]

Setek, I commented out by own stuff and copied and pasted your css. Does the job in IE6, but Firefox and IE7 are shifted 3 px the other way on the first dd.

martal, it shouldn't if you had pushed the

dl dd.first { margin-left: 147px; }

to a separate stylesheet just for IE 6... do you know how to use conditional comments?

<link rel="stylesheet" type="text/css" media="screen" href="main-stylesheet.css" />
<!--[if IE 6]>
 <link rel="stylesheet" type="text/css" media="screen" href="ie-6.css" />
<![endif]-->

... after your main stylesheet's declaration.

[martal]

I reread the posts by SuzyUK and Setek, (carefully this time) and have used a combination of the two.

One dd, with a ul, using overflow: hidden and triggering haslayout for ie6 with zoom: 1.

SuzyUK, in the main css file, I didn't use * html, just zoom: 1 in the dd selector.

This works perfectly across all target browsers. Excellent. Thanks.

But it gets trickier when I set up a conditional comment (Setek) for zoom (since it doesn't validate).

XHTML
<link rel='stylesheet' media="screen" type='text/css' href='../styles/cc_minutes.css' />
<!--[if IE 6]>
<link rel='stylesheet' media="screen" type='text/css' href='.../styles/ie6.css' />
<![endif]-->

CSS
#names dd {
zoom: 1;
}

The conditional doesn't work on my machine but I have IE6 as an Evolt standalone and I see there are issues with that. But browsershots (online page viewer) gives the same results, ie no zoom, no haslayout.

I can't see any changes if I set the IF to IE7 and set the dd to background red, so the highest IE browser is not seeing the conditional either.

Am I missing something here?

[Setek]

The "highest IE browser" won't see it for sure because the conditional comment clearly states:

[if IE 6]

Which will target IE 6 and IE 6 only. Check your file structure: you currently have three periods before a /:

href='.../styles/ie6.css' />

... is that meant to be two periods?

[martal]

Setek, three periods fixed (and font changed in editor so I can see that!). IE7 now sets the background to the test colour, so the comment is working, for that browser but not for IE6.

The point about the "highest IE browser" is that I think that conditional comments are processed in Windows, in the registry. If there is more than one version of IE present, the comment is directed at the highest.

I am going to see what I can do about that.

[SuzyUK]

re: [if IE 6]

try [if lt IE 7]

btw.. you can tweak the registry which means your standalones should take note of the conditional comments too, mine do anyway - see the article "Taming your Multiple IE Standalones"

[martal]

SuzyUK, I have IE 6 and IE 5.5 now working with conditional comments, and correct title bar.

I've learnt a lot with this so I was hoping I could similarly fix a vertical align problem with all IE in nested lists, definition in ordered, where the dt is aligned below the ordered list letter, but no joy. So I am making a test page and will start a new topic.

Thanks everyone for your help.