...

View Full Version : Images in OL list clipped!



snarf1974
05-03-2009, 07:16 AM
Hi,

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


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:

http://www.glentechsolutions.co.uk/images/steps.gif

Here is the HTML:



<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

:)

abduraooft
05-03-2009, 12:11 PM
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)

abduraooft
05-05-2009, 09:23 AM
Looks like another hasLayout issue (http://www.satzansatz.de/cssd/onhavinglayout.html), try

ol.itemThumbNail li {
list-style:none;
list-style-position: inside;
padding:0 0 18px 44px;
margin:0 0 1em 0;
height:1%;
}

snarf1974
05-05-2009, 01:28 PM
Thank you very much, it works a treat now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum