I am having an issue where a span is displaying on a second line in IE7 and not inline with the h3 and h4 tags. In IE8 and Firefox everything is working perfectly. The span is the problem and if anyone knows what I am doing wrong I would greatly appreciate any feedback:
CSS code:
.accordion-wrap {
background-color: #83add3;
width: 100%;
margin: 0 0 20px 0;
}
.accordion {
width: 500px;
margin: 0 auto;
}
.accordion h1 {
font-size: 16px;
color: #fff;
font-weight: bold;
margin: 0;
padding: 0;
}
.accordion a {
color: #ffffff;
text-decoration: none;
}
.accordion span {
float: right;
}
.accordion ul {
display: none;
padding: 0;
margin: 0;
}
.accordion ul li {
list-style: none;
}
.accordion h3 {
background-color: #467aad;
border-top: 1px #5e8ebc solid;
border-left: 1px #5e8ebc solid;
border-right: 1px #5e8ebc solid;
font-size: 12px;
cursor: pointer;
color: #ffffff;
padding: 3px 5px;
margin: 0;
}
.accordion h3.last {
border-bottom: 1px #5e8ebc solid;
}
.accordion h3:hover {
color: #daecf8;
text-decoration: none;
background-color: #5e8ebc;
}
.accordion h3.active {
/* background-position: right 5px;
*/}
.accordion h4 {
background-color: #9ec0de;
cursor: pointer;
color: #1b4772;
font-size: 11px;
padding: 3px 5px 3px 20px;
margin: 0;
}
.accordion h4:hover {
color: #daecf8;
text-decoration: none;
}
.accordion h4.active {
/* background-position: right 5px;
*/}
.accordion ul li ul {
background-color: #9ec0de;
cursor: pointer;
color: #1b4772;
font-size: 11px;
padding: 3px 5px 3px 35px;
margin: 0;
font-weight: normal;
}
HTML Code:
<div class="accordion-wrap">
<div class="accordion">
<h1>Areas We Serve</h1>
<h3>Delaware<span><a href="http://www.google.com">More Information</a></span></h3>
<ul>
<li>
<h4>New Castle County<span><a href="http://www.google.com">More Information</a></span></h4>
<ul>
<li><a href="http://www.google.com">Sample City</a></li>
<li><a href="http://www.google.com">Sample City</a></li>
<li><a href="http://www.google.com">Sample City</a></li>
</ul>
</li>
</ul>
<h3>New Jersey<span><a href="http://www.google.com">More Information</a></span></h3>
<ul>
<li>
<h4>Atlantic County<span><a href="http://www.google.com">More Information</a></span></h4>
<ul>
<li><a href="http://www.google.com">Sample City</a></li>
<li><a href="http://www.google.com">Sample City</a></li>
<li><a href="http://www.google.com">Sample City</a></li>
</ul>
<h4>Bucks County<span><a href="http://www.google.com">More Information</a></span></h4>
<ul>
<li><a href="http://www.google.com">Sample City</a></li>
<li><a href="http://www.google.com">Sample City</a></li>
<li><a href="http://www.google.com">Sample City</a></li>
</ul>
<h4>Burlington County<span><a href="http://www.google.com">More Information</a></span></h4>
<ul>
<li><a href="http://www.google.com">Sample City</a></li>
<li><a href="http://www.google.com">Sample City</a></li>
<li><a href="http://www.google.com">Sample City</a></li>
</ul>
<h4>Camden County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Cape May County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Cumberland County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Gloucester County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Hunterdon County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Mercer County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Middlesex County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Monmouth County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Ocean County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Philadelphia County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Salem County<span><a href="http://www.google.com">More Information</a></span></h4>
</li>
</ul>
<h3>Pennsylvania<span><a href="http://www.google.com">More Information</a></span></h3>
<ul>
<li>
<h4>Atlantic County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Berks County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Bucks County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Burlington County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Camden County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Chester County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Delaware County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Gloucester County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Lehigh County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Mercer County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Montgomery County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Northampton County<span><a href="http://www.google.com">More Information</a></span></h4>
<h4>Philadelphia County<span><a href="http://www.google.com">More Information</a></span></h4>
</li>
</ul>
<h3 class="last">Virginia<span><a href="http://www.google.com">More Information</a></span></h3>
<ul>
<li>
<h4>n/a<span><a href="http://www.google.com">More Information</a></span></h4>
</li>
</ul>
</div>
</div>