Tribute Page: overlapping UL

i cannot figure this out, spend hours tonight for something that one would think to be easy. Please help!

why does the list item WTF overlap the other list item??

Hey there, the problem you are facing is because you have set the line-height property to 0 in your #list-div. The line-height CSS property sets the amount of space used for lines, such as in text.

#list-div {
    display: inline-flex;
    border: solid black 1px;
    width: 55%;
    min-height:100%;
    margin: -5px;
    vertical-align: middle;
    line-height: 0;
}

The problem would presist even if you remove line-height: 0; from #list-div because it would inherit the line-height property from #img-div (as #list-div is a child of #img-div). In your case you have set it to 0.

#img-div {
    display: block;
    border-color: rgb(249, 214, 247);
    border-top-right-radius: 25%;
    border-bottom-right-radius: 25%;
    border-style: solid;
    border-width: medium;
    line-height: 0;
    margin-left: 10%;
    margin-right: 10%;
    background-color: rgb(249, 214, 247);
}

So you would need to explicitly set the line-height, either by line-height: initial; or to any value you desire, say line-height: 1.6;

I did figure it was something to do with that but indeed as you mentioned it was the inheritance property for its parent that caught me. Thank you so much for the assistance, you gave me a good AHA moment when i read this.

What an amazing community this is, hopefully i can contribute one day on the other end as well.

1 Like

Upon further inspection i found that the “Brackets” software i’m using does not show initial as a popup value for the line-height property so i didn’t know it existed!
thanks again though!

1 Like

You are welcome! happy to help :smiley: