SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    positioned div messing up list in ie6 and less

    hi,

    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:

    ie6:


    safari:


    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: http://www.hdbatik.co.uk/tmp-ct/main-with-arrow2

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

    the arrow and list's html:
    Code:
    <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>
    </ul>
    the arrow and list's (and the headings which comes above the arrow) css:
    Code:
    #arrow
    {
    	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%; }
    
    h2#one
    {
    	margin-bottom: .5em;
    	padding-top: .8em;
    }
    
    h2#two { margin-bottom: 2em; }
    #evapcoolingpoints { line-height: 1.3; }
    
    ul#evapcoolingpoints
    {
    	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 ?

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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Looks like "haslayout" and the three pixel jog in effect there. This will straighten it out but you will probably have to re-adjust for IE afterwards.

    Code:
    * html ul#evapcoolingpoints,
    * html ul#evapcoolingpoints li{height:1&#37;}

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Might be also better to float the ul.

    Code:
    * html ul#evapcoolingpoints {float:left}

  4. #4
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Might be also better to float the ul.

    Code:
    * html ul#evapcoolingpoints {float:left}
    cool, have done that http://www.hdbatik.co.uk/tmp-ct/main-with-arrow4 and am waiting for browsershots (which is going quite quick at the minute)

    thanks

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    hi Paul, thanks very much for the reply. i'll give that a go and see how it looks. not quite sure what you mean "you will probably have to re-adjust for IE afterwards" at the moment but it will likely become clear once i see how it comes out in ie. thanks

  6. #6
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    it's had a posative effect but hasn't sorted it completely. i've tried a number of variations to Paul's suggestion none of which had any further effect. the blue bullet points are now verically aligned but are horizontally aligned to the 2nd line of the text, if there is a 2nd line, of the li's. and the li with the two images, the one which was causing the problem to start with, the first line's text is still indented. any further suggestions? be much 'preciated thanks.

  7. #7
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Paul, by this: "but you will probably have to re-adjust for IE afterwards" did you mean: re-adjust the position of the arrow for IE6 and less afterwards ?

    thanks.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    OK try this instead

    Remove the previous code I gave you and try this.
    Code:
    ul#evapcoolingpoints
    {
        margin-left: -20px;
        margin-bottom: 2em;
    float:left
    }
    #evapcoolingpoints li div  /* the two small images with red cross and green tick in */
    {
        float: right;
        margin-top: -3px;
        padding-left: 10px;
    }

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, I would just combine the cooler image with the animated image so the whole thing could be just one background image to the <ul> ....

  10. #10
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Personally, I would just combine the cooler image with the animated image so the whole thing could be just one background image to the <ul> ....
    ah, but i don't think animated images (gifs) work as background images in some (most/all?) browsers do they?

    am trying new suggested way -- thanks for that Paul

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnyboy View Post
    ah, but i don't think animated images (gifs) work as background images in some (most/all?) browsers do they?
    As far as I know it works in everything no problem.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by centauri
    Personally, I would just combine the cooler image with the animated image so the whole thing could be just one background image to the <ul> .
    Yes that would be neater and save some html

    The last code I added above would still need to be used as there was another bug in that li div that needed fixing anyway.

  13. #13
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    the damn bullets are down aligned vertically with the second line of text in the li's, if there is one, again! and the li with the images in is indented. in ie6 that is. http://www.hdbatik.co.uk/tmp-ct/main-with-arrow6


    what is it that's making the bullets align to the second line? most strange. any other ideas?! thanks.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The last code I posted was working on all fronts. You haven't removed the margin-left as in the code I posted. Its this margin-left that is causing the strange indent in IE.

    Code:
    #evapcoolingpoints li div  /* the two small images with red cross and green tick in */
    {
        float: right;
        margin-top: -3px;
        /*margin-left: 10px; remove this*/
        padding-left:10px;
    }

  15. #15
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ Any reason to avoid the double margin fix (which I'm sure you know)? Did you just want less code? Or did you not want to confuse him with the display:inline; ?

  16. #16
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh yes you're asbolutely right i had left that in and removing it fixed the unwanted indent. excellent, thanks Paul. and the thing i was going on about (bullets aligning to second line of li's) was because i had left a float:left in the li of the ul accidentally from when i was trying various things to get it to work.

    great, thanks very much.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SoulScratch
    ^ Any reason to avoid the double margin fix (which I'm sure you know)? Did you just want less code? Or did you not want to confuse him with the display:inline; ?
    I'm just getting lazy I guess

    Yes the display-inline fix would cure the extra margin but it was a little confusing in the above case because the extra margin was evident at the other end of the line of text and not on the image itself which seemed to be placed correctly.

    In fact this seems to another type of bug because usually the double margin is only evident on the side that is touching the containers edge. As this element was floated right then usually only the right margin would be affected (if it was floated left then the left margin would be affected as long as it was touching the containers edge).

    In this case the element was floated right but unexpectedly the left margin was having an effect in two places at once! It was pushing the image away from the text as expected but was also pushing the text away from the containers edge also.

    In normal circumstances this effect can't be reproduced so there seem to be a combination of factors coming together to cause the issue. Its probably also related to the negative margins on the other elements causing IE to get out of sync.

    So now you know why I suggested padding-left instead


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
  •