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

M

MISS CHIEVOUS

Hi, I have almost no experience with CSS (I only just got a
Dreamweaver book, and will be doing the tutorials, honest!) but could
someone help me patch up just one basic html page that I am almost
certain will need CSS?

THERE ARE TWO CONFLICTING ISSUES I'M RUNNING INTO:

1>>>>> I want the table to automatically RESIZE ITSELF <--
HORIZONTALLY--> to the width of the User's Monitor/Browser

2>>>>> The REPEATING GRAPHIC that appears below the top graphic is a
gradient: This means that it displays correctly ONLY if either
REPEATING or OVERLAPPING -- but NOT if it is
( ( S T R E T C H E D ) ).

I hope that makes sense (blush). Thanks, and both the HTML and the
EXAMPLE LINK follow.

MC

===================================================
http://www.geocities.com/a4248713/REPEATME.html

- - - - - - - - - - - - - -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-
Type">
<title>HORIZONTALLY-REPEAT AN IMAGE IN A CELL</title>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<table style="text-align: left; width: 100%; margin-left: auto; margin-
right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;">
<img style="width: 100%; height: 100%;" alt="" src="http://
www.geocities.com/a4248713/TOP-IMAGE.jpg"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<img style="width: 100px; height: 800px;" alt="" src="http://
www.geocities.com/a4248713/BOTTOM-HORIZONTAL-TILE.jpg"><br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
- - - - - - - - - - - - - -
 
D

dorayme

MISS CHIEVOUS said:
THERE ARE TWO CONFLICTING ISSUES I'M RUNNING INTO:

1>>>>> I want the table to automatically RESIZE ITSELF <--
HORIZONTALLY--> to the width of the User's Monitor/Browser

2>>>>> The REPEATING GRAPHIC that appears below the top graphic is a
gradient: This means that it displays correctly ONLY if either
REPEATING or OVERLAPPING -- but NOT if it is
( ( S T R E T C H E D ) ).

I hope that makes sense (blush). Thanks, and both the HTML and the
EXAMPLE LINK follow.

....

- - - - - - - - - - - - - -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-
Type">
<title>HORIZONTALLY-REPEAT AN IMAGE IN A CELL</titl
Click to expand...

Your top img does stretch on my browsers by the simple method of 100%
for width specification for the image. So I will deal with the second
problem.

Instead of your:

<td style="vertical-align: top;">
<img style="width: 100px; height: 800px;" alt="" src="http://
www.geocities.com/a4248713/BOTTOM-HORIZONTAL-TILE.jpg"><br>
</td>
try:

<td style="vertical-align: top; background: #fff
url(http://www.geocities.com/a4248713/BOTTOM-HORIZONTAL-TILE.jpg)
repeat-x; width: 100%; height: 800px;"></td>
 
M

MISS CHIEVOUS

M

MISS CHIEVOUS

Oh no!

Dorayme, this doesn't work in EXPLORER, only in Firefox (?). I do
need it to be cross-browser compatible (sorry, I should have
mentioned).

Any fix? Gee, it looks great in Firefox tsk . . .

MC
 
D

dorayme

MISS CHIEVOUS said:
Oh no!

Dorayme, this doesn't work in EXPLORER, only in Firefox (?). I do
need it to be cross-browser compatible (sorry, I should have
mentioned).

Any fix? Gee, it looks great in Firefox tsk . . .

MC
Click to expand...

Perhaps it might be best to quote the bits that I need. Like what did I
say? (My newsreader is an online one and does not keep records or
threads!) And which IE version are you meaning?

What are you seeing?
 
M

MISS CHIEVOUS

What are you seeing?
dorayme
Click to expand...

Hi dorayme . . . I've been exploring this problem and it seems to be
endemic to Internet Explorer versions prior to their latest (ver 8)
which it is rumored has been fixed.

I am testing
http://www.geocities.com/a4248713/REPEATME.html
with your New and Improved td string.

It looks GREAT on Firefox and Mozilla; but if I open it in Explorer
5.5 (although, according to everyone I would have the same problem all
the way up through IEX 7 lol) >>the UPPER GRAPHIC disappears
completely. What you see, then, are the
<--HORIZONTALLY--> repeating graphics . . . hiked up to the top of
the page, as though they are the only content on the page. The upper
graphic is COMPLETELY gone!!! OMG lol.

A number of CSS sites, in particular, advise to never use the
"vertical-align" element with IEX. Fine, so I removed it. And still
my upper graphic won't show. :(

I confess I am fussy about this being as browser-friendly as I can
make it. I do _not_ want to have to butcher the page with a warning
that the user must "upgrade your browser".

Browsers! Unngh!

Any suggestions before I go over to the Dreamweaver forums and, well,
beg lol?

MC
 
M

MISS CHIEVOUS

Okay, the problem is this first image:

<td style=""><img style="width: 100%; height: 100%;" alt=""
src="http://www.geocities.com/a4248713/TOP-IMAGE.jpg"><br>

If I change the source code to the following by substituting
height: 100%
with the image's actual height
600px
the image will show in IEX . . . but forces that height even as the
window is being resized.

In other words, I get a squished TOP-IMAGE.jpg because its height
won't reconcile.

Anyway, enough for this evening. Here is as far as I've gotten with
it:

- - - - - - - - - - - - - - - - - - - - - - - - - -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-
Type">
<title>HORIZONTALLY-REPEAT AN IMAGE IN A CELL</title>
</head>
<body style="background-color: rgb(0, 0, 0);">
<table style="width: 100%; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style=""><img style="width: 100%; height: 600px;" alt=""
src="http://www.geocities.com/a4248713/TOP-IMAGE.jpg"><br>
</td>
</tr>
<tr>
<td
style="background: rgb(255, 255, 255) url(http://www.geocities.com/
a4248713/BOTTOM-HORIZONTAL-TILE.jpg) repeat-x; width: 100%; height:
800px;"><br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</body>
</html>
 
