A
Anonymous
Guest
Hello,
I have a client site that requires the use of definition lists down the left of a page. Seems simple enough, but I'm having problems getting Internet Explorer to set the width of these lists, yet can't find reference to any known bug. When viewed in IE, the lists appear to be treated as inline, only stretching wide enough to fit the longest word.
Similarly, the dt tags act as containers for hyperlinks, which I'm trying to display as block level so that they fill out the whole space of the dt, thus making the whole dt area click-able. In Opera, Firefox, and presumably all other compliant browsers, these hyperlinks aren't taking up the whole space. I assume this is the case with IE too, but given the width problems I can't confirm it.
Sample HTML is as follows,
Please note the div is required as this list isn't the only content in the left column. The rest of the page content is in another div, defined prior to this one and floated to the right with a width of 80%, leaving 20% space to work with for the column in question. With a width of 18% and a left margin of 1%, all browsers except for IE are correctly leaving 1% gap between the column and the page content.
The CSS for this column is as follows,
Any help would be much appreciated.
Thanks.
I have a client site that requires the use of definition lists down the left of a page. Seems simple enough, but I'm having problems getting Internet Explorer to set the width of these lists, yet can't find reference to any known bug. When viewed in IE, the lists appear to be treated as inline, only stretching wide enough to fit the longest word.
Similarly, the dt tags act as containers for hyperlinks, which I'm trying to display as block level so that they fill out the whole space of the dt, thus making the whole dt area click-able. In Opera, Firefox, and presumably all other compliant browsers, these hyperlinks aren't taking up the whole space. I assume this is the case with IE too, but given the width problems I can't confirm it.
Sample HTML is as follows,
Code:
<div class="left_column">
<dl>
<dt><a href="#">Heading</a></dt>
<dd>Information.</dd>
<dt><a href="#">Heading</a></dt>
<dd>Content.</dd>
</dl>
</div>Please note the div is required as this list isn't the only content in the left column. The rest of the page content is in another div, defined prior to this one and floated to the right with a width of 80%, leaving 20% space to work with for the column in question. With a width of 18% and a left margin of 1%, all browsers except for IE are correctly leaving 1% gap between the column and the page content.
The CSS for this column is as follows,
Code:
div.left_column
{
margin: 0 0 0 1%;
padding: 0 0 1ex 0;
text-align: center;
width: 18%;
}
.left_column a
{
color: #ffffff;
margin: 0;
padding: 0;
text-decoration: none;
}
.left_column dd
{
background: #ddddff;
border: #000099 solid 1px;
font-size: .8em;
margin: 0 0 1ex 0;
padding: .2ex .2em .2ex .2em;
}
.left_column dt
{
background: #000099 url('../images/corner_left.jpg') left top no-repeat;
color: #ffffff;
font-size: .8em;
margin: 0;
padding: 0 0 0 1em;
}
.left_column dl dt.a
{
display: block;
}
.left_column dl
{
margin: 0;
padding: 0;
text-align: left;
}Any help would be much appreciated.
Thanks.