SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Threaded View

  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    3 Post(s)
    0 Thread(s)

    positioned div messing up list in ie6 and less


    i've been instructed to put an animating arrow on a site i've done. have done it to a certain extent but it's not right in ie 6 and less. it's effecting one of the list items:



    the animating arrow is on the left, light blue. in the ie6 one it's messing up the list item which has the two images in, which are both in a floated right div within the li.

    page in question here:

    the relevent, i think, style is at the top of the style within the page.

    the arrow and list's html:
    <div id="arrow">
    <img src="images-temp/down-arrow-animated-darker.gif" width="25" height="50" alt="" />
    </div><!-- arrow -->
    <ul id="evapcoolingpoints">
    	<li><span>Evaporative cooling has a tiny carbon footprint. It cools buildings efficiently, consuming very little electricity even during hot&nbsp;periods.</span></li>
    	<li><span>Costs a small fraction of other cooling systems. Typically a quarter the installation, and one tenth the running costs of air&nbsp;conditioning.</span></li>
    	<li><span>Cools any sized enclosed spaces. From small offices to large warehouses, to sports facilities, and tented&nbsp;villages.</span></li>
    	<li><span>Safe. Fresh non-recycled air. No danger of&nbsp;disease.</span></li>
    	<li><div><img src="images/sealantgun.jpg" width="76" height="43" alt="" title="No need for sealed spaces." /><img src="images/open-window.jpg" width="41" height="45" alt="" title="Open windows and doors are fine." /></div><span>Works best in well ventilated spaces. No need for a sealed building, nor to keep windows and doors&nbsp;closed.</span></li>
    	<li><span>No need to upgrade to latest building regulations.</span></li>
    the arrow and list's (and the headings which comes above the arrow) css:
    	position: relative;
    	left: -20px;
    	margin-right: -60px;
    	margin-top: 120px;
    	float: left;
    	margin-left: 15px;
    	/*border:20px red solid;*/
    h2#one, h2#two
    	line-height: 1.3;
    	font-weight: normal;
    	font-size: 1.5em;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    h2#two .cooltech { font-size: 85%; }
    	margin-bottom: .5em;
    	padding-top: .8em;
    h2#two { margin-bottom: 2em; }
    #evapcoolingpoints { line-height: 1.3; }
    	margin-left: -20px;
    	margin-bottom: 2em;
    #evapcoolingpoints li
    	margin-bottom: .8em;
    	font-size: 115%;
    	padding-left: 0;
    	margin-left: 80px;
    #evapcoolingpoints li div  /* the two small images with red cross and green tick in */
    	float: right;
    	margin-top: -3px;
    	margin-left: 10px;
    #evapcoolingpoints li div img { margin-left: 3px; }
    how to stop the arrow messing up the list in ie6 ?

    Last edited by johnyboy; Nov 17, 2007 at 09:18.


Posting Permissions

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