trying to get consistency in appearance of 18-pt-high icons

I have a list that appears substantially like this:

[icon1] myfile1
[icon2] myfile2
[icon3] myfile3
[icon4] myfile4
[icon5] myfile5

However, many of the icons (all 18-point high) are not the same width
resulting in a list that looks like this:

[icon1] myfile1
[i c o n 2] myfile2
[icon3] myfile3
[i c o n 4] myfile4
[icon5] myfile5

How can I use CSS, if possible, to make all the text on the right of
the icons
appear justified so that the icons all take up the same amount of
horizontal space?
I've tried this:

img.icon_left { float: left; margin: 15px; }
img.icon_right { float: right; margin: 15px; }

with "class=" with "<img " but got poor results.
I'm not an expert at CSS but have used it successfully
in many ways. I could also do HTML tables
but would rather do it with CSS.

Thanks for any help.

Lao-Ming

On 2008-12-08, laomingliu (AT) gmail (DOT) com <laomingliu (AT) gmail (DOT) com> wrote:

I have a list that appears substantially like this:

[icon1] myfile1
[icon2] myfile2
[icon3] myfile3
[icon4] myfile4
[icon5] myfile5

However, many of the icons (all 18-point high) are not the same width
resulting in a list that looks like this:

[icon1] myfile1
[i c o n 2] myfile2
[icon3] myfile3
[i c o n 4] myfile4
[icon5] myfile5

How can I use CSS, if possible, to make all the text on the right of
the icons
appear justified so that the icons all take up the same amount of
horizontal space?
I've tried this:

img.icon_left { float: left; margin: 15px; }
img.icon_right { float: right; margin: 15px; }

Set width on those floats instead of margin.

In article
<220109d9-859c-4017-9a6e-bd4a374839fc (AT) r40g2000yqj (DOT) googlegroups.com>,
laomingliu (AT) gmail (DOT) com wrote:

I have a list that appears substantially like this:

[icon1] myfile1
[icon2] myfile2
[icon3] myfile3
[icon4] myfile4
[icon5] myfile5

However, many of the icons (all 18-point high) are not the same width
resulting in a list that looks like this:

[icon1] myfile1
[i c o n 2] myfile2
[icon3] myfile3
[i c o n 4] myfile4
[icon5] myfile5

How can I use CSS, if possible, to make all the text on the right of
the icons
appear justified so that the icons all take up the same amount of
horizontal space?
I've tried this:

img.icon_left { float: left; margin: 15px; }
img.icon_right { float: right; margin: 15px; }

with "class=" with "<img " but got poor results.
I'm not an expert at CSS but have used it successfully
in many ways. I could also do HTML tables
but would rather do it with CSS.

Why would you rather do it without tables (doing it "with CSS" is a
seriously misleading term. It suggests falsely that tables cannot be
styled with CSS).

Anyway, this should do it one way:

li {list-style-type: none; border: 1px solid;}
img {float: left;}
p {margin-left: 110px}

and

<ul>
<li><img src="pics/crimson.png" alt="" height="50" width="50"><p>Some
text here</p></li>
<li><img src="pics/crimson.png" alt="" height="50" width="30"><p>Some
text here</p></li>
<li><img src="pics/crimson.png" alt="" height="50" width="100"><p>Some
text here</p></li>
</ul>

But what is the purpose? If it is tabular and the image relates to the
description, you can use a table to get more flexibility and less fiddle
and good cross browser similarity.

--
dorayme

On Dec 8, 12:15*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

On 2008-12-08, laoming... (AT) gmail (DOT) com <laoming... (AT) gmail (DOT) com> wrote:



I have a list that appears substantially like this:

[icon1] myfile1
[icon2] myfile2
[icon3] myfile3
[icon4] myfile4
[icon5] myfile5

However, many of the icons (all 18-point high) are not the same width
resulting in a list that looks like this:

[icon1] myfile1
[i c o n 2] myfile2
[icon3] myfile3
[i *c *o *n *4] myfile4
[icon5] myfile5

How can I use CSS, *if possible, to make all the text on the right of
the icons
appear justified so that the icons all take up the same amount of
horizontal space?
I've tried this:

img.icon_left *{ float: left; *margin: 15px; }
img.icon_right { float: right; margin: 15px; }

Set width on those floats instead of margin.

Thanks but that makes the image wider (i.e. kills the aspect ratio).
The space between the left margin and the text needs to be widened
so probably using "class=" with "<img" is the wrong approach?

laomingliu (AT) gmail (DOT) com wrote:

[icon1] myfile1
[i c o n 2] myfile2
[icon3] myfile3

How can I use CSS, if possible, to make all the text on the right of
the icons
appear justified so that the icons all take up the same amount of
horizontal space?

Put the image in another container, like a span, float the container
left and give it the desired width.

--
Berg

In article
<f9617562-797f-4cdc-bff0-eccd52c51479 (AT) 41g2000yqf (DOT) googlegroups.com>,
laomingliu (AT) gmail (DOT) com wrote:

On Dec 8, 12:15*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2008-12-08, laoming... (AT) gmail (DOT) com <laoming... (AT) gmail (DOT) com> wrote:
[big snip]

How can I use CSS, *if possible, to make all the text on the right of
the icons
appear justified so that the icons all take up the same amount of
horizontal space?
I've tried this:

img.icon_left *{ float: left; *margin: 15px; }
img.icon_right { float: right; margin: 15px; }

Set width on those floats instead of margin.

Thanks but that makes the image wider (i.e. kills the aspect ratio).
The space between the left margin and the text needs to be widened
so probably using "class=" with "<img" is the wrong approach?

If the images are floated left, with a width set on them, the only thing
remaining is to make sure that the container for the list of file names
has a left-margin wide enough to accommodate the images and margins, and
leave the gap desired between the widest image and the text.

A better question is still, what is wrong with using a table in this
situation? You have a list of 1:1 corresponding items (image plus text)
and want a tabular presentation...

On 2008-12-08, laomingliu (AT) gmail (DOT) com <laomingliu (AT) gmail (DOT) com> wrote:

On Dec 8, 12:15*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2008-12-08, laoming... (AT) gmail (DOT) com <laoming... (AT) gmail (DOT) com> wrote:



I have a list that appears substantially like this:

[icon1] myfile1
[icon2] myfile2
[icon3] myfile3
[icon4] myfile4
[icon5] myfile5

However, many of the icons (all 18-point high) are not the same width
resulting in a list that looks like this:

[icon1] myfile1
[i c o n 2] myfile2
[icon3] myfile3
[i *c *o *n *4] myfile4
[icon5] myfile5

How can I use CSS, *if possible, to make all the text on the right of
the icons
appear justified so that the icons all take up the same amount of
horizontal space?
I've tried this:

img.icon_left *{ float: left; *margin: 15px; }
img.icon_right { float: right; margin: 15px; }

Set width on those floats instead of margin.

Thanks but that makes the image wider (i.e. kills the aspect ratio).
The space between the left margin and the text needs to be widened
so probably using "class=" with "<img" is the wrong approach?

You could put the imgs inside spans, then set float and width on the
spans, leaving the images as width: auto.

In article <no.email-4BF336.09112708122008 (AT) news1 (DOT) chem.utoronto.ca>,
David Stone <no.email (AT) domain (DOT) invalid> wrote:

In article

mmm... was using aeiou.org newsserver yesterday for posts and I posted
on this one, the Optus newserver was not working (at least on my
machine). I sometimes wonder if the newserver one uses to post affects
who can see it via other newservers...

--
dorayme

On Monday 08 December 2008 22:28, dorayme wrote:

mmm... was using aeiou.org newsserver yesterday for posts and I posted
on this one, the Optus newserver was not working (at least on my
machine). I sometimes wonder if the newserver one uses to post affects
who can see it via other newservers...

I thought for a while that my ISP's news server wasn't showing posts from
news.individual.net, but it turned out that Konqueror wasn't showing posts
made with MacSOUP. There just happened to be a strong correlation, on the
newsgroup I noticed it on, between using MacSOUP and posting from
individual.net.

In other words, could it be the posting agent rather than the news server?

Irina

--
"Of course it is happening inside your head, Harry, but why on earth
should that mean that it is not real?" --Albus Dumbledore
http://www.valdyas.org/foundobjects/index.cgi Latest: 08-Dec-2008

In article <493da260$0$188$e4fe514c (AT) news (DOT) xs4all.nl>,
Irina Rempt <irina (AT) valdyas (DOT) org> wrote:

On Monday 08 December 2008 22:28, dorayme wrote:

mmm... was using aeiou.org newsserver yesterday for posts and I posted
on this one, the Optus newserver was not working (at least on my
machine). I sometimes wonder if the newserver one uses to post affects
who can see it via other newservers...

I thought for a while that my ISP's news server wasn't showing posts from
news.individual.net, but it turned out that Konqueror wasn't showing posts
made with MacSOUP. There just happened to be a strong correlation, on the
newsgroup I noticed it on, between using MacSOUP and posting from
individual.net.

In other words, could it be the posting agent rather than the news server?

Beats me.

--
dorayme