OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Flickering near button's right edge

  • Thread starter Thread starter Maťo Valapka
  • Start date Start date
M

Maťo Valapka

Guest
When you move the cursor close to the right edge of "Projects", it starts flickering.


Code:
:root {
    --light-gray: #979797;
    --dark-gray: #3D3D3D;
    --orange: #ff8400;
    --gray: #808080;
}

html, body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

li, .nav_links a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: large;
    text-decoration: none;
    color: #edf0f1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 6%;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: large;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--orange);
    padding-left: 6%;
}

.header nav {
    flex-grow: 1;
    text-align: center;
}

a {
    color: white;
}

.nav_links {
    list-style: none;
    color: white;
    display: flex;
    justify-content: center;
    position: relative;
}

.nav_links li {
    display: inline-block;
    padding: 0 20px;
    color: white;
}

.nav_links li a:hover {
    color: var(--orange);
}

.buttons_home {
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 10%;
    width: 100%;
    list-style: none;
    padding: 0;
}

.buttons_home li {
    width: 27%;
}

.home_button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 20% 10%;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 125%;
    text-decoration: none;
    display: block;
    text-align: center;
}

.home_button:hover {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: white;
}

.nav_links li a.active {
    color: var(--orange);
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #000 url(bg.webp) repeat 0 0;
    flex-grow: 1;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: medium;
    border-top: 2px solid var(--orange);
    position: relative;
}

.footer p {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
    position: relative;
}

.project_menu {
    display: none;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 2px solid var(--orange);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.project_menu li {
    padding: 10px 20px;
}

.project_menu li a {
    color: white;
    text-decoration: none;
}

.project_menu li a:hover {
    color: var(--orange);
}

.project_menu:hover {
    border: 2px solid white;
}

.dropdown:hover .project_menu {
    display: block;
    border-top: none;
}

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="content">
            <ul class="buttons_home">
                <li><a class="home_button" href="about.html">About</a></li>
                <li><a class="home_button" href="resume.html">Resume</a></li>
                
                <li class="dropdown">
                    <a class="home_button" href="#">Projects</a>
                    <ul class="project_menu">
                        <li><a href="projects.html">Kalkulacka</a></li>
                        <li><a href="projects.html">Projekt2</a></li>
                        <li><a href="projects.html">Projekt3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        
        <div class="footer">
            <p>© 2024</p>
        </div>
    </div>
</body>
</html>

Code:
:root {
    --light-gray: #979797;
    --dark-gray: #3D3D3D;
    --orange: #ff8400;
    --gray: #808080;
}

html, body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

li, .nav_links a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: large;
    text-decoration: none;
    color: #edf0f1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 6%;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: large;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--orange);
    padding-left: 6%;
}

.header nav {
    flex-grow: 1;
    text-align: center;
}

a {
    color: white;
}

.nav_links {
    list-style: none;
    color: white;
    display: flex;
    justify-content: center;
    position: relative;
}

.nav_links li {
    display: inline-block;
    padding: 0 20px;
    color: white;
}

.nav_links li a:hover {
    color: var(--orange);
}

.buttons_home {
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 10%;
    width: 100%;
    list-style: none;
    padding: 0;
}

.buttons_home li {
    width: 27%;
}

.home_button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 20% 10%;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 125%;
    text-decoration: none;
    display: block;
    text-align: center;
}

.home_button:hover {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: white;
}

.nav_links li a.active {
    color: var(--orange);
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #000 url(bg.webp) repeat 0 0;
    flex-grow: 1;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: medium;
    border-top: 2px solid var(--orange);
    position: relative;
}

.footer p {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
    position: relative;
}

