Nested <ul>: Can't control styling

HTML & CSS
1

A new design change made a new CSS problem for me.

I’m trying to override the style of a parent list in a nested list, but nothing I do works. The parent has no list-style-type but I want the nested <ul> to have square bullets. Also, the way the parent forms, line spacing is huge.

The HTML is here and CSS is here.

I added selectors for the <ul> at the very end of the CSS. The HTML for the nested lists starts at line 165. The cheat at line 172 using breaks is the look I’m after (with bullets). The failed <ul> is at line 187 under “your strengths.”

I’ve been researching for hours, so I appreciate a push in the right direction.

2

I’m not seeing a nested list on your page, what I see is a single list. With nested elements in each list-item simulating a nested list.

However, I would use nested list in order to get the square markers that your after.

There are arguments for and against <h> tags within an <li>, In my example below I will go ahead and set the h5 in the li because I would not want the <i> elements not being contained in a block level element (the li in this case). By the way, those may need to be h4 tags, I see you jumping from h3 to h5.

If you were to set the h5 outside of the ul then you would not need nested lists and you could just style each ul with square markers.

This is just a starting point and you would need to adjust your margins, paddings. You may need to set up some classes for the ul’s also so you don’t have conflicts in other areas.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UL</title>

<style>
h5 {margin: 1em;}
ul {
    list-style: none;
    margin: .5em;
    padding: 0 1em;
}
li ul {
    list-style: square;
    margin: .5em 0;
    padding: 0 3em 1em;
    border-bottom: 1px solid #eeeeee;
}
li ul li {
    margin: .25em .5em;
}
</style>
</head>
<body>
<div class="project-widget project-details">
    <h3>At-a-Glance</h3>
    <ul>
        <li>
            <i class="fa fa-check-square"></i>
            <h5>Your Strengths</h5>
            <ul>
                <li>UX has no limitations</li>
                <li>product assortment can be unique</li>
                <li>customer interaction</li>
            </ul>
        </li>
        <li>
            <i class="fa fa-chain-broken"></i>
            <h5>Your Weaknesses</h5>
            <ul>
                <li>kiosk</li>
            </ul>
        </li>
        <li>
            <i class="fa fa-thumbs-up"></i>
            <h5>Your Opportunities</h5>
            <ul>
                <li>UX design</li>
                <li>information architecture</li>
                <li>wireframinge</li>
                <li>personas</li>
                <li>project management</li>
            </ul>
        </li>
        <li>
            <i class="fa fa-thumbs-down"></i>
            <h5>Your Threats</h5>
            <ul class="sidebar">
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>
3

I can offer a clue but not an answer.

First, your local css sheet, presumably it’s the one named style.css, should be the LAST css sheet in the cascade so you can override styles that preceed it in other “template” stylesheets that should not be changed.

Something in the projects.css stylesheet is overriding your !important addition to your style.css stylesheet.

If you make the following changes, the square markers will appear, but I don’t know what else might be affected.

projects.css (Line 321)

.project-details ul li {
/*	display: block;  /* comment out this property */
	padding: 20px 25px;  /* perhaps reduce horizontal padding, esp left */
	border-bottom: 1px solid #eeeeee;
}

PS:
Just below that CSS on line 327, you will find this rule. Notice the invalid HTML comment after the font-size… That has to be deleted. It is corrupting the text-align part of that rule. It is not causing the list item problem, though.

.project-details ul li i {
	display: block;
	float: left;
	width: 25px;
	height: 25px;
	line-height: 25px;
	font-size: 16px;<!--14px-->
	text-align: left;
}

It’s a good idea to validate your CSS sheets.

2 Likes
4

Sorry about that, I see it now under “Your Threats”.
I was looking for it under “Your Strengths”, as you mentioned. You had the line 187 right though, I missed that too .

As ronpat has pointed out, the display:block overrides the default of display:list-item and removes the markers.

Following up on what I mentioned about the <h> tags being nested in a <li>. The argument against: is that the heading is not really part of a list of items. It should introduce the list of items just as any other heading introduces the content that follows it.

As far as the <i> elements that are providing the glyph/icons before the h5 tags. They can be nested in the h tags or better yet set up as background images. They would require you to rework those <i> selectors so they target the h tag instead of the li.

This is how I would mark-up the content using single ul’s and h tags, also using h4 now instead of h5.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UL</title>

