Help to REPEAT (not stretch!) AN IMAGE <--HORIZONTALLY--> WITHIN ACELL w/EXAMPLE

[dorayme]

You misunderstand me, Miss. I do not claim to have any solution. I
haven't studied your problem. I didn't get the full gist of your
requirements from your OP, or it seems that you changed the problem
mid-thread, but I have not studied it with any care. Quite likely I do
not know the solution. Probably I will not pick it up from this thread.

The point of my post was that if you don't post a URL to your attempt,
it makes it harder (or at least, more trouble) for any of us to see what
the problem is. The result tends to be fewer answers. Fewer answers tend
to equate with reduced likelihood of a solution.


I haven't one; I have none to offer. Bergamot offered something, but I'm
not convinced you tried it. I'm still waiting to see your implementation
of his suggestions. It may be that dorayme is still refining his first
suggestion, researching your problem further, or has given up on you
entirely. See if he posts something after his breakfast.

The thread started, AFAICR, with how to get a couple of images to
somehow stretch to a cell width in IE. I was able to help the OP with
one of them because it was a background mark up issue which it did not
know how to implement. But I got stuck on the other one which was an
image element stretch problem in a cell context because I could not get
it to stretch - meaning shrink too - in IE.

<http://dorayme.netweaver.com.au/alt/chievous/chievous.html>

I have been meaning to return to this. Bergamot has not really solved
the original problem as I understood it (though in no way did he deserve
the spray from OP about it!*).

What happens in IE in a table cell with an image that is marked up in
CSS or in the HTML to be 100% wide is that it acts as a min width! Oddly
enough. bergamot's image works because it is so small and stretches
fine. OP's original image was very wide natively. It would doubtless
stretch on a screen wider than about 1200px for browser widths *over*
1200px.

Here is a doc that has the OP's original, a copy of it that has been
resized and one of my own quite wide pics.

<http://dorayme.netweaver.com.au/alt/chievous/stretch.html>

The natural widths of the images - in IE only - act to make the cells
think they have to be *at least as big as* the natural width of the
images. They will stretch but not shrink! For those of you with large
screens, resize browser and see for yourself in URL above in IE6 and IE7.

IE going it alone once again!

 

[Awful Dog Autry]

<http://dorayme.netweaver.com.au/alt/chievous/stretch.html>

The natural widths of the images - in IE only - act to make the cells
think they have to be *at least as big as* the natural width of the
images. They will stretch but not shrink! For those of you with large
screens, resize browser and see for yourself in URL above in IE6 and
IE7.

For ie7 (6 works not) add style max-width:100%; on the img.

 

[dorayme]

For ie7 (6 works not) add style max-width:100%; on the img.

I tested on my IE7? Please say more about what is not working exactly. I
will re-examine tomorrow if necessary.

 

[Jonathan N. Little]

I tested on my IE7? Please say more about what is not working exactly. I
will re-examine tomorrow if necessary.

In IE6 for some stupid reason does not make the first image 100% of the
table but expands the image a table way beyond the viewport.

 

[MISS CHIEVOUS]

The natural widths of the images - in IE only - act to make the cells
think they have to be *at least as big as* the natural width of the
images. They will stretch but not shrink! For those of you with large
screens, resize browser and see for yourself in URL above in IE6 and IE7.

IE going it alone once again!

dorayme

