ansaurus

Question

Answer 1

A:

use this css:

.list ul li a { display: block }

soniiic 2009-09-04 11:37:26

That css is already in place, under the `#list a` selector.

Tomas Lycken 2009-09-04 11:41:08

This doesn't seem to work

simon831 2009-09-04 12:02:26

Answer 2

+1 A:

To fill the bottom, you need to fix the image margins - right now the image is taking up too much space with it's 8px margin. To fill the top, you need to remove the bottom margin of h3.

#list h3 { margin-bottom: 0; }
#list img { margin: 5px 8px; }

Tomas Lycken 2009-09-04 11:47:54

Note that I tested this on my local laptop, with no access to the file `images/x.jpg`, so the margins I suggested are for an image of `1x1 px`. If your image is of a different size, you might need to adjust the margins differently.

Tomas Lycken 2009-09-04 12:17:57

Answer 3

A:

I only wish there was a way to do vertical space expansion. It would make the multi-column thing much easier.

You can fudge it with JavaScript (using jQuery):

$('#list li').each(function(){
    $(this).find('a').css('min-height', $(this).height());
});

You'll have to do some tweaking to factor out padding and such, but it's solid in theory.

cpharmston 2009-09-04 11:49:28

wow. but not really the kind of solution I need.

simon831 2009-09-04 12:05:09

The type of solution you need does not exist, unfortunately. If it did, then you wouldn't need the faux columns technique, for example. display:table will eventually make this sort of thing possible, but I assume that you need it to work in IE. http://www.alistapart.com/articles/fauxcolumns

cpharmston 2009-09-04 12:08:58

Answer 4

A:

Try set height on the #list to a fixed size, and height on #list ato 100%.

Differences to your existing code:

    #list
    {
        min-height: 100px;
        height: 100px;
    }

    #list a
    {
         height:100%;
    }

awe 2009-09-04 11:49:52

... but #list is not a fixed size - it varies.

simon831 2009-09-04 12:03:38

The reason for this is that sometimes the browser does not understand what is the relative size if not at least one of the parents has fixed size. I think this is most an issue in Internet Explorer. But I'm glad you found the solution for your issue.

awe 2009-09-07 06:00:23

Answer 5

+1 A:

Put the

<br style="clear: both;"/>

inside the Anchor tag.

EDIT: changed div to br

ZippyV 2009-09-04 11:57:42

that breaks XHTML 1.0 Strict compliance

simon831 2009-09-04 12:04:12

Fixed, this code passed the W3 validation.

ZippyV 2009-09-04 12:16:31

Answer 6

+4 A:

A combination of your answers fixed it. Many thank....

#list ul { display: block; }
#list li { display: block;}
#list a { display:block; height:100%; }

simon831 2009-09-04 12:17:05

Answer 7

A:

Here's what I did:

<!-- teh codes -->
<style type="text/css">
  .nav-cell
  {
    height: 35px;
    padding: 0px; /* just to make sure the link will fill the entire cell */
    text-align: center;
    width: 92px;
  }
  .nav-cell-link
  {
    display: block;
    width: 100%;
    height: 100%;
  }
  .nav-cell-link-text
  {
    display: block;
    padding-top: 11px;
  }
</style>
<!-- teh codes -->
<table cellpadding="0" cellspacing="0" style="height: 35px;">
  <tr>
    <td class="nav-cell">
      <a href="#" class="nav-cell-link">
        <span class="nav-cell-link-text">Link Text</span>
      </a>
    </td>
  </tr>
</table>
<!-- teh codes -->

Brandon Montgomery 2010-07-02 13:20:56

ansaurus

tags:

views:

answers:

Expand an <a> tag to fill the space

related questions