Re: [WSG] list style with inline image issue

2010-10-15 Thread tee 
Update: 

IE6 needs vertical-align:text-top in order for the image aligns with text 
whereas IE7 requires extra vertical-align:top declares in the LI. IE8 doesn't 
need any of these so I guess IE9 will be the same which I don't have a way to 
test as the beta version wiped out my IE8 so I can't install it. After I had 
the IE9 beta installed, the previously standalone working version of IE9 
Preview no longer can be installed.

I updated the test page just in case anyone wants to see it.

tee


http://lotusseedsdesign.com/css-test/list-style.html
On Oct 14, 2010, at 7:07 PM, tee wrote:

 Tim,
 
 Thanks! This won't work very well though because not all LIs have image and I 
 can't foresee which one will not have.
 
 Your example gave me an idea to remove the float, and it seems to be working. 
 See the test page again!
 
 vertical-align:top makes the image aligns with the text.
 
 t


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] list style with inline image issue

2010-10-14 Thread tee 
In this page:
http://lotusseedsdesign.com/css-test/list-style.html

Only Firefox got it right. Have not checked in IE yet. 

li {padding-bottom: 5px;clear: both;list-style-type: disc;margin-left: 25px;}
li img {float: left;margin-right:10px;margin-bottom: 10px;border:0}

li.inside{list-style-position: inside}
li.outside{list-style-position: outside}


Is there a workaround?

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] list style with inline image issue

2010-10-14 Thread Tim White 
Tee,

Just a quick test I came up with this:

li {
padding-bottom: 5px;
clear: both;
list-style-type: disc;
padding-left: 75px;
margin-bottom: 50px;
position: relative;
}
li img {
position: absolute;
top: 0; left: 0;
border:1px solid red;
}

Instead of floating your image, position it in the LI. With list-style
outside or no list-style this worked in Chrome, Opera, Firefox and IE
8. I just quickly hacked the rest of the numbers to get it to work.

Tim W.

(By the way, you have class=outside on your last list item in the
HTML and I don't think you meant to)


On Thu, Oct 14, 2010 at 7:43 PM, tee weblis...@gmail.com wrote:
 In this page:
 http://lotusseedsdesign.com/css-test/list-style.html

 Only Firefox got it right. Have not checked in IE yet.

 li {padding-bottom: 5px;clear: both;list-style-type: disc;margin-left: 25px;}
 li img {float: left;margin-right:10px;margin-bottom: 10px;border:0}

 li.inside{list-style-position: inside}
 li.outside{list-style-position: outside}


 Is there a workaround?

 tee


 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] list style with inline image issue

2010-10-14 Thread tee 
Tim,

Thanks! This won't work very well though because not all LIs have image and I 
can't foresee which one will not have.

Your example gave me an idea to remove the float, and it seems to be working. 
See the test page again!

vertical-align:top makes the image aligns with the text.

tee


On Oct 14, 2010, at 6:16 PM, Tim White wrote:

 Tee,
 
 Just a quick test I came up with this:
 
 li {
   padding-bottom: 5px;
   clear: both;
   list-style-type: disc;
   padding-left: 75px;
   margin-bottom: 50px;
   position: relative;
   }
 li img {
   position: absolute;
   top: 0; left: 0;
   border:1px solid red;
   }
 
 Instead of floating your image, position it in the LI. With list-style
 outside or no list-style this worked in Chrome, Opera, Firefox and IE
 8. I just quickly hacked the rest of the numbers to get it to work.
 
 Tim W.
 
 (By the way, you have class=outside on your last list item in the
 HTML and I don't think you meant to)
 
 
 On Thu, Oct 14, 2010 at 7:43 PM, tee weblis...@gmail.com wrote:
 In this page:
 http://lotusseedsdesign.com/css-test/list-style.html
 
 Only Firefox got it right. Have not checked in IE yet.
 
 li {padding-bottom: 5px;clear: both;list-style-type: disc;margin-left: 25px;}
 li img {float: left;margin-right:10px;margin-bottom: 10px;border:0}
 
 li.inside{list-style-position: inside}
 li.outside{list-style-position: outside}
 
 
 Is there a workaround?
 
 tee
 
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***
 
 
 
 
 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: memberh...@webstandardsgroup.org
 ***
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***