Dorayme you are such a gem to hang in there with me on this! Jesus,
who would have thought something so obviously intuitive -- an
instruction to the browser to stretch a page to the maximum width
possible -- would be beyond the grasp of Microsoft! There are exactly
2 lousy graphics in the whole goddamned page . . . and even something
THIS BASIC their miserable excuse for a browser can't do? How
braindead could Microsoft be? (edit: don't answer that lol)

Shouldn't this have been "Browser-Coding 101" for Microsoft? I don't
know if I am even _capable_ of loathing IEX any more than I do at this
very moment.

Friends, you have no idea how many hours I've spent Google-ing this
problem.

• I've read about every desperate IEX workaround -- from something
called "OVERFLOW" to . . . "NEGATIVE MARGINS."

• I've read that IEX is hostile to VERTICAL-ALIGN.

• Some say that this objective can only be accomplished in IEX using
DIV tags.

• Others have used Javascript to script their way out of the problem.

• And still others claim that the only reliable solution is CSS.

And Dorayme is correct:
When I do get a solution(s) I will post the code >>in its own
proprietary thread, titled unambiguously so NÔÔBs (like me) can
immediately get up and running with a basic concept. We can use the
balance of this thread to do our experimenting; but the solution is
going into its own thread.

I vow if it is the LAST THING I DO I will post the complete source
code -- from top to bottom -- for the solution to this once I get my
hands on it. There is no earthly reason for the occasional page
designer not to be able to _immediately_ get up and running on a basic
concept of cross-browser-compatible, Microsoft Internet Explorer-
friendly,
E-L-A-S-T-I-C web page that will render correctly in Firefox _and_
IEX.

MISS CHIEVOUS

 

[dorayme]

In IE6 for some stupid reason does not make the first image 100% of the
table but expands the image a table way beyond the viewport.

"expands the image a table way beyond the viewport"...

Are you saying more than my above? Before answering, please read on.

Are you partly implying IE7 *does* shrink the first image to table width?

For those interested in this matter, best to be very specific and clear
about what they are seeing. Which browser, which picture, does it shrink
and stretch, just stretch, under what conditions does it stretch (when
browser window is greater then natural width of pic.

I will help by captioning the pics and giving their sizes and
re-uploading for the same URL above). Done! See:

<http://dorayme.netweaver.com.au/alt/chievous/stretch.html>

I tried to sum it up before. In FF and other good modern browsers all 4
pics shrink and stretch and the natural width seems to play no part
(except in relation to the irrelevant definition/quality). But in my IE6
and IE7 - admittedly offline and local file exactly matching uploaded
one - I am getting what I said. In other words:

1. No shrink for browser window below the images' natural widths

2. Stretch evident only at browser widths greater than the natural width
of the pictures

and, perhaps this is your point Jonathan

3. Pics wider than browser are still 'there' and have to be scrolled for.

I observed 3 before but thought it a simple consequence of my 1 (and
emphasised by 2).

 

[Jonathan N. Little]

"expands the image a table way beyond the viewport"...

Are you saying more than my above? Before answering, please read on.

All non-IE browsers the TABLEs would be 100% of the WINDOW and all IMGs
regardless of their size was also 100% of their TABLE.

Now before you edited it I thought IE7 also behaved as above and IE6
stretched the smaller IMGs (#2 & #4) to display as above, but the huge
images caused their respective to expand beyond the WINDOW. IOW IE6
would *stretch* small images but not *constrain* large IMGs. But now IE7
looks just like 6. Weird, why stretch but not contain? Maybe because
IE does not really support styling that changes the default behavior of
TABLEs.

 

[MISS CHIEVOUS]

I will help by captioning the pics and giving their sizes and
re-uploading for the same URL above). Done! See:

<http://dorayme.netweaver.com.au/alt/chievous/stretch.html>

Yup. Renders just fine in Firefox; but . . . throw it into IEX (5.5,
the version I'm on) and it takes the widest image on the page and
forces that ABSOLUTE WIDTH. God I could kill them lol.

MC

 

[MISS CHIEVOUS]

So maybe you might think it worth it to feed IE only with the smaller
pic while letting other modern browsers loose on the larger version?

But . . . observe the workup you just posted dorayme, because your
smaller-scaled version makes my point.

In graphics (and trust me, I know whereof I speak heh) good technical
procedure is to always work from an image that is rendering as a
SCALED-DOWN version of its LARGER (ACTUAL) SIZE.

If you look at your second image, you'll note that it isn't as crisp
as my original (wider) image. Pixels are happiest when they are
jammed together or overlap -- S-T-R-E-T-C-H them out and the image is
compromised. They only have their native "bit"-ness after all; we're
asking them their bits to be something they're not.

No, the image is wide for the very reason that we are migrating to a
Widescreen World. There are many things I will compromise, but this
isn't one of them.

MC

 

[dorayme]

But . . . observe the workup you just posted dorayme, because your
smaller-scaled version makes my point.

In graphics (and trust me, I know whereof I speak heh) good technical
procedure is to always work from an image that is rendering as a
SCALED-DOWN version of its LARGER (ACTUAL) SIZE.

If you look at your second image, you'll note that it isn't as crisp
as my original (wider) image. Pixels are happiest when they are
jammed together or overlap -- S-T-R-E-T-C-H them out and the image is
compromised. They only have their native "bit"-ness after all; we're
asking them their bits to be something they're not.

No, the image is wide for the very reason that we are migrating to a
Widescreen World. There are many things I will compromise, but this
isn't one of them.

MC

Yes, the demo was just about the way IE handles things, not the pros of
using small images. You are quite right about using the largest image
that is safe to use if you are going to have it scale.

I won't go into what it is safe to use here, that is a bandwidth/user
accessibility consideration that needs watching. Browsers do a much
better job at shrinking than stretching. So do the best image
manipulation software packages!

 

[dorayme]

....

Now before you edited it I thought IE7 also behaved as above and IE6
stretched the smaller IMGs (#2 & #4) to display as above, but the huge
images caused their respective to expand beyond the WINDOW. IOW IE6
would *stretch* small images but not *constrain* large IMGs. But now IE7
looks just like 6. Weird, why stretch but not contain? Maybe because
IE does not really support styling that changes the default behavior of
TABLEs.

The only editing I did was to change the background to white, give the
tables a top margin so that I could add some text under each table to
show the native width of each image. I was thinking maybe my IE7 may
have behaved different to yours because I look at stuff offline on it
and in this case off any server.

We are in much agreement. You may be aware but perhaps are not saying,
or maybe you are missing that all the images behave *exactly* the same
way. It is the browser window that brings out the behaviour. There is
nothing special about any of the images at all. The small images do not
shrink smaller than their native width, just as the larger ones do not.
Perhaps your browser is set to not go as thin as the small ones? Or I am
seeing different behaviour to you?

Anyway, IE literally shrinks the cell to fit the native size of the
image. It does not listen to any percentage width instruction for the
image if the window is less than the width of the image. Having shrunk
its width to fit the native image, it is nevertheless in an approachable
mood to stretch the image. It takes notice of the % instruction then. So
if you open a window wider than the table in our one cell example, it
will stretch.

Note that IE listens carefully to width instructions in non percentage
terms, either delivered via CSS or in the traditional way in the image
element.

 

[Jonathan N. Little]

Anyway, IE literally shrinks the cell to fit the native size of the
image. It does not listen to any percentage width instruction for the
image if the window is less than the width of the image. Having shrunk
its width to fit the native image, it is nevertheless in an approachable
mood to stretch the image. It takes notice of the % instruction then. So
if you open a window wider than the table in our one cell example, it
will stretch.

You are right, IE will only expand but not reduce. You have to admit it
is a bit bizarre. But then again if this did work as it does in "modern"
browsers the stretching effect most times looks really really bad. Much
better to simulate a stretch with two overlapping images...or images
blended with background color, or combination of both.

 

[dorayme]

You are right, IE will only expand but not reduce. You have to admit it
is a bit bizarre. But then again if this did work as it does in "modern"
browsers the stretching effect most times looks really really bad. Much
better to simulate a stretch with two overlapping images...or images
blended with background color, or combination of both.

Yes, I agree that simple expansion does not look so great on any
browser. IE puts a bit of a roadblock on someone using a table cell for
a big image to make do for all browser sizes smaller than the image.
That part could be considered useful (apart from bandwidth/download
costs) and is done reasonably well by modern browsers.

So we could say that IE refuses to do what is possibly a bit reasonable
but has no qualms about allowing what is mostly not a very good idea!

If a table were truly to be used for tabular data and the native images
were modest (and a rightful tabular part of the table) and not likely to
be anything like browser width, I can see how someone might want to put
in *somewhat* bigger images than normally needed to gain that neat
shrinking effect without taking up table width space and horizontal
bars...

Think variations on this:

<http://dorayme.netweaver.com.au/alt/manyCells.html>

Think, not all are images, images are different and the table has many
rows and complex info... I have not tested in IE, but surely I can
safely assume the reasonable idea here is thwarted!

 

[MISS CHIEVOUS]

And this, in a world going W-I-D-E tsk. Dorayme, you have some
experience with CSS, right (I thought I saw a post or two over at
comp.infosystems.www.authoring.stylesheets)?

I return to my earlier suggestion that there must be a CSS workaround
-- something WITHOUT a table perhaps? Your thoughts? and remember I
have NO CSS experience whatsoever. I have just got to start that $80
Dreamweaver book I bought tsk. Yes yes, I know. But it will be weeks
before I'm up to the CSS section.

Could you noodle around with it perhaps and throw something up?
Meanwhile, I'll work the JAVASCRIPT end of this. And believe me, I'm
not best pleased at having to introduce buggy, fickle JS. I'd like
the solution we all settle on to be sturdy -- thus, CSS?

What a pickle.

MC

 

[Bergamot]

I
have NO CSS experience whatsoever. I have just got to start that $80
Dreamweaver book I bought tsk. Yes yes, I know. But it will be weeks
before I'm up to the CSS section.

<shudder>

Please don't even consider learning CSS from a *Dreamweaver* book. It's
the blind teaching the blind! If you want to learn how to do things
correctly, get a real CSS book. Try Head First HTML with CSS & XHTML
from O'Reilly

If you don't want to spend any money, use the tutorials at htmldog.com.
It's the only online reference worth anything. When you've some
understanding under your belt, go with the specs at W3.org.

 

[Jonathan N. Little]

And this, in a world going W-I-D-E tsk. Dorayme, you have some
experience with CSS, right (I thought I saw a post or two over at
comp.infosystems.www.authoring.stylesheets)?

I return to my earlier suggestion that there must be a CSS workaround
-- something WITHOUT a table perhaps?

Yes, if you do not use a table as your container IE does not have a
problem. Tables cells have a special native display properties, they are
supposed to expand to contain content by default. IE fault is that it
will not let to really change this fully. So don't use a table! Use a DIV.


CSS:

div.banner { width: 100%; }
div.banner img { display: block; width: 100%; }


HTML:

<div class="banner">
<img src="SomeImageYouWantToStretch.jpg" alt="My Banner">
</div>

 

[dorayme]

And this, in a world going W-I-D-E tsk. dorayme, you have some
experience with CSS, right (I thought I saw a post or two over at
comp.infosystems.www.authoring.stylesheets)?

I return to my earlier suggestion that there must be a CSS workaround
-- something WITHOUT a table perhaps? Your thoughts?

The behaviour that has been giving you trouble occurs in table cells.
You should not have trouble using a p or a div. Hang on, my head is
throbbing - it's OK, it is meant to (like a mobile phone) to alert me of
something... hang on... ah yes!

Apparently on Feb 14 in a post in this thread I said:

In IE
<p> or <div>
<img ... width="100%">
</p> or </div>
will work but in a table cell, the instruction to % is in relation to
the image's native width!

No need for any pesky CSS, you can continue for a while not knowing
anything about it.

If this does not stretch and shrink in IE, I will take another look. But
you will need to let me know as I only fire up my windows box on a needs
basis. The friend who gave it me rigged it with a slot to put coins in
(like English gas meters of old and public phones). He has such a cheek,
no shame at all! He comes around, demands a cup of tea every week and
with his key opens up the slot box and collects the takings. I like to
leave him as little as possible in it.

 

[MISS CHIEVOUS]

You should not have trouble using a p or a div. Hang on, my head is
throbbing - it's OK, it is meant to (like a mobile phone) to alert me of
something... hang on... ah yes!

Apparently on Feb 14 in a post in this thread I said:

In IE
<p> or <div>
<img ... width="100%">
</p> or </div>
will work but in a table cell, the instruction to % is in relation to
the image's native width!

No need for any pesky CSS, you can continue for a while not knowing
anything about it.

If this does not stretch and shrink in IE, I will take another look. But
you will need to let me know as I only fire up my windows box on a needs
basis. The friend who gave it me rigged it with a slot to put coins in
(like English gas meters of old and public phones). He has such a cheek,
no shame at all! He comes around, demands a cup of tea every week and
with his key opens up the slot box and collects the takings. I like to
leave him as little as possible in it.

dorayme

Dorayme, I've now spent an hour trying different places to put <DIV>
but I can't even get the page to validate, let alone see if it renders
in IEX because I don't know what I'm doing. As annoying as it is to
some people, I must ask that the _entire page_ -- starting with <!
DOCTYPE . . . right on down to </html>. Yes, you need to be THAT
explicit with me (apparently) since I can't get your suggestion to
validate unless you do. And it's pointless for me to demo code that
can't even be validated.

MC

 

[dorayme]

....

dorayme, I've now spent an hour trying different places to put <DIV>
but I can't even get the page to validate, let alone see if it renders
in IEX because I don't know what I'm doing. As annoying as it is to
some people, I must ask that the _entire page_ -- starting with <!
DOCTYPE . . . right on down to </html>. Yes, you need to be THAT
explicit with me (apparently) since I can't get your suggestion to
validate unless you do. And it's pointless for me to demo code that
can't even be validated.

How about:

<http://dorayme.netweaver.com.au/alt/chievous/stretch_in_a_div.html>

View source.

If there is anything you want more, let me know. I am simply helplessly
in your power. I can't understand it at all. You were so naughty talking
to John Hosking who I have a lot of respect for! And you don't really
understand Bergamot. Bergamot is the sweetest, kindest, gentlest lamb
here, don't be fooled by a confrontational exterior, inside he is like a
marshmellow, a quivering mass of self consciousness.

I have made some investigations of my own about you. I have discovered
that you *do* have some power over me and why. You are a borg from
H3289, a planet that is well known to my own home planet. Your planet is
regarded as a sort of North Korea of the relevant galaxy. A batch of 7
borgs was dispatched to my planet May 14th 1928 but one went astray. We
captured the other 6 and inspected them closely. It seems you found your
way to Earth and still have a residual power to influence emissaries
from my own planet. But I know you are unarmed and so I am not worried.

 

[Jonathan N. Little]

Dorayme, I've now spent an hour trying different places to put <DIV>
but I can't even get the page to validate, let alone see if it renders
in IEX because I don't know what I'm doing. As annoying as it is to
some people,

<snip rest...>

It is better not to use the "pasta method" to learn HTML (throw markup
at the browser like pasta at the wall to see what sticks!)

If you really do not know the basic structure of an HTML document then
whatever advice you get here will not be much help yo you if you do not
know how to apply it. What you would really need is someone to do it for
you.

Since you are not hiring any of us, try this instead. Go to htmldog.com
and got through the basic tutorials FIRST. Get a basic understanding of
what you are doing. It will not take long. Promise.

Then either you will understand what has already been offered within
this thread to solve your problem or you will be all set to receive and
understand a little more help. Okay?