Hello everyone,

I have an issue with the hover effect I put on the bottom link. I gave the after state a height of 4 more pixels, and it's causing the bottom elements to bounce around a little bit. I didn't update the files, but I'm referring the bottom link with the background on this page. Can this be done with the two different heights on the before and after states of the background of the h2 element, or is it just a bad idea?

These are the current styles:
Code:
h2 a:before{
	background:url("lplinkstart.gif") no-repeat 0 0;
	content:" ";
	height:44px;
	left:-14px;
	position:absolute;
	top:0;
	width:26px;
	z-index:99;
}
h2 a{float:left; font-size:30px; font-style:italic; font-weight:bold; text-align:center; width:auto; height:44px; background:url("lplinkbody.gif") repeat-x scroll 0 0 transparent;}
h2 a:after{
	background:url("lplinkend.gif") no-repeat 100% 0;
	height:44px;
	right:-14px;
	position:absolute;
	top:0;
	width:26px;
	content:" ";
	z-index:99;
}
h2 a{position:relative; margin:30px 0 20px 0; padding:1px 1px 0 1px;}
h2 a{color:#009; text-shadow:1px 1px 1px #000;}
h2 a:hover{color:#FFF; text-decoration:none;}
h2 a:hover:before{
	background:url("lplinkstartafter.gif") no-repeat 0 0;
	content:" ";
	height:48px;
	left:-14px;
	position:absolute;
	top:-2px;
	width:26px;
	z-index:99;
}
h2 a:hover{float:left; font-size:30px; font-style:italic; font-weight:bold; text-align:center; width:auto; height:48px; background:url("lplinkbodyafter.gif") repeat-x scroll 0 -2px transparent;}
h2 a:hover:after{
	background:url("lplinkendafter.gif") no-repeat 100% 0;
	height:48px;
	right:-14px;
	position:absolute;
	top:-2px;
	width:26px;
	content:" ";
	z-index:99;
}