Stephen Philbin
05-30-2006, 06:46 AM
Hi folks. I've got a small bit of markup containing a list styled with CSS. I have the <dt> and <dd>s of the <dl> all floated left. So as one would expect, the <dt> and <dd>s annoyingly stick out of the bottom of the <dl> and the <dl> consequently collapses to a height of zero.
I came across (what I would consider) a strange behaviour with "overflow:hidden;" though. I found that if I put overflow:hidden; on the <dl>, instead of it hiding the floated <dt> and <dd>s that are overflowing out of the <dl>, it instead expands vertically to accomodate them. Which is pretty much the opposite of what I would have expected. Is this the correct behaviour? Can I rely on this to happen in all browsers? Or is there no official word on this? I certainly couldn't find anything about this specifically in the CSS 1 or CSS 2 recommendations.
Oh and by the way, this happens on Firefox 1.5 and Opera (whatever version we're up to now with Opera). I have no idea what IE makes of it because I don't have any readily available access to IE.
Here's the markup I found this with (sorry about the horrible indentation, that's just how libxslt spits it out.):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stephen Philbin</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="alternate" href="?media=xhtml">
<link rel="alternate" href="?media=xml">
<link rel="alternate" href="?media=text-xml">
<style type="text/css" media="screen">@import url(/css/philblog/default/screen.css);</style>
</head>
<body>
<dl id="alternate_media_list">
<dt>Alternative document types:</dt>
<dd><a href="?media=xhtml" title="View this document in a application/xhtml+xml format.">xhtml</a></dd>
<dd><a href="?media=xml" title="View this document in a application/xml format.">xml</a></dd>
<dd><a href="?media=text-xml" title="View this document in a text/xml format.">text-xml</a></dd>
</dl>
<div id="container">
<div id="page_head">
<h1>Stephen Philbin</h1>
</div>
<div id="content">
</div>
</div>
</body>
</html>
and here's the CSS I used on it:
@media screen {
* {margin:0;padding:0;border:0;}
html {
background-color:#F6F6F6;
}
h1 {
color:#F6F6F6;
font-family:arial;
font-size:2em;
font-weight:normal;
padding:0.1em;
}
a {
color:#000000;
}
#alternate_media_list {
background-color:#FEAF0A;
border-right: 1px solid #888888;
border-bottom: 1px solid #888888;
overflow:hidden;
}
#alternate_media_list dt {
background-color:#91CBFA;
}
#alternate_media_list dt, #alternate_media_list dd {
padding: 0 0.3em;
border-left: 1px solid #888888;
float:left;
}
#alternate_media_list dd:hover {
background-color:#FECF0A;
}
#container {
padding:2%;
}
#page_head{
background-color:#91CBFA;
}
}
Have a look at it as it is there, then remove the highlighted overflow instruction to see what I mean.
I came across (what I would consider) a strange behaviour with "overflow:hidden;" though. I found that if I put overflow:hidden; on the <dl>, instead of it hiding the floated <dt> and <dd>s that are overflowing out of the <dl>, it instead expands vertically to accomodate them. Which is pretty much the opposite of what I would have expected. Is this the correct behaviour? Can I rely on this to happen in all browsers? Or is there no official word on this? I certainly couldn't find anything about this specifically in the CSS 1 or CSS 2 recommendations.
Oh and by the way, this happens on Firefox 1.5 and Opera (whatever version we're up to now with Opera). I have no idea what IE makes of it because I don't have any readily available access to IE.
Here's the markup I found this with (sorry about the horrible indentation, that's just how libxslt spits it out.):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stephen Philbin</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="alternate" href="?media=xhtml">
<link rel="alternate" href="?media=xml">
<link rel="alternate" href="?media=text-xml">
<style type="text/css" media="screen">@import url(/css/philblog/default/screen.css);</style>
</head>
<body>
<dl id="alternate_media_list">
<dt>Alternative document types:</dt>
<dd><a href="?media=xhtml" title="View this document in a application/xhtml+xml format.">xhtml</a></dd>
<dd><a href="?media=xml" title="View this document in a application/xml format.">xml</a></dd>
<dd><a href="?media=text-xml" title="View this document in a text/xml format.">text-xml</a></dd>
</dl>
<div id="container">
<div id="page_head">
<h1>Stephen Philbin</h1>
</div>
<div id="content">
</div>
</div>
</body>
</html>
and here's the CSS I used on it:
@media screen {
* {margin:0;padding:0;border:0;}
html {
background-color:#F6F6F6;
}
h1 {
color:#F6F6F6;
font-family:arial;
font-size:2em;
font-weight:normal;
padding:0.1em;
}
a {
color:#000000;
}
#alternate_media_list {
background-color:#FEAF0A;
border-right: 1px solid #888888;
border-bottom: 1px solid #888888;
overflow:hidden;
}
#alternate_media_list dt {
background-color:#91CBFA;
}
#alternate_media_list dt, #alternate_media_list dd {
padding: 0 0.3em;
border-left: 1px solid #888888;
float:left;
}
#alternate_media_list dd:hover {
background-color:#FECF0A;
}
#container {
padding:2%;
}
#page_head{
background-color:#91CBFA;
}
}
Have a look at it as it is there, then remove the highlighted overflow instruction to see what I mean.