<style>
h4 {margin: 1em;}
ul {
    list-style: none;
    margin: .5em;
    padding: 0 1em;
}
.project-details ul {
    list-style: square;
    margin: .5em 0;
    padding: 0 1em 1em 2em;
    border-bottom: 1px solid #eeeeee;
}
.project-details li {
    margin: .25em .5em;
}
</style>
</head>
<body>

<div class="project-widget project-details">
    <h3>At-a-Glance</h3>
    <h4>Your Strengths</h4>
    <ul>
        <li>UX has no limitations</li>
        <li>product assortment can be unique</li>
        <li>customer interaction</li>
    </ul>
    <h4>Your Weaknesses</h4>
    <ul>
        <li>kiosk</li>
    </ul>
    <h4>Your Opportunities</h4>
    <ul>
        <li>UX design</li>
        <li>information architecture</li>
        <li>wireframinge</li>
        <li>personas</li>
        <li>project management</li>
    </ul>
    <h4>Your Threats</h4>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</div>

</body>
</html>
5

@ronpat - thanks for the help. I didn’t ever think bout validating CSS!

@Ray.H - thanks for the help and code. I’m still having trouble because I need to get the padding/margins right but absolutely can’t get the fa icons to work. No idea how to get them in the background and didn’ttry and the only CSS I can find for them is minified (font-awesome-min.css).

6

Hi,
The fa icons are being applied by a pseudo ::before element on the <i> element.

.fa-thumbs-down::before {
	content: "\f165";
}

That is the one that is applied to the “Your Threats”

They would not work as a bg image since they are not images, my mistake.

However you could apply the <i> classes directly to your <h> tags and eliminate the <i> tag. I just tested that and it does work.

    <h5 class="fa fa-thumbs-down">Your Threats</h5>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>

In line 337 of projects css you would need to remove the left padding from the h5, commented out below. The ::before element (25px x 25px) is now on the h tag , replacing the 25px padding.

/*.project-details ul li h5, */
.project-details ul li p {
    padding-left: 25px;
    margin-bottom: 0;
}

I don’t know how much effort you want to invest in this. But if it were me I would change those h5’s to h4’s as I mentioned. Then you would need to edit those selectors to work with h4’s.

Are you able to track down your styles with ff inspector, or another equivalent web dev tool ?

2 Likes
7

Here is what your html currently is

<div class="project-widget project-details">
    <h3>At-a-Glance</h3>
    <ul>
        <li>
            <i class="fa fa-check-square"></i>
            <h5>Your Strengths</h5>
            <p><a href="#">UX has no limitations<br>product assortment can be unique<br>customer interaction</a></p>
        </li>
        <li>
            <i class="fa fa-chain-broken"></i>
            <h5>Your Weaknesses</h5>
            <p>kiosk</p>
        </li>
        <li>
            <i class="fa fa-thumbs-up"></i>
            <h5>Your Opportunities</h5>
            <p>UX design, information architecture, wireframing, personas, project management</p>
        </li>
        <li>
            <i class="fa fa-thumbs-down"></i>
            <h5>Your Threats</h5>
            <ul class="sidebar">
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ul>
        </li>
    </ul>
</div>

As you mentioned earlier, you are using <br> tags on the items in the “Your Strengths” <p> tag. Those should just be list items.

Then we have <h> tags nested in list items which I don’t particularly agree with as I explained earlier. Then they jump from h3 to h5 in that project-details sidebar, that’s why I am saying to change them to h4.

So here is how I would mark up that section now with the fa icons on the h4 tags…

<div class="project-widget project-details">
    <h3>At-a-Glance</h3>
    <h4 class="fa fa-check-square">Your Strengths</h4>
    <ul>
        <li>UX has no limitations</li>
        <li>product assortment can be unique</li>
        <li>customer interaction</li>
    </ul>
    <h4 class="fa fa-chain-broken">Your Weaknesses</h4>
    <ul>
        <li>kiosk</li>
    </ul>
    <h4 class="fa fa-thumbs-up">Your Opportunities</h4>
    <ul>
        <li>UX design</li>
        <li>information architecture</li>
        <li>wireframinge</li>
        <li>personas</li>
        <li>project management</li>
    </ul>
    <h4 class="fa fa-thumbs-down">Your Threats</h4>
    <ul class="sidebar">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</div>

You can still apply the square list markers to the “Your threats” section only, if that was your goal, since it still has it’s own class (.sidebar)

But now you would need to rework your selectors because the h tags are not nested in the li.

4 Likes
8

Thanks so much Ray!!

I finally have this working and H4 update too.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.