Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Help to REPEAT (not stretch!) AN IMAGE <--HORIZONTALLY--> WITHIN ACELL w/EXAMPLE

Reply
Thread Tools

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

 
 
MISS CHIEVOUS
Guest
Posts: n/a
 
      02-13-2009
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>
- - - - - - - - - - - - - -
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      02-13-2009
In article
<(E-Mail Removed)>,
MISS CHIEVOUS <(E-Mail Removed)> wrote:

> 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


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/BO...ONTAL-TILE.jpg)
repeat-x; width: 100%; height: 800px;"></td>

--
dorayme
 
Reply With Quote
 
 
 
 
MISS CHIEVOUS
Guest
Posts: n/a
 
      02-14-2009
On Feb 13, 2:32*pm, dorayme <(E-Mail Removed)> wrote:
> 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/BO...ONTAL-TILE.jpg)
> repeat-x; width: 100%; height: 800px;"></td>
>
> dorayme


BRILLIANT! Thank you for such a mercifully SHORT solution dorayme!
Awesome.

Hugs,

MC
 
Reply With Quote
 
MISS CHIEVOUS
Guest
Posts: n/a
 
      02-14-2009
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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-14-2009
In article
<(E-Mail Removed)>,
MISS CHIEVOUS <(E-Mail Removed)> wrote:

> 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


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?

--
dorayme
 
Reply With Quote
 
MISS CHIEVOUS
Guest
Posts: n/a
 
      02-14-2009
> What are you seeing?
>
> dorayme


Hi dorayme . . . I've been exploring this problem and it seems to be
endemic to Internet Explorer versions prior to their latest (ver
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
 
Reply With Quote
 
MISS CHIEVOUS
Guest
Posts: n/a
 
      02-14-2009
The Microsoft bug I mentioned is reported here:
http://connect.microsoft.com/IE/feed...dbackID=333908

Meanwhile . . .
I just took a look at my source code for REPEATME.html and . . .
WTF??? The VERTICAL-ALIGN is right back!

How do I get rid of this? Internet Explorer. I'll kill it lol.

MC
 
Reply With Quote
 
MISS CHIEVOUS
Guest
Posts: n/a
 
      02-14-2009
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>
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-14-2009
In article
<(E-Mail Removed)>,
MISS CHIEVOUS <(E-Mail Removed)> wrote:

> > What are you seeing?
> >
> > dorayme

>
> Hi dorayme . . . I've been exploring this problem and it seems to be
> endemic to Internet Explorer versions prior to their latest (ver
> 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?


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>

--
dorayme
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-14-2009
In article
<(E-Mail Removed)>,
MISS CHIEVOUS <(E-Mail Removed)> wrote:

> Meanwhile . . .


You might as well have this bit of my experiment:

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

Will have to think about IE...

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
[Swing] JTable: how to change properties of a component located in acell Hole Java 5 09-23-2009 09:51 PM
Suming data within a nested repeat region Mangler ASP General 1 02-05-2009 01:49 AM
DIV background-repeat background-image? For shadow effect jc ASP .Net 3 03-19-2008 04:19 PM
DIV background-repeat background-image for shadowing effect jc HTML 1 03-19-2008 02:16 PM
Repeat an ASP:Image button VK ASP .Net 3 04-25-2005 04:44 PM



Advertisments