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
***

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  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
***

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  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
***

[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
***