1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Extra space above text

Discussion in 'HTML & Website Design' started by Soupi, Mar 8, 2018.

  1. #1
    How do i remove the extra margin above john gerald to match other cols. THis is the CSS I have I think i have to do margin-top: 0px
    I want the name John Gerard Ahern or column 1 to line up with column 2 and 3

    #datacontainer > p {
        font-family: Verdana, Tahoma, sans-serif;panam103-test.syr.edu/victims.php
        font-size: 1.81em;
        color: rgb(12, 72, 118);
    }
    .widget-text a {
        display: inline-block;
        margin-left: 0.25em;
    }
    
    .widget-text img {
        padding: 0.15em;
        border: 0.06em solid #ccc;
    }
    /*Using columns to control how many cols needed*/
    ul.list-unstyled.victims-list {
      columns: 3;
      column-gap: normal;
      margin-top: 0px;
    }
    /*Mobile style is default (2 col for SM size and 3 for LG)*/
    @media (max-width: 992px) {
      ul.list-unstyled.victims-list {
        columns: 2;
      }
    }
    
    @media (max-width: 576px) {
      ul.list-unstyled.victims-list {
        columns: 1;
      }
    }
    Code (markup):

    SEMrush
     
    Soupi, Mar 8, 2018 IP
    SEMrush
  2. Soupi

    Soupi Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    panam103-test.syr.edu/victims.php this is the page
     
    Soupi, Mar 8, 2018 IP
  3. phpmillion

    phpmillion Member

    Messages:
    142
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    35
    #3
    I would start looking at h3 tag, which you have above the list. Try to remove h3 completely and see if that helps. If list is aligned properly, then you found where the problem is.

    P.S. You also may want to check your SSL certificate because it's invalid.
     
    phpmillion, Mar 8, 2018 IP
  4. Soupi

    Soupi Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    I removed it and it didnt help... i think there is a extra padding above the name. if i debug and add this to container margin-top: 0px. it fixes it but how do i do it in the code..
    thank you
     
    Soupi, Mar 8, 2018 IP
  5. Soupi

    Soupi Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    i tried this and it seemed to work
    ul.list-unstyled.victims-list li:first-child{
    margin-top: 0px;
    }
     
    Soupi, Mar 8, 2018 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,414
    Likes Received:
    350
    Best Answers:
    26
    Trophy Points:
    335
    #6
    I didn't work with margins on the list items, or I would have caught this. When you read the specs, you will see that setting columns also sets a new block formatting context. One of the effects of doing that means the margins within the container (li) do not collapse through the containing block (ul). In this case, the first and last list items are affected. The other sibling list items collapse with one another so there is only 12px margin between them. The top list items in columns two and three are already collapsed, so there's no margin between them and the containing block.

    @Soupi, you got working solution without knowing why it worked. Here is my more general solution:
    
      #victims-list li {
       margin: 0 0 12px;
      }
    Code (markup):
    Since it is common that many developers and nearly all designers do not grok margin collapse, it may be easier to use padding, though that creates issues of it own.
    {padding-bottom: 12px;}
    Code (markup):
    gary
     
    Last edited: Mar 8, 2018
    kk5st, Mar 8, 2018 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,414
    Likes Received:
    350
    Best Answers:
    26
    Trophy Points:
    335
    #7
    I mentioned the specs. Here is the link: https://www.w3.org/TR/css-multicol-1/

    I also noted that your list could break within the list item. See also the section on column breaks within the reference.

    g
     
    kk5st, Mar 8, 2018 IP