D

dorayme

MISS CHIEVOUS said:
Hi dorayme . . . I've been exploring this problem and it seems to be
endemic to Internet Explorer versions prior to their latest (ver 8)
which it is rumored has been fixed.

I am testing
http://www.geocities.com/a4248713/REPEATME.html
with your New and Improved td string.

It looks GREAT on Firefox and Mozilla; but if I open it in Explorer
5.5 (although, according to everyone I would have the same problem all
the way up through IEX 7 lol) >>the UPPER GRAPHIC disappears
completely. What you see, then, are the
<--HORIZONTALLY--> repeating graphics . . . hiked up to the top of
the page, as though they are the only content on the page. The upper
graphic is COMPLETELY gone!!! OMG lol.

A number of CSS sites, in particular, advise to never use the
"vertical-align" element with IEX. Fine, so I removed it. And still
my upper graphic won't show. :(

I confess I am fussy about this being as browser-friendly as I can
make it. I do _not_ want to have to butcher the page with a warning
that the user must "upgrade your browser".

Browsers! Unngh!

Any suggestions before I go over to the Dreamweaver forums and, well,
beg lol?
Click to expand...

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! If you try 50% in a p or div, you will get
half the p or div's width (100% of its parent by default). At least in
IE7. In a table cell, it simply goes for the native as benchmark to %
against.

So what to do in your case? I'm thinking, I'm thinking... <g>
 
M

MISS CHIEVOUS

That would seem to be the best solution!

   Irina
Click to expand...

LOL!! I hear you there girlfriend. Even more pathetic is to
contemplate that Microsoft has only _just_ gotten around to fixing
this so-called "CSS Bug" in Explorer ver. 8! WTF??? lol

Friends, this is almost surely a CSS script (for which I have
absolutely no experience groan) so I'll fare forward and hunt down
some CSS forums. I'll check back periodically to see if dorayme has
had a breakthrough. I so appreciate his help.

MC
 
B

Bergamot

MISS said:
<td style=""><img style="width: 100%; height: 100%;" alt=""
src="http://www.geocities.com/a4248713/TOP-IMAGE.jpg"><br>

If I change the source code to the following by substituting
height: 100%
with the image's actual height
600px
the image will show in IEX . . . but forces that height even as the
window is being resized.
Click to expand...

Don't specify a height - omit it altogether. Then the height will scale
with the width, whatever it is.
 
M

MISS CHIEVOUS

Berg, here is what I just tried with your suggestion:

- - - - - - - - - - - - - - - - - - - - - - - - - -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-
Type">
<title>HORIZONTALLY-REPEAT AN IMAGE IN A CELL</title>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);">
<table style="text-align: left; width: 100%; margin-left: auto; margin-
right: auto;" border="0" cellpadding="0" cellspacing="0">

<tbody>

<tr>
<td style="vertical-align: top;"><img src="http://www.geocities.com/
a4248713/TOP-IMAGE.jpg"><br>
</td>
</tr>

