http://www.styleignite.com is also a useful resource.
I just found another trick, from browservulsel, for definition lists.
I like using definition lists to show the results of a form. Theyâre great. Except when you want to style them. I was always floating the dt left and giving it a width⌠but unlike in a form where i can wrap a label-input pair in a div which can clear the floats, dlâs canât hold anything other than dtâs. Adding extra dtâs or ddâs simply for clearing was not acceptable⌠what to do when the dtâs text was much larger/longer than the ddâs? (Itâs fine the other way around.) The ddâs kept wrapping up to the dt above, making the whole set-up useless.
The technique on Browservulsel was not to float anything, but to give the dt a set width (in emâs for text-resize), and then give the ddâs a left margin a bit bigger, and a negative top margin to pull it up alongside the dt. The dtâs and dlâs have to be given min-height settings (height for IE6). Iâve found they line up quite well for the eye; however they do not line up well enough for bottom or top borders to line up. Text enlarge shows it stable and safe-- no wrapping or other strange things.
I hope this helps anyone else having clearing problems with definition lists. It was driving me nuts.
And surely a Crusty here has an even better way, which I would like to hear. Iâve fallen in love with DLâs.
nd surely a Crusty here has an even better way, which I would like to hear. Iâve fallen in love with DLâs.
lol - you mean something like this 
Lawlz, yes. That one reminds me on one softnmore posted on DP (maybe he got it from you?) where a three-column page kept the length of the center column as it grew using floats enclosing floats enclosing floats. But should float:none be targetted only to IE6? Eh, playing with it now.
I understand that IE encloses its floats and makes the next box sit by itself⌠but I donât understand why that box will ride up alongside as if it too were a float. The next box should sit beneath like any other box, right? This would totally anwswer a question I ran into redoing someone elseâs page where something was floated left, another box came along afterwards (not floated), and trying to use top marign to push box 2 down made big differences betweeen IE and RoW as RoW used the bottom of the float as a reference while IE used the top of the body/ultimate container as reference. Left a nice bald spot on the side of my head, that one did.
But should float:none be targetted only to IE6? Eh, playing with it now.
Yes only IE needs the float:none because it doesnât honour the clear:both on the dt and will let the dd slide higher than it should. It should start level with the cleared element but ie will slide it higher than it should. All other browsers (that iâve tested) do not have this problem.
Therefore for IE we simply set âhaslayoutâ to be true on the DD which has the same effect as overflow (other than visible) has in other browsers. This means that the DD forms a rectangular block to the side of the floated element and can be pushed away by margins on the float onto the correct position.
Now because the DD is statically placed the clear:both on the DT has the effect of creating a new line and all content starts level and doesnât float higher than it should because its not a float anymore and static content wonât rise higher than the floated content (that has clear:both applied) above it in the html.
Regarding margins on floats and static content you should know that margins on static content alongside a float will have n o effect from the float but slide under until they reach the containing block. You can#t put a margin on a static element that sits under float unless the margin is tall enough to reach the edge of the containing block instead.
However when an element in IE has âlayoutâ then it takes its margins from the float instead (other browsers behave the same way if overflow other than visible has been set as margins on elements that have overflow set do not collapse ).
I have a nice little article here that explores these differences.
Hope that helps
Regarding margins on floats and static content you should know that margins on static content alongside a float will have n o effect from the float but slide under until they reach the containing block. You canât put a margin on a static element that sits under float unless the margin is tall enough to reach the edge of the containing block instead.
However when an element in IE has âlayoutâ then it takes its margins from the float instead (other browsers behave the same way if overflow other than visible has been set as margins on elements that have overflow set do not collapse ).
Ah, thatâs what it was, I remembered it backwards-- IE was using the floatâs bottom as a reference instead of the top of the body.
My question about targetting IE6 referred to IE7, but I see that itâs doing the same thing. I wonder if itâs safer to say if lte IE7 since we dunno if IE8 will commit this sin.
Yes, the article is very nice. I had wondered why you had clear: both when everyone was only floated leftâŚ
clear:both - ensures that no floating content is on either side of the element.
clear:left - ensures that no floating content is to the left of the element.
I thought clear referred to the direction of the float above it, not where that float was in relation to the clearing element. This is good to know, if I understand it correctly.
Iâll be reading more deeply into this-- thanks a lot. Iâm now able to add borders to my dt/dd groups : )
My question about targetting IE6 referred to IE7, but I see that itâs doing the same thing. I wonder if itâs safer to say if lte IE7 since we dunno if IE8 will commit this sin.
Yes, it would be better to target lte IE7 as IE8 is going to be a completely different kettle of fish
I am guessing that IE8 wonât need it but Iâm not downloading the beta ie8 just yet as I donât want to break my computer. I might mess about with the virtual hard disk image (VHD) if I get time in the not so distant future but its pointless to start looking at bugs and rendering issues on a moving target so I will wait a bit:)
I agree.
At the bottom of the article you mention âproblems/bugs with clear: left and clear: right, for another dayâŚâ Since this is from 2005, have you written such an article yet? I always used the more specific one as the default and both only when there were indeed âbothâ directions.
No I never got round to documenting the bugs but thereâs already some information here about floats and clearing.
The main thing to remember in IE is that if you float an element left and then float an element right then you wonât be able to clear them. Ie only clears floats that float in the same direction.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.left{
float:left;
width:200px;
height:200px;
background:red;
}
.right{
float:right;
width:200px;
height:200px;
background:green;
clear:both;
}
</style>
</head>
<body>
<div class="left">Left</div>
<div class="right">Right float won't clear in IE</div>
</body>
</html>
Really? Wth? But if thereâs another element after .right that clears:both then that will clear everyone right?
Really? Wth? But if thereâs another element after .right that clears:both then that will clear everyone right?
Not in IE if the next element is a float.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.left,.left2{
float:left;
width:200px;
height:200px;
background:red;
}
.left2{clear:both;}
.right{
float:right;
width:200px;
height:400px;
background:green;
clear:both;
}
</style>
</head>
<body>
<div class="left">Left</div>
<div class="right">Right float won't clear in IE</div>
<div class="left2">Left</div>
</body>
</html>
If .left2 was not a float then it would clear as expected. IE just wonât allow floats to clear each other when floated in opposite directions.
Iâve even run into more clearing issues (though not important to my current design, so Iâm still cool for now)! Still need to get these under my belt though for future reference.
So, Iâve implemented your version of definition lists. Itâs very nice. I did run into a little strangeness when I had 2 ddâs for one dt. I ended up doing this (which I think will only work when the total widths of the two ddâs together does not exceed the available space for any single dd)
(code changed for clarity)
<div>
<h3>Thing 1</h3>
<dl>
<dt>Something:</dt>
<dd>Yes it exists</dd>
<dt>Something:</dt>
<dd>Yes it exists</dd>
<dt>Something:</dt>
<dd>No</dd>
<dt>Something:</dt>
<dd>Yes it exists</dd>
<dt>Something:</dt>
<dd>Yes it exists</dd>
<dt>Something:</dt>
<dd>Yes it exists</dd>
<dt>Something:</dt>
<dd>Nope</dd>
<dt>Something:</dt>
<dd>Yes it exists</dd>
</dl>
</div>
<div id="extra" class="clear">
<h3>Extra costs (in âŹ)</h3>
<dl>
<dt>Something:</dt>
<dd class="wider">Explanation</dd>
<dt>Something:</dt>
<dd>30 <dd>per week</dd></dd>
<dt>Something:</dt>
<dd>40 <dd>per day</dd></dd>
<dt>Something:</dt>
<dd>Not available<dd>-</dd></dd>
<dt>Something:</dt>
<dd>Not available <dd>-</dd></dd>
<dt>Something:</dt>
<dd>30 <dd>per day, per person</dd></dd>
<dt>Toeristenbelasting:</dt>
<dd>0 <dd>-</dd></dd>
<dt>Extra bed:</dt>
<dd>present <dd>per day</dd></dd>
<dt>Deposit:</dt>
<dd class="wider">200,00</dd>
</dl>
</div>
(divs are floated too to carry h3's and h4's)
dl {
width: 30.5em;
float: left;
font-size: 1em;
overflow: hidden;
background-color: #0f0;<-- for testing
}
dl dt {
font-weight: bold;
float: left;
width: 11.5em;
padding: 0 0 .5em .2em;
background-color: #f00;<--testing
clear: both;
}
dl dd {
width: 16em;
float: left;
padding: .2em;
background-color: #ff0;<--testing
border: 1px solid #000;<--testing
}
(didn't want to stick this in the HTML for certain reasons)
* html dl dd {float: none;}
*+html dl dd {float: none;}
#extra dd {
margin-right: 1em;
background-color: #00f;<--testing
width: 6em;
white-space: nowrap; <--wanted to stop some wrapping
float: left;
}
#extra dd.wider {
width: 16em; <--first dd in this list doesn't have a partner, stops float wrapping
}
I might have done it the long way, but it seems stable and works cross browser. I should have thought this was a possibility in the beginning. Because of the way the code is written, Iâve needed to add " - " for when the person filling out the form didnât choose anything (is a drop-down menu), because there now MUST be either a second nested dd OR the âwiderâ class to make sure it takes up enough room. I needed the float to apply to everyone, even IE.
Also only works when there in fact are no borders or background colours. The nested dd pops out of itâs container (what I want) except in IE6 where it wraps the container⌠the net result looks the same when you canât see the container.
Still, I would think this would work for anyone else doing the same.
Hi,
The last example you posted is invalid because you canât do this:
<dd>30
[B]<dd>per week</dd>[/B]
</dd>
You canât nest a lone DD element inside a DD without its surrounding DL structure. Youâll have to change that inner DD to a div or some other element and style it appropriately.
You can nest things in a DD but you would need the whole structure.
e.g.
<dl>
<dt>term</dt>
<dd>
<[B]dl>
<dt>test</dt>
<dd>def</dd>
</dl>[/B]
</dd>
</dl>
Not sure it would make semantic sense though
Ah, damn. But the story ends well: while at some point in my goofing around I needed to nest the ddâs, my current CSS works with placing the two DDâs back as siblings again : ) No HTML incest needed.
<dd>30 </dd><dd>per week</dd>
Seems still okay in the IEs.
Wow great piece of informations. The first page is full of resources. Thanks webnauts.
Thanks for reporting the broken link and if you can now tell me which post itâs in Iâll remove it
BTW you could have just pressed the report post button instead for the actual post
Itâs in the original post starting this thread. I believe it was actually the first link, too. Right near the top of the first page. Sorry I reported wrong, I just noticed it asked to report broken links and didnât know better. Speaking of which, where do you find the report button?
Edit: Found it.
Speaking of which, where do you find the report button?
Look to the left of a post where the posters name is. Look at the bottom of that section (under the avatar). At the very bottom are some icons. The red triangle with the exclamation mark in the middle is the report button and you can report a post from there. It will also ask you for a reason and you can say link broken etc.
Read the guidelines for more information
Thank you, Paul.
Alex