Problem with unordered list with image bullets

[Speedy007]

I'm rusty and can't figure this out. My home page won't validate and is having a problem with my list.

I have small images next to them instead of bullets. The only way I can make them line up vertically is to put several breaks in, which is what won't validate.

I'm assuming it's a problem to line them up the normal way because of the ul navbar code but I don't know how to override that.

Any help is greatly appreciated. Here's the website:  nancyrobinson.biz

Thank you in advance!

 

 

[Ingolme]

If you use CSS to set a large line-height to the <li> elements you won't need the <br> elements. You can also use margin or padding, there are a lot of options with CSS to style anything.

You really should never need a <br /> element anywhere, but especially not as direct children of a <ul> element.

[Speedy007]

Thank you so much. I know I need to brush up but I needed an answer ASAP. I will work on your suggestion and hit the books again.

Thank you!

[Speedy007]

Well, I tried giving the <li> a class of .bullet and a line-height but it's still not quite right. Breaks aren't in a normal list place.

Now what did I do wrong??

[Speedy007]

They seem to want to be laid out horizontally along with the nave bar. How to override??

It passes validation now but is not lining up on the page correctly, like a list should.

Edited January 17, 2019 by Speedy007
Added a thought.

[Ingolme]

Remove this from your CSS and replace it with a more specific rule that only targets the elements you want it to:

li {
    float: left;
}

 

[Speedy007]

OK. But what specific rule do you suggest? And my concern is that the float: left you mention targets the nav bar and that is needed.

Edited January 17, 2019 by Speedy007
More thoughts

[Speedy007]

Yeah, can't do that. It messes up the nav bar list. 

[dsonesuk]

You use a reference that will distinguish nav bar unordered list from custom unordered list and lastly a default unordered list styling

for nav bar

/*default normal ul li styling*/
ul {
/*yada yada yada */
}
li{
/*yada yada yada */
}

#navbar ul {
/*yada yada yada */
}
#navbar li {
/*yada yada yada */
}

#content .home {
/*yada yada yada */
}
#content .home li {
/*yada yada yada */
}