Tweet
Please take a look at the attached code.
When I hover over the li item of 'portfolio' and then switch back and forth from hovering over 'portfolio' and 'contact us' it seems the space slightly increases and decreases.
I know its a minor thing, but is there a way to rectify this in the current format? I know I could potentially restructure things, however ideally want to keep the current format.
------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#bodywrapper {font-style:serif;
color:gray; }
.mainwrapper { width:800px;
margin:auto;
padding-top:25px; }
.headnavandlogo {color:#5898ED;
font-size:12px; }
.headnavandlogo ul {list-style-type:none; }
.headnav1 {float:right;
padding-right:100px; }
.headnav1 li {padding-bottom:3px;
padding-top:5px;
}
.headnav2 {float:right; }
.headnav2 li {padding-bottom:3px;
padding-top:5px;}
.headnav2 li:hover {border-bottom:solid;
border-width:1px;}
.headnav1 li:hover {border-bottom:solid;
border-width:1px; }
.homenav {border-bottom:solid;
border-width:1px;
margin-right:19px; }
</style>
</head>
<body id="bodywrapper">
<div class="mainwrapper">
<div class="headnavandlogo">
<ul class="headnav1">
<li class="portfolio">PORTFOLIO</li>
<li class="contactus">CONTACT US</li>
</ul>
<ul class="headnav2">
<li class="homenav">HOME</li>
<li class="servicesnav">SERVICES</li>
</ul>
</div>
</div>
</body>
</html>
When I hover over the li item of 'portfolio' and then switch back and forth from hovering over 'portfolio' and 'contact us' it seems the space slightly increases and decreases.
I know its a minor thing, but is there a way to rectify this in the current format? I know I could potentially restructure things, however ideally want to keep the current format.
------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#bodywrapper {font-style:serif;
color:gray; }
.mainwrapper { width:800px;
margin:auto;
padding-top:25px; }
.headnavandlogo {color:#5898ED;
font-size:12px; }
.headnavandlogo ul {list-style-type:none; }
.headnav1 {float:right;
padding-right:100px; }
.headnav1 li {padding-bottom:3px;
padding-top:5px;
}
.headnav2 {float:right; }
.headnav2 li {padding-bottom:3px;
padding-top:5px;}
.headnav2 li:hover {border-bottom:solid;
border-width:1px;}
.headnav1 li:hover {border-bottom:solid;
border-width:1px; }
.homenav {border-bottom:solid;
border-width:1px;
margin-right:19px; }
</style>
</head>
<body id="bodywrapper">
<div class="mainwrapper">
<div class="headnavandlogo">
<ul class="headnav1">
<li class="portfolio">PORTFOLIO</li>
<li class="contactus">CONTACT US</li>
</ul>
<ul class="headnav2">
<li class="homenav">HOME</li>
<li class="servicesnav">SERVICES</li>
</ul>
</div>
</div>
</body>
</html>
Comment