Just a Question of Why does this happen?

HTML & CSS
1

I wonder if someone could explain why this should happen please?

There is probably a better way but what I have done displays fine.

HTML extract from table: <td> <p class=“herboyleft”><span class=“heap”>Beer House Hare and Hounds Inn<br>139 Stamford St</span></p></td>

CSS extract from sheet

.herboyleft {font-size:15px; margin:0; float:left; line-height:0.75;}
.heap {font-size:small; margin:0;line-height: 0.75em; display:inline;}

If I do not use the float element, then there is a space between the lines after the <br>.

If I float the span after nothing at all there isn’t. I don’t want the space. But why does it happen ?

Web page: http://www.c5d.co.uk/ed131891.php

It’s entry number 4 right at the top of the table. and currently showing how I want it to.

Thanks

Antony

2

Hi,

I can see no difference with removing the float rule from .herboyleft in IE, Firefox or Chrome?

If you change .herboyleft to a span and remove the float then the spacing will increase because the inline element is then inline and aligned on the baseline to allow room for descenders and the line-height will have no effect on the spacing because it’s the block elements parent that will define the overall line-height on that line.

If you now float the span.herboyleft or set it to display:block then the line-height will take effect and the element is not aligned on the baseline any more and any spacing is reduced. It’s the same effect you get with inline images leaving a gap underneath. This article from many many years ago explains the principles.

However, I’m not sure if that was what you are asking as I couldn’t see anything different when removing the float from the p element.

Note that you don’t need to define as span as display:inline because they are inline elements by default. Also vertical margins to not apply to inline elements.

3

I’m sorry if I wasn’t clear, but if you have a look at entries 185 & 186 in the same table you will see the difference

I’d like to read the link you gave me, but it seems to be one on your local machine unless I am mistaken

Thanks

Antpny

4

certificates,

This is not an answer to “why” this should happen.

There is no reason to float anything in those particular cells, and you don’t need so many wrappers.

The following is probably short sighted, but it DOES simplify the few that I saw:


.herboyninetynine {
    display:inline-block;
    vertical-align:middle;
    font-size:.875em;
    line-height:.875;
/*    padding-left:8px; /* if desired */
    margin:0;
}



  <td>4</td>
changed from:
  <td> <p class="herboyleft"><span class="heap">Beer House Hare and Hounds Inn<br>139 Stamford St</span></p></td>
changed to:
  <td><span class="herboyninetynine">Beer House Hare and Hounds Inn<br>139 Stamford St</span></td>


  <td>16</td>
changed from:
  <td>Stamford Street <p class="herboyleft"><span class="heap">Town Hall<br>Police Station</span></p></td>
changed to:
  <td>Stamford Street <span class="herboyninetynine">Town Hall<br>Police Station</span></td>


  <td>186 <p class="strike">192</p></td>
changed from:
  <td><p class="heap"><span class="herboy">Ridge Hill Lanes<br>Cromwell Terrace</span></p> 68</td>
changed to:
  <td>68 <span class="herboyninetynine">Ridge Hill Lanes<br>Cromwell Terrace</span></td>
5

Hi,

Sorry about the link its corrected now :slight_smile:

The code in entries 185 and 186 is changed from the code I looked at but the issues are much the same. The line-height on the span will have no effect to the overall height of the line-box as mentioned in my other post as that will be controlled by the largest line-box in that section.

I would not float the item either as you have changed source order and added a hacky padding to push the float back into position. All you really need to do is put the content in a div or p(without margin) and control the line-height from there.

e.g.

<div class="test" style="    line-height: 0.9;">66 <span class="heap">Ridge Hill Lanes<br>Cromwell Terrace</span></div>

(inline code for example only)

The span and the break will now get the smaller line-height and the line-height will be reduced. If you wanted the ‘heap’ content to be stacked on the taller number (66) then you should float:left both the number (in a div) and the span and then they can have individual line-heights.