I have encountered an issue where I am unable to maintain consistent padding for a button relative to the column width. This is crucial for me because the button's background changes when a user hovers over it. However, using a fixed value for the button padding causes distortion when users zoom in or out by a few levels. I attempted to use percentage values for the padding, but unfortunately, it did not work. Any assistance in resolving this would be greatly appreciated!
You can easily test my code on your own computer to see the problem:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<!--<link rel="shortcut icon" href="#" />-->
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<center>
<div id="main">
<div id="header">
</div>
<div id="menupane">
<center><a href="#" class="buttons">Home</a></center>
</div>
</div>
</center>
</body>
</html>
CSS:
#main
{
width: 80%;
height: 590px
}
#header
{
background-color: #1f3568;
height: 12%;
}
#menupane
{
background-color: #cfd3db;
height: 85%;
width: 8%;
float: left;
}
.buttons
{
color: #1f3568;
text-decoration: none;
margin-right: 0px;
line-height: 40px;
}
.buttons:hover
{
background-color: #677ba7;
}
Thank you in advance for any help.