Pet Profile Jumping when Clicking on Div Navigation

Somewhere in my amateur code for

Proserpina I messed up and the page jumps when I click on the different chapters to navigate on her page.

I've been experimenting with writing code and pulling different resources from W3Schools, so I apologize is the code is messy or awful to look at to the trained eye. I could really use some help fixing this!

Thank you in advance.

SPOILER (click to toggle)

<style>
::-webkit-scrollbar {width: 5px; border-radius: 45px 45px 45px 45px; }
::-webkit-scrollbar-track {background: transparent; border-radius: 45px 45px 45px 45px;}
::-webkit-scrollbar-thumb {background: ; border-radius: 45px 45px 45px 45px;}
.pet_name, , , , , , , , , .pet_wco_info_date, h2,  .pet_like, , , .pet_age_info_date {display: none;}
.owner {
font-size: 10px;
position: absolute;
top: 285px;
left: 250px;
}
.pet_color_info {
font-size: 10px;
position: absolute;
top: 285px;
left: 350px;
}
 {
font-size: 10px;
position: absolute;
top: 325px;
left: 520px;
width: 75px;
border: 1px dashed ;
height: 125px;
overflow: hidden;
}
 {
background-image: url(https://i.imgur.com/C3ZDD68.png), url(https://img.subeta.net/pets/kumos_glade.png);
background-color: rgba(249, 214, 241);
background-position: center top, center 20px;
background-repeat: no-repeat, no-repeat;
position: absolute;
top: 0px;
left: 0px;
height: 0px;
width: 200px;
overflow: hidden;
border-bottom: 20px solid transparent;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
:hover {	
height: 200px;	
padding: 0px;	
overflow: none;
}
 {
position:absolute;
top: 475px;
left: 200px;
height: 25px;
width: 215px;
border: 1px dashed ;
overflow: auto;
}
.treasure_item {
width: 25px;
height: 25px;
padding-left: 3px;
padding-bottom: 3px;
}
 img {
width: 25px;
height: 25px;
padding-left: 3px;
padding-bottom: 3px;
}
body {
background-image: url(https://i.imgur.com/EnFxExP.png), url(https://i.imgur.com/EfXzVuq.png);
background-repeat: no-repeat, repeat;
background-position: top left, top left;
overflow-y: auto;
}
 {
background: none;
height: 700px!important;
}
 {
position:absolute;
top: 300px;
left: 175px;
height: 150px;
width: 250px;
overflow: hidden;
background-color: transparent;
padding: 10px;
border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
padding-right: 40px;
text-align: center;
font-family: calibri;
}
, , , , ,  {
height: 150px;
width: 250px;
overflow:auto;
background-color: transparent;
padding: 10px;
border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
padding-right: 40px;
text-align: center;
font-size: 12px;
font-family: calibri;
}
 {
align:center;
position:absolute;
top:300px;
left:450px;
width:46px;
font-family: calibri;
font-size: 12px;
}
 {
background-image: url(https://i.imgur.com/C3ZDD68.png);
background-repeat: no-repeat;
background-position: center top;
font-size: 11px;
font-family:calibri;
text-align:center;
position: absolute;
top: 0px;
left: 860px;
height: 0px;
width: 100px;
background-color: rgba(249, 214, 241);
overflow: hidden;
padding-top: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
:hover {height: 85px;}
a {color: ; text-shadow: .4px .4px ; text-decoration: none;}
a:link {color: ; text-shadow: .4px .4px ; text-decoration: none;}
a:visited {color: ; text-shadow: .4px .4px ; text-decoration: none;}
a:active {color: ; text-shadow: .4px .4px ; text-decoration: none;}
</style>

EDIT: I think I figured it out, if anyone has the same problem. Change your {height:XX!important;} to a number that fits your screen (mine happened to be 500px). It doesn't cut off your background and it solves the content jumping issue. I'm a dork for not playing with that sooner.

Logged Out

Pet Profile Jumping when Clicking on Div Navigation

Replies