Trying to solve an IE 7 bug

Hi there,

On a side bar on one of our sites, we have “widgets.” These widgets can be expanded or contracted by little arrows. However, in IE 7 the placement of the arrows seem to be a bit off… here’s how it comes out (screen shot). Those arrows should be in the green header bar though (vertical align with “Clock”, etc).


/* v1.0 | 20080212 */

/* CSS reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
body {
	line-height: 1;
ol, ul {
	list-style: none;
blockquote, q {
	quotes: none;
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
:focus {
	outline: 0;
ins {
	text-decoration: none;
del {
	text-decoration: line-through;

/* Side styles */

.widget {
	border: 1px solid #83715d;
	margin: 1.7em auto;
.widget.widget-first {
	margin: 0 auto !important;
.widget .widget-header {
	color: #1d4319;
	font-weight: bold;
	background: #638837;
	border: 1px solid #C9DCD0;
	padding: 2px;
.widget .widget-arrow {
	float: right;
	height: 13px;
	width: 13px;
	margin: 1px 1px 0 0;
.widget .widget-arrow.arrow-down {
	background-image: url('');
.widget .widget-arrow.arrow-up {
	background-image: url('');
.widget .widget-sep {
	background: #83715d;
	height: 1px;
.widget .widget-content {
	border: 1px solid #fff;
	background: #e5efd7;
	padding: 2px;


				<!-- widget -->
				<div class="widget">
					<p class="widget-header">Clock <a href="#" class="widget-arrow arrow-up">&nbsp;</a></p>
					<div class="widget-sep"><!--i appear --></div>
					<div class="widget-content">
						<p align="center" id="clock">
							<?= date('l, F jS') ?><br>
							<?= date('g:i:s a') ?> ECT

Thanks in advanced… :cool:

It would work in IE7 if you put the widget first in the code, but you may not like that:

<p class="widget-header"><a href="#" class="widget-arrow arrow-up">&nbsp;</a>Clock</p>

There are probably other solutions, though, like using position: absolute instead of float.