.project_menu {
    display: none;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 2px solid var(--orange);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.project_menu li {
    padding: 10px 20px;
}

.project_menu li a {
    color: white;
    text-decoration: none;
}

.project_menu li a:hover {
    color: var(--orange);
}

.project_menu:hover {
    border: 2px solid white;
}

.dropdown:hover .project_menu {
    display: block;
    border-top: none;
}

https://jsfiddle.net/Matko223/opkd963x/15/

I tried to change the width and position of the dropdown menu, but couldn't figure it out. For some reason the dropdown menu is longer than the "Projects" button, therefore the border doesn't connect properly.

Code:
.project_menu {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: -2px;
    background-color: transparent;
    border: 2px solid var(--orange);
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    width: calc(100% + 4px);
}

What it should look like after hovering over the "Projects" button : Expected result

Video(Screen recorder wouldn't capture it):

It is even worse, when I test it on the Live Server extension.
<p>When you move the cursor close to the right edge of "Projects", it starts flickering.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
--light-gray: #979797;
--dark-gray: #3D3D3D;
--orange: #ff8400;
--gray: #808080;
}

html, body {
height: 100%;
margin: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

li, .nav_links a, button {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: large;
text-decoration: none;
color: #edf0f1;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 6%;
background: #000 url(bg.webp) repeat 0 0;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: large;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 2px solid var(--orange);
padding-left: 6%;
}

.header nav {
flex-grow: 1;
text-align: center;
}

a {
color: white;
}

.nav_links {
list-style: none;
color: white;
display: flex;
justify-content: center;
position: relative;
}

.nav_links li {
display: inline-block;
padding: 0 20px;
color: white;
}

.nav_links li a:hover {
color: var(--orange);
}

.buttons_home {
display: flex;
justify-content: center;
gap: 5%;
margin-top: 10%;
width: 100%;
list-style: none;
padding: 0;
}

.buttons_home li {
width: 27%;
}

.home_button {
background-color: transparent;
color: white;
border: 2px solid white;
padding: 20% 10%;
cursor: pointer;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 125%;
text-decoration: none;
display: block;
text-align: center;
}

.home_button:hover {
background-color: transparent;
border: 2px solid var(--orange);
color: white;
}

.nav_links li a.active {
color: var(--orange);
}

.container {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}

.content {
padding: 20px;
display: flex;
flex-direction: column;
background: #000 url(bg.webp) repeat 0 0;
flex-grow: 1;
}

.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #000 url(bg.webp) repeat 0 0;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: medium;
border-top: 2px solid var(--orange);
position: relative;
}

.footer p {
margin: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
position: relative;
}

.project_menu {
display: none;
top: 100%;
left: 0;
background-color: #000;
border: 2px solid var(--orange);
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}

.project_menu li {
padding: 10px 20px;
}

.project_menu li a {
color: white;
text-decoration: none;
}

.project_menu li a:hover {
color: var(--orange);
}

.project_menu:hover {
border: 2px solid white;
}

.dropdown:hover .project_menu {
display: block;
border-top: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="content">
<ul class="buttons_home">
<li><a class="home_button" href="about.html">About</a></li>
<li><a class="home_button" href="resume.html">Resume</a></li>

<li class="dropdown">
<a class="home_button" href="#">Projects</a>
<ul class="project_menu">
<li><a href="projects.html">Kalkulacka</a></li>
<li><a href="projects.html">Projekt2</a></li>
<li><a href="projects.html">Projekt3</a></li>
</ul>
</li>
</ul>
</div>

<div class="footer">
<p>© 2024</p>
</div>
</div>
</body>
</html></code></pre>
</div>
</div>
</p>
<pre><code>:root {
--light-gray: #979797;
--dark-gray: #3D3D3D;
--orange: #ff8400;
--gray: #808080;
}

html, body {
height: 100%;
margin: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

li, .nav_links a, button {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: large;
text-decoration: none;
color: #edf0f1;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 6%;
background: #000 url(bg.webp) repeat 0 0;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: large;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 2px solid var(--orange);
padding-left: 6%;
}

.header nav {
flex-grow: 1;
text-align: center;
}

a {
color: white;
}

.nav_links {
list-style: none;
color: white;
display: flex;
justify-content: center;
position: relative;
}

.nav_links li {
display: inline-block;
padding: 0 20px;
color: white;
}

.nav_links li a:hover {
color: var(--orange);
}

.buttons_home {
display: flex;
justify-content: center;
gap: 5%;
margin-top: 10%;
width: 100%;
list-style: none;
padding: 0;
}

.buttons_home li {
width: 27%;
}

.home_button {
background-color: transparent;
color: white;
border: 2px solid white;
padding: 20% 10%;
cursor: pointer;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 125%;
text-decoration: none;
display: block;
text-align: center;
}

.home_button:hover {
background-color: transparent;
border: 2px solid var(--orange);
color: white;
}

.nav_links li a.active {
color: var(--orange);
}

.container {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}

.content {
padding: 20px;
display: flex;
flex-direction: column;
background: #000 url(bg.webp) repeat 0 0;
flex-grow: 1;
}

.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #000 url(bg.webp) repeat 0 0;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: medium;
border-top: 2px solid var(--orange);
position: relative;
}

.footer p {
margin: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
position: relative;
}

.project_menu {
display: none;
top: 100%;
left: 0;
background-color: #000;
border: 2px solid var(--orange);
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}

.project_menu li {
padding: 10px 20px;
}

.project_menu li a {
color: white;
text-decoration: none;
}

.project_menu li a:hover {
color: var(--orange);
}

.project_menu:hover {
border: 2px solid white;
}

.dropdown:hover .project_menu {
display: block;
border-top: none;
}
</code></pre>
<p><a href="https://jsfiddle.net/Matko223/opkd963x/15/" rel="nofollow noreferrer">https://jsfiddle.net/Matko223/opkd963x/15/</a></p>
<p>I tried to change the width and position of the dropdown menu, but couldn't figure it out.
For some reason the dropdown menu is longer than the "Projects" button, therefore the border doesn't connect properly.</p>
<pre><code>.project_menu {
display: none;
position: absolute;
top: calc(100% - 2px);
left: -2px;
background-color: transparent;
border: 2px solid var(--orange);
z-index: 1;
list-style: none;
padding: 0;
margin: 0;
width: calc(100% + 4px);
}
</code></pre>
<p><strong>What it should look like after hovering over the "Projects" button :</strong>
<a href="https://i.sstatic.net/cwaAz3pg.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/cwaAz3pg.jpg" alt="Expected result" /></a></p>
<p><strong>Video(Screen recorder wouldn't capture it):</strong>
<a href="
" rel="nofollow noreferrer">
</a></p>
<p>It is even worse, when I test it on the Live Server extension.</p>
Continue reading...
 

Latest posts

Top