Check out my website at . Everything looks great in Firefox, but when I view it in IE, the "top" button that should be floated inside the h2 titled "Unit 301: Pre-production skills" is floating to the right and getting pushed outside of the heading.
Any ideas on why this might be happening?
Here is a snippet of the HTML code:
<h2>
Unit 301: Pre-production skills
<a class="top" href="http://biteof.com/units_and_evidence/#top"/>
</h2>
And here's a glimpse at the CSS code:
h2 {
background:#235ec9 0 0;
color:#ffffff;
display:block;
font-size:16px;
height:40px;
line-height:40px;
margin:10px 0 10px -12px;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-indent:30px;
width:880px;
clear:both;
}
a.top:hover {
background-position:0 -40px;
}
a.top {
background-image:url(images/top.gif);
background-position:0 0;
display:block;
float:right;
height:40px;
width:55px;
}