Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS List Misbehaving

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #31828
    TheN00b
    Participant

    Hello CSS Friends

    I am having some trouble with a horizontal list of blocks, here is a screenshot:

    As you can see the last two items have moved down a bit ! I don’t know why that is ! I am checking in FireBug and all seems fine in terms of padding and margins !

    Here is the HTML and CSS Markup:





    • HOW TO APPLY


      Lorem ipsum dolor sit amet, consectetur adipiscing elit.


      Read More


    • ACCOMMODATION


    • TOFFL & IELTS



    #actBtns
    {
    margin: 0 0 20px 0;
    }

    #actBtns ul li
    {
    display: inline-block;
    height: 136px;
    width: 300px;
    margin-right: 10px;
    background: #fff url('Images/actBtnBg.jpg') repeat-x;
    border: 1px solid #c8eef9;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    }

    #actBtns ul li img
    {
    float: left;
    padding: 15px 0 0 20px;
    }

    #actBtns ul li h3
    {
    font-weight: bold;
    color: #04516b;
    padding: 15px 0 0 130px;
    }

    #actBtns ul li p
    {
    padding: 6px 0 8px 130px;
    color: #3b3b3b;
    font-size: 85%;
    }

    #actBtns ul li a
    {
    padding: 0 0 0 14px;
    color: #04516b;
    }

    #actBtns ul li.lastItem
    {
    margin-right: 0;
    }

    I would greatly appreciate any help with this.

    Thank You.

    #57618
    yomoore
    Member

    Try giving your main div height and width + display: inline; for your ”li” instead of display: inline-block;

    #57622
    Ethan27
    Member

    By the way dude the design looks great!!!

    #57673
    TheN00b
    Participant

    Hi Guys

    @Yamoore: I just tried that, it did not work. The layout remains messed up.

    @Ethan: Thanks !

    #57676
    TheDoc
    Moderator

    Why don’t you just change them to Divs and float them all to the left?

    #57548
    yomoore
    Member

    display: inline-block;
    float: left;

    works for me in chrome.

    #57550
    TheN00b
    Participant

    hehe thank you so mcuh TheDoc. I don’t know why I didn’t think of that ! :D

    It worked.

    Thank You once again.

    #57474
    yomoore
    Member

    Instead of putting one sentence, you could of course change everything about your design and making them all divs. youre brilliant.

    #57478
    noahgelman
    Participant

    @yomoore, switching those from list items to divs is more semantic anyways. It uses less code and makes more sense since it’s not actually a list. Overall it’s an improvement

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.