Yes and yes.
You also need to set “top” so that the lines start below the outer border.
2 Likes
Like this?
.covere::before,
.covere::after {
content: "";
position: absolute;
top: 3px;
left: 86px;
width: 3px;
height: 168px;
background: red;
}
Does that work?
Yes it does, thank you very much.
1 Like
I’m having major issues with this code, The CSS is not working in blogger.
Look:
https://testinggridplayer.blogspot.com/
I just removed the javascript from it so you can take a closer look.
It took me a long time to get it working right, now it’s not working on blogger.
While the above code is being worked on,
Can you tell me what the issue is with this one?
https://debugplaybutton.blogspot.com/
Why is there a stray link box in the top left corner?
Old setup is fixed until the new code is readjusted.
Old html, connected to the new javascript.
You will need to learn how to use the dev tools in your browser to pin point all the theme styles that are interfering with your CSS.
If your using Firefox, right click on the page and select “Inspect Element”.
Upon doing that I find that the problem rules in the theme’s internal style sheet beginning around line 213 to line 237.
( I see your styles beginning at line 578)
The offending selectors looks to be …
.main-inner .widget ul
.main-inner .widget ul li
.main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
margin: -8px -15px 0;
padding: 0;
list-style: none;
}
.main-inner .widget #ArchiveList {
margin: -8px 0 0;
}
.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
padding: .5em 15px;
text-indent: 0;
color: #666666;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid transparent;
}
.main-inner .widget #ArchiveList ul li {
padding-top: .25em;
padding-bottom: .25em;
}
.main-inner .widget ul li:first-child, .main-inner .widget #ArchiveList ul.flat li:first-child {
border-top: none;
}
.main-inner .widget ul li:last-child, .main-inner .widget #ArchiveList ul.flat li:last-child {
border-bottom: none;
}
1 Like
I don’t want to touch any of that.
But it works like this with the new javascript.
It doesn’t get all messed up using this.
So are you saying that the issue is resolved?
No, it’s not resolved.
This works in blogger:
Old html, connected to the new javascript.
https://debugplaybutton.blogspot.com/
<div class="linkse">
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a> Audio Player</a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="" target="_blank" title=""></a>
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
<div class="left-background"></div>
<div class="left-border"></div>
<div class="middle-background"></div>
<div class="right-border"></div>
<div class="right-background"></div>
</a>
</div>
This one doesn’t.
https://jsfiddle.net/86fxss1q/2/
https://testinggridplayer.blogspot.com/
<ul class="nave">
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li><a> Audio Player</a></li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li>
<a href="#" target="_blank" title=""></a>
</li>
<li class="grade">
<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
</li>
</ul>
So why not just use the working version?
The alternative is to do as @Ray.H says, and use dev tools to identify and overide conflicting rules.
1 Like
That’s the thing, blogger is applying it’s own styles to my li links.
I don’t think it can be resolved because of that, so I’ll just use the working version, with the new javascript.
Yes it can easily be resolved by studying the specificity. CSS has rules and once you learn them you can rule the world and do what you like 
4 Likes
When briefly looking through the blogger page with dev tools I mentioned above that it looked like these are offending selectors
.main-inner .widget ul ``.main-inner .widget ul li
They are adding the margins and borders
You just need to add more specificity to your ul li rules
.widget ul.nave {
margin: 0;
padding: 0;
list-style: none;
}
.widget ul.nave li {
float: left;
margin:0;
padding:0;
border:none;
}
It was all fixed by this simple change .widget ul.nave
There was no need to resort to rewriting javascript to compensate for a lack of understanding.
Blogger just added the class .widget to your code, you were already familiar with this since your own js was adding .hide and .active classes.
Your CSS was written to compensate for the classes that your js added, so the concept was not new to you.
6 Likes
I have a question about something.
If I’m not using this on blogger, would it make sense to put
margin: 0;
padding: 0;
On this rule-set also,
.nav li {
float: left;
}
Or is it not necessary?
Why would it be on one, but not the other?
How I currently have it.
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
float: left;
}
or change it to this.
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
float: left;
margin: 0;
padding: 0;
}
You’d find that already built into Eric Meyer’s reset, or in normalize.css. They are commonly used tools used to ensure that the majority or browsers start from a common baseline. The developer can then be sure that any margins applied in their own CSS will behave consistently in whatever browser their users are employing.
1 Like
I’m sorry, that didn’t exactly answer my question.
Given that you’ve not described what effect you’re trying to achieve, it’s probably as good as any other answer you’re likely to get at the moment. As with so many questions floating round the forum at the moment, it depends…
So long as you understand that you are collapsing any previously declared margins and padding (including the ones in the User Agent Stylesheet), on two different elements, then use whichever one gives you the desired effect you’re looking for.
1 Like