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?
Am using Firefox and IE8 and don’t see a :hover problem with the link in the <h2> element.
I DO see that the clickable area for “Insurelane” is several pixels high.
In what browser do you see the jumpy link?
I tinkered with the html and added a little css at the top of this page to clear the floats. Let me know if this helps… or not:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="This page contains information on how to get home insurance quotes online, so you can find the best policy for your needs." />
<meta name="Keywords" content="health product reviews" />
<meta http-equiv="Content-Language" content="en" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="../style/lp.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
<title>Home Insurance Rate Quotes from All Providers</title>
<style type="text/css">
.articletext {padding-top:4px}
.wrapright img {
float:right;
padding-left:8px;
}
.wrapleft img {
float:left;
padding-right:8px;
}
.wrapright:after,
.wrapleft:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
h2 > a {margin-left:120px;}
</style>
</head>
<body>
<div id="lpheader"><!-- begin header div -->
<h1><span id="homeinsurance" class="sectionicon"></span> home & property insurance</h1>
</div><!-- end header div -->
<div id="lpbody"><!-- begin body div -->
<div id="textcontainer">
<p><span class="headtitle">Protect Your Home's Investment with Home Insurance Rate Quotes!</span></p>
<div class="wrapright">
<img src="homeinsurancerates1.jpg" alt="" title="Protect your #1 investment!"/>
<p class="hazard">Attention! What will Cover Your Losses Resulting from a Natural Disaster?</p>
<p class="articletext">Getting quotes from a large number of home insurance providers is the best solution to getting the most comprehensive coverage for a reasonable premium. Services like these will expand your horizons, so the consumer can get the full spectrum of the property insurance world. Act now so there will be coverage for your home if and when disaster strikes!</p>
</div>
<div class="wrapleft">
<img src="homeinsurancerates2.jpg" alt="" title="Keep your home looking like this after a storm." />
<p class="articletext">We have made a considerable effort to bring you the quoting tools you need to shop for the best policy for your needs. <!-- aff link needed --><a href="#">Insurelane</a> offers an efficient tool for receiving quotes for property insurance, but there are a bunch of other available applications. Another one that's worth checking out can be found at <!-- aff link needed --><a href="#">LowerMyHomeInsuranceRate.com</a>.</p>
</div>
<!-- next 2 divs added to demo extendability -->
<div class="wrapright">
<img src="homeinsurancerates2.jpg" alt="" title="Keep your home looking like this after a storm." />
<p class="articletext">We have made a considerable effort to bring you the quoting tools you need to shop for the best policy for your needs. <!-- aff link needed --><a href="#">Insurelane</a> offers an efficient tool for receiving quotes for property insurance, but there are a bunch of other available applications. Another one that's worth checking out can be found at <!-- aff link needed --><a href="#">LowerMyHomeInsuranceRate.com</a>.</p>
</div>
<div class="wrapleft">
<img src="homeinsurancerates1.jpg" alt="" title="Protect your #1 investment!"/>
<p class="articletext">Getting quotes from a large number of home insurance providers is the best solution to getting the most comprehensive coverage for a reasonable premium. Services like these will expand your horizons, so the consumer can get the full spectrum of the property insurance world. Act now so there will be coverage for your home if and when disaster strikes!</p>
</div>
<!-- prev 2 divs added to demo extendability -->
<h2><a href="#">Get a Property Insurance Quote</a></h2>
</div><!--end contain div -->
</div><!-- end body div -->
<div id="lpfooter"><!-- begin footer div -->
<form id="emailbox" name="form1" method="post" action="">
<div>
<label for="go">Join the Mailing List!<span></span></label>
<input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)"/>
<input type="submit" value="Join" />
</div>
</form>
</div><!-- end footer div -->
<script type="text/javascript" src="../Scripts/emailbox.js"></script>
</body>
</html>
Not sure what you’re trying to do here … I’m not getting any hover effect on the bottom link at all. If that’s because you don’t want to put the code live while it’s buggy, how about putting it up as a demo page so we can see the problem in action?
