Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

Setting the width of definition lists

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

Setting the width of definition lists

Postby TrickyRic » Fri Mar 28, 2008 10:05 am

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,

Code: Select all
<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: Select all
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.
User avatar
TrickyRic
New php-forum User
New php-forum User
 
Posts: 50
Joined: Mon Mar 03, 2003 6:28 am
Location: Toronto, Canada

Re: Setting the width of definition lists

Postby TrickyRic » Mon Mar 31, 2008 6:08 am

Problem solved.

Code: Select all
div.left_column
{
  margin: 0 81% 0 1%;
  padding: 0 0 1ex 0;
  text-align: center;
}

.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;
}


Although the hyperlinks still aren't taking on the attributes of a block.
User avatar
TrickyRic
New php-forum User
New php-forum User
 
Posts: 50
Joined: Mon Mar 03, 2003 6:28 am
Location: Toronto, Canada


Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

cron