<tr>
<td style="vertical-align: top; background: #fff
url(http://www.geocities.com/a4248713/BOTTOM-HORIZONTAL-TILE.jpg)
repeat-x; width: 100%; height: 800px;">
</td>
</tr>

</tbody>
</table>
<br>
</body>
</html>
- - - - - - - - - - - - - - - - - - - - - - - - - -

This doesn't work in IEX -- although I have to grant you, it does
force the top image to show up . . . but in its FIXED size. :( Still
no auto-sizing; if you had some other iteration of this idea, PLEASE
post it!

Explorer. Don't get me started!! Ah the millions of man hours wasted
for this lousy browser lol . . .

MC
 
B

Bergamot

Please learn how to quote.
http://web.presby.edu/~nnqadmin/nnq/nquote.html

MISS said:
Berg, here is what I just tried with your suggestion:
Click to expand...

And please don't post full code like this. Just post the URL and we can
check it out for ourselves. You can include a snippet in your post if
you like, but the URL is good enough.
<td style="vertical-align: top;"><img src="http://www.geocities.com/
a4248713/TOP-IMAGE.jpg"><br>
</td>
Click to expand...
This doesn't work in IEX -- although I have to grant you, it does
force the top image to show up . . . but in its FIXED size.
Click to expand...

You removed both the width and height properties. Keep the width at 100%
but drop the height altogether.
 
M

MISS CHIEVOUS

And please don't post full code like this. Just post the URL and we can
check it out for ourselves. You can include a snippet in your post if
you like, but the URL is good enough.

You removed both the width and height properties. Keep the width at 100%
but drop the height altogether.

Berg
Click to expand...

You can test any code I'm posting by dropping it into Notepad and
seeing it in Explorer. I don't have unlimited space on this Geocities
account to keep throwing up multiple iterations that don't work. And
no, in answer to your recent suggestion, it doesn't work.

If you're so certain this works in Explorer, please share the EXACT,
ENTIRE code for the group, otherwise this is a fishing expedition.

MC
 
J

John Hosking

MISS said:
You can test any code I'm posting by dropping it into Notepad and
seeing it in Explorer.
Click to expand...

He *could*, and so could I, and so could a lot of folks, but we'd have
to do it individually, each and every one of us. That's a lot of
redundant work on a problem that is -- let's face it -- of most interest
to *you*. Beyond which, it's not just the two-step process you make it
sound like.

And BTW, it's Internet Explorer, not just Explorer. If you don't want to
repeatedly write "Internet Explorer," abbreviate by using "IE" like
everybody else does.
I don't have unlimited space on this Geocities
account to keep throwing up multiple iterations that don't work.
Click to expand...

Then maybe you need to get a different hosting solution. If your limits
at Geocities are so tight that you can't put up three or four very
simple pages of less that 1KB each, you're living on the edge anyway.
Worst of all is the fact that Geocities has the nasty habit of mangling
your code for its own advertizing purposes.
And
no, in answer to your recent suggestion, it doesn't work.

If you're so certain this works in Explorer, please share the EXACT,
ENTIRE code for the group, otherwise this is a fishing expedition.
Click to expand...

It's a fishing expedition when we can't see your unadulterated code. The
onus is on you to do the work. We can offer advice, make comments, ask
questions, etc., but you have to do the work.

IIUC, Bergamot told you what the problem was, offered advice, but when
you implemented his suggestions you missed a detail (which he then
pointed out). Yes? I think you'll learn better by working through the
suggestions you get, seeing what happens, and following up on the
feedback. Don't give up.
 
M

MISS CHIEVOUS

He *could*, and so could I, and (SNIP)
Click to expand...

Oh I doubt very strongly you have one blessed clue as to this
workaround. I only wish people like you would quit polluting a thread
that could be helpful to thousands of people -- and worse, bragging
that you have a solution.

You don't have a solution.
Bergamot doesn't have a solution.
And Dorayme doesn't have a solution.

The only difference is that Dorayme honestly confesses this is more
complicated than he originally thought.

"Unadulterated code"??? I'm using a stripped-down example
DELIBERATELY you fool -- because it's a LEARNING EXAMPLE. I can't
even get one cell to properly display in IEX . . . but you want an
even more complicated page? Am I understanding that you're
complaining that my example isn't SUFFICIENTLY CONFUSING?

Unbelievable.
IIUC, Bergamot told you what the problem was, offered advice, but when
you implemented his suggestions you missed a detail (which he then
pointed out). Yes?
Click to expand...

No. But nice try. I didn't miss any detail that he didn't originally
omit to qualify in the first place. THIS IS WHY THE _ENTIRE_ CODE
SHOULD BE POSTED. If the only thing an occasional HTML designer needs
to do is have the goddamned graphic on one simple page automatically
expand in IEX to the browser's width, then why suffer him to learn any
more than he has to to accomplish that ONE THING?

What are you -- the Lifestyle Police?

No, as I said earlier, people like you who show up and profess to know
how to do something but, umm, just kind of, er, 'prefer' not SAYing
how it's done is an indication of the clueless.

There is nothing wrong with being clueless. This is obviously a
considerably more complicated workaround than both Dorayme and I
originally thought. If I find the solution I will both add it to this
thread -and- upload it to that little Geocities page. I won't demand
that a user learn CSS; I'll simply TYPE OUT THE ENTIRE PAGE, FROM TOP
TO BOTTOM, and let them get up and running with a very basic example
_immediately_.

MISS CHIEVOUS
 
J

John Hosking

MISS said:
Oh I doubt very strongly you have one blessed clue as to this
workaround. I only wish people like you would quit polluting a thread
that could be helpful to thousands of people -- and worse, bragging
that you have a solution.
Click to expand...

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.
You don't have a solution.
Bergamot doesn't have a solution.
And Dorayme doesn't have a solution.
Click to expand...

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 only difference is that Dorayme honestly confesses this is more
complicated than he originally thought.

"Unadulterated code"??? I'm using a stripped-down example
DELIBERATELY you fool -- because it's a LEARNING EXAMPLE. I can't
even get one cell to properly display in IEX . . . but you want an
even more complicated page? Am I understanding that you're
complaining that my example isn't SUFFICIENTLY CONFUSING?
Click to expand...

No. I do not want something more complicated. I want something as simple
as possible, without some Geocities crap making your attempts into
invalid markup. I hate trying to debug a Geocities page because the
first thing I check is validity. It's aggravating.

The code snippets you post here are a pain to read, may not be what you
really tried, may contain errors, etc. A URL eliminates all doubt and
makes it easy for us to test with just a couple clicks.
Unbelievable.
Click to expand...

You should sell your adrenalin on e-bay. ;-)
No. But nice try. I didn't miss any detail that he didn't originally
omit to qualify in the first place.
Click to expand...

So add in now what he added in later. Or just forget your problem,
ignore the suggestions pending, and leave it all unsolved. Your choice.
THIS IS WHY THE _ENTIRE_ CODE
SHOULD BE POSTED. If the only thing an occasional HTML designer needs
to do is have the goddamned graphic on one simple page automatically
expand in IEX to the browser's width, then why suffer him to learn any
more than he has to to accomplish that ONE THING?
Click to expand...

You don't have to learn anything if you don't want to. And nobody has to
try to teach you. Some suffering should be avoided, I agree.
What are you -- the Lifestyle Police?
Click to expand...

Hardly. If I were, I'd probably be required to have a lifestyle myself.

BTW, you know, perhaps, that most cops don't really want to go around
arresting people after the fact. They'd rather help people get along
(avoid thefts, reduce accidents, stop domestic arguments before somebody
gets hurt).

I was just suggesting that you'd get to your goal more quickly by
posting your attempts on the Web, rather than putting some snippets of
code in a NG post by means of cut-and-paste or "typing out the entire
page", both of which can be error-prone. Also, we get to see your
doctype and all the details of your attempt.
[Further misunderstandings snipped]

If I find the solution I will both add it to this
thread -and- upload it to that little Geocities page. I won't demand
that a user learn CSS; I'll simply TYPE OUT THE ENTIRE PAGE, FROM TOP
TO BOTTOM, and let them get up and running with a very basic example
_immediately_.
Click to expand...

Good luck with that.
 
B

Bergamot

MISS said:
You can test any code I'm posting by dropping it into Notepad and
seeing it in Explorer.
Click to expand...

I guess you haven't figured out how this newsgroup works. If you expect
us to help you, it is your job to make that as easy as possible for us.
Posting code is not the way, posting a URL is.
I don't have unlimited space on this Geocities
account to keep throwing up multiple iterations that don't work.
Click to expand...

You're kidding, right? You could post thousands of pages like that test
page and still have plenty of space left for graphics.
And
no, in answer to your recent suggestion, it doesn't work.
WFM
http://www.bergamotus.ws/samples/miss-chievous.html

If you're so certain this works in Explorer, please share the EXACT,
ENTIRE code for the group, otherwise this is a fishing expedition.
Click to expand...

I gave you simple enough instructions - keep the width and omit the
height. You didn't do that, so it's no surprise it didn't work.

BTW, if you're going to get all snooty and defensive about these things,
you won't get very far in these newsgroups. If you want to be spoon fed
all the answers you might want to go somewhere else, anyway. If you're
actually interested in *learning*, put your ego aside and don't bite the
hands that feed you.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to wrap <td> content . 16
Image shifts to the right when export the page to pdf 4
Help with my responsive home page 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Slideshow not working properly 2
SendGrid email issue in responsive Gmail 1
I need help fixing my website 2
I am trying to detect Which image id="" was clicked ? 22

Members online

No members online now.
Total: 94 (members: 0, guests: 94)
Robots: 241

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top