SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Just a Question of Why does this happen ?

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,518
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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:

    Code:
    .herboyninetynine {
        display:inline-block;
        vertical-align:middle;
        font-size:.875em;
        line-height:.875;
    /*    padding-left:8px; /* if desired */
        margin:0;
    }
    Code:
      <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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry about the link its corrected now

    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.


    Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •