Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts

    Question Images in OL list clipped!

    Hi,

    I've got an ordered list where I've replaced the bullets with background images:

    Code:
    ol.itemThumbNail li {
    	list-style:none;
    	list-style-position: inside;
    	padding:0 0 18px 44px;
    	margin:0 0 1em 0;
    }
    
    ol.itemThumbNail li h2 {
    clear:both;
    padding:0;
    margin:0;
    }
    
    ol.itemThumbNail li.list1 {
    background:url(../../../hairdressing/images/step1.gif);
    background-repeat: no-repeat;
    }
    
    ol.itemThumbNail li.list1-first {
    background:url(../../../hairdressing/images/step1.gif);
    background-repeat: no-repeat;
    }
    
    ol.itemThumbNail li.list2 {
    background:url(../../../hairdressing/images/step2.gif);
    background-repeat: no-repeat;
    }
    
    ol.itemThumbNail li.list3 {
    background:url(../../../hairdressing/images/step3.gif);
    background-repeat: no-repeat;
    }
    
    ol.itemThumbNail li.list4 {
    background:url(../../../hairdressing/images/step4.gif);
    background-repeat: no-repeat;
    }
    
    ol.itemThumbNail li.list5 {
    background:url(../../../hairdressing/images/step5.gif);
    background-repeat: no-repeat;
    }
    The problem is that in IE6, some of the images get 'clipped/cut' as shown in this example:



    Here is the HTML:


    Code:
    	<ol class="itemThumbNail">
    	  <li class="list1-first"><h2>Step 1</h2>Wear disposable non-latex gloves when rinsing, shampooing, colouring, bleaching, etc.</li>
    	  <li class="list2"><h2>Step 2</h2>Dry your hands thoroughly with a soft cotton or paper towel.</li>
    	  <li class="list3"><h2>Step 3</h2>Moisturise after washing your hands, as well as at the start and end of each day. It's easy to miss fingertips, finger webs and wrists. See <a href="../skin/posters/handcream.pdf">'Skin care' [62KB]</a> for more information.</li>
          <li class="list4"><h2>Step 4</h2>Change gloves between clients. Make sure you don't contaminate your hands when you take them off. See <a href="../skin/posters/glovesingleuse.pdf">'Correct removal of gloves' [62KB]</a> for more information.</li>
    	  <li class="list5"><h2>Step 5</h2>Check skin regularly for early signs of dermatitis. See <a href="../skin/posters/dermatitis.pdf">'Skin checks' [59KB]</a> for more information.</li>
        </ol>

    Can anyone help?

    Many Thanks


  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,856
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can anyone help?

    Many Thanks
    Can we have a link to your page? (To test the issue, we need to have your complete markup+CSS+included images)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,856
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Looks like another hasLayout issue, try
    Code:
    ol.itemThumbNail li {
    	list-style:none;
    	list-style-position: inside;
    	padding:0 0 18px 44px;
    	margin:0 0 1em 0;
            height:1%;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    snarf1974 (05-05-2009)

  • #4
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Thank you very much, it works a treat now.


  •  

    Posting Permissions

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