ansaurus

Question

Styling definition lists - IE clear:both bug

Answer 1

A:

Try adding position to your elements, absolute for the dl and relative for the dt. It might work..

Kyle Sevenoaks 2010-05-07 12:03:02

Answer 2

A:

If the problem you're having is that some elements seem to "float upwards", then here's an unpleasant hack you can try: put a <div> with "clear: both" between the close of a <dd> and the next <dt>. I know that sounds stupid, and of course it's broken HTML, but it's the only thing I've found that puts a "barrier" in the markup to keep stuff from floating upwards.

Pointy 2010-05-07 12:38:51

Umh... Yep it would work probably. However I'm fine with hacks and workaround in the css, but I don't wanna mess up the markup of the page. :)

Andrea 2010-05-07 13:55:34

@Andrea well I said it was unpleasant. I have not been able to find any alternative, so I'll keep an eye on your question here!

Pointy 2010-05-07 23:55:00

Answer 3

A:

Have you tried the clear fix?

I usually use this fix for all my projects so i just created a separate stylesheet just for it:

/* float clearing for IE6 */
* html .clear {
  height: 1%;
  overflow: visible; }

/* float clearing for IE7 */
*+html .clear {
  min-height: 1%; }

/* float clearing for everyone else */
.clear:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden; }

save that as clear.css and include it in your markup(or you can just include it in your stylesheet). Then to use, just add a clear class to the parent container of your floating elements, in this case, your dl.

e.g.

<dl class"clear">

corroded 2010-05-12 02:15:39

Unfortunately the problem is different here...dt and dd are not able to clear them self as they should... the problem is not on the containing dl but on the elements inside...

Andrea 2010-05-14 13:25:14

oh yeah, so does this mean you really have to stick with that markup? I think it is still good(and semantic) markup if you go the nested list way:dt has at most one dd. if dt has many definitions, use an unordered list to list them all.

corroded 2010-05-15 05:23:58

Answer 4

A:

This should work, I have added some background colours so you can see what is happening. You will have to add a class to every first dd and play around with the various 'width' to fit your design.

    <style type="text/css">
  body { font-family: Arial; font-size: 62.5%; }
  * { margin: 0; padding: 0; }
  #main { font-size: 1.4em; }
  dt { font-weight: bold; }
  hr { clear: both; }

  dl.aligned { background-color:orange;width: 400px; }
  .aligned dt {background-color:grey;clear:both;float: left; margin: 0 0 0.5em 0; width:150px}
  .aligned dd {background-color:olive;clear:left;float: left; margin: 0 0 0.5em 150px; width: 190px; }
.aligned dd.first {clear: none;margin-left:0}

 </style>
  </head>
  <body>
 <div id="main">
  <dl class="aligned">
   <dt>First title</dt>
   <dd class="first">1.1 definition</dd>
   <dd>1.2 definition - very long to test wrapping</dd>
   <dd>1.3 definition</dd>
   <dt>Second title</dt>
   <dd></dd>
   <dd></dd>
   <dt>Third title</dt>
   <dd class="first">3.0 definition</dd>
   <dt>Fourth title - very long to test wrapping</dt>
   <dt>Fifth title</dt>
   <dt>Sixth title</dt>
   <dd class="first">6.0 definition</dd>

  </dl>
 </div>
  </body>

lupalz 2010-07-26 12:21:07

ansaurus

tags:

views:

answers:

Styling definition lists - IE clear:both bug

related questions