SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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


    CSS:

    Code 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:

    Code HTML4Strict:
    				<!-- 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...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It would work in IE7 if you put the widget first in the code, but you may not like that:

    Code:
    <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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •