Trying to solve an IE 7 bug

HTML & CSS
1

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).

CSS:

/* 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('http://static.eggcave.com/layout/toggle-down-light.png');
}
.widget .widget-arrow.arrow-up {
	background-image: url('http://static.eggcave.com/layout/toggle-up-dark.png');
}
.widget .widget-sep {
	background: #83715d;
	height: 1px;
}
.widget .widget-content {
	border: 1px solid #fff;
	background: #e5efd7;
	padding: 2px;
}

HTML:


				<!-- 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
						</p>
					</div>
				</div>

Thanks in advanced… :cool:

2

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.