How to ensure that a table row remains fixed

HTML & CSS
1

Back again !

I have a table row which I want to remain fixed at a height of 1.25em.

I understand that you cannot use a max height as this is ineffective in CSS as what’s in the cell will override.

The content of the cell is as follows: <td>Higher Alt Hill <p class=“hunters”>Hunters<br>Tavern</p></td>

The css is: .hunters {font-size:small;line-height: 0.8em; text-align:right; margin-top: -14px;overflow:hidden;}

The web page is http://www.c5d.co.uk/alt1871.php

The row is entry number 30. How can I get this table row to remain the same as the others ?

Thanks

2

Your link is broken.

How can I get this table row to remain the same as the others ?

It should be by default.

3

Hi,

It’s the bottom margin on the p element that pushes the cell taller. Remove the bottom margin.


.hunters {
    font-size: small;
    line-height: 0.8em;
 [B]   margin: -14px 0 0;[/B]
    overflow: hidden;
    text-align: right;
}

That’s not a very reliable way to place content as you are just dragging it up from the line below which means that if content was in the way (above it) then it will overlap (or indeed if someone resizes text).

What you should have done is floated the first part of the text to the left and the second part to the right. I would also use a more semantic structure like this:


<td><p class="info"><span>Higher Alt Hill</span> <span class="hunters">Hunters<br>Tavern</span></p></td>



p.info{
margin:0;
text-align:right;
}
p.info span{float:left;text-align:left}
p.info .hunters{float:right;margin-left:10px}

Note also that the height property on tables and table-cells is always taken as a minimum and will automatically accommodate content if the content is greater than the height specified.

4

Thanks for this.

When I first did what you suggested, it didn’t appear to make any difference.

However when I added font-size; small to the class hunters, it works fine.

Floats were something I didn’t think about. One to bear in mind for future.

Thanks for the answer