Inexplicable lines on page

[Kevin E.]

Hello,

I am working on updating a site using a template. Everything has come along well except that there are some unwanted horizontal lines appearing on top of the graphic and the page areas. I've gone all through the code and cannot figure out how to get rid of them. Can anyone help?rideskat.org/index4.html 

[BenPleysier]

Use the developer tools in your browser and all will be revealed as in

Or better still, used Wappler so that you can be independent of a browser:

[Jon Fritz]

You have border settings on multiple h2 selectors that affect those elements.

You may have only wanted the borders on specific <h2> tags, but your selectors that Ben points out, are general enough to cause the lines to also be added to the empty h2 tags in that affected area.

For what it's worth, it doesn't make sense to use <h2> in this context. <h2> tags are semantic tags that tell search engine crawlers what the second most important heading on your page is. They should always have important html text between them. There are a ton of ways to go about creating space that won't confuse search engines and screen readers (margin or padding settings make more sense here).

Here's some more info: https://www.w3schools.com/html/html_headings.asp 

[Kevin E.]

This is a template that I downloadedthat I'm working from.

i've sought out every H2 tag in the CSS and the HTML and changed the value to zero. The lines are still there. Can you tell me specifically what line needs to be changed?

[Jon Fritz]

There are a few places.

1. The border on line 1795 in the main.css file
2. The border-top on line 1812 in the main.css file
3. The border-bottom on line 1821 in the main.css file

Commenting out those three settings out removes the lines from your image, but that may also remove them from places you actually want them.

[BenPleysier]

There are a few places.

1. The border on line 1795 in the main.css file
2. The border-top on line 1812 in the main.css file
3. The border-bottom on line 1821 in the main.css file

Commenting out those three settings out removes the lines from your image, but that may also remove them from places you actually want them.

By @Jon Fritz

Better still, don't remove them, make them transparent by changing the opacity to 0% as in

border: solid 1px rgba(255, 255, 255, 0);

[Nancy OShea]

FYI, blue text on a green background is a very bad combination for visually challenged people.  

A public transit website has to conform to WCAG. A scan of that page found 19 accessibility violations that could pose potential legal issues ahead.

https://www.audioeye.com/lp/wcag-web-compliance/