Expanding transarent cell without javascript?

"Neredbojias" <me@http://www.neredbojias.com/_eml/fliam.php> wrote in
message news:Xns9A7EAE3DC6neredbojiasnano (AT) 85 (DOT) 214.90.236...

On 12 Apr 2008, Neredbojias <me@http://www.neredbojias.com/_eml/fliam.php
wrote:

Is it possible to replicate my expanding cell example without
javascript?

Okay, I did a little putzin' with your page. -Didn't check for any extant
errors, but replaced j/s with ss. See it here:

http://www.neredbojias.com/tsttst/expand_ex.php


--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

Thanks for looking, coding and replying.

Your example works in FireFox but not in IE7... welcome to THE PROBLEM...
hehe

This is exactly what I came up against, I can write the code using just html
and css to work on EITHER FF or IE but not both!

Close... but no cigar


Thanks for trying though, fancy another attempt?


Andy

"Andrew Bailey" <andy (AT) REMOVETOEMAILMEmanyplay (DOT) com> wrote

Hi Guys,

I have developed some code that allows me to create transparent tables,
however some of these tables need to be able to expand and shrink.

I can do it but it requires javascript to document.write certain parts of
the html differently depending on browser type.

THE QUESTION:

Is it possible to replicate my expanding cell example without javascript?

THE EXAMPLE URL:

http://www.microbuild.com/microbuild...d_example.html


Many thanks

Andy

Hi Guys & Gals,

I'm rewriting my original post for clarification...

I have coded a transparent table cell using the technique of creating a
container div and then overlaying a transparent div and a content div. This
works fine for static table cells but when the content is expanded (using
whatever method - not important) either the transparency effect is lost or
the content breaks out of the divs.

Now I can get around this side effect by using browser-specific code (see
url) BUT this is not a desirable method as I want to avoid using javascript
for page rendering.

So my question is....

"Is there a way to code a TRANSPARENT cell WITHOUT using browser-specific
code which can expand on the fly without loosing the transparency or
breaking the layout, and if so... how?"

THE EXAMPLE URL:

http://www.microbuild.com/microbuild...d_example.html


Thanks in advance


Andy


GOALS:

1: Table cell background is transparent.
2: Table cell content is non-transparent.
3: Table cell can expand either horizontally and vertically.
4: Table cell does not use javascript to render page.
5: Works in FireFox and Internet Explorer.
6: Does not cause text (or content) to become shifted (blurred). (I saw this
is some of my earlier dev code in IE7).

(New bug discovered)

7: IE7 screws transparency when switching to another tab, staying for more
than 3 seconds then switching back to original tab when I use the css
example code in the non-expanding example cell.

On 13 Apr 2008, "Andrew Bailey" <andy (AT) REMOVETOEMAILMEmanyplay (DOT) com>
wrote:

Is it possible to replicate my expanding cell example without
javascript?

Okay, I did a little putzin' with your page. -Didn't check for any
extant errors, but replaced j/s with ss. See it here:

http://www.neredbojias.com/tsttst/expand_ex.php

Thanks for looking, coding and replying.

Your example works in FireFox but not in IE7... welcome to THE
PROBLEM... hehe

Hehehe, IE is always good for a novel challenge.

Try 'er agin:

http://www.neredbojias.com/tsttst/expand_ex.php

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

"Neredbojias" <me@http://www.neredbojias.com/_eml/fliam.php> wrote in
message news:Xns9A7F2D1529778neredbojiasnano (AT) 85 (DOT) 214.90.236...

On 13 Apr 2008, "Andrew Bailey" <andy (AT) REMOVETOEMAILMEmanyplay (DOT) com
wrote:

Is it possible to replicate my expanding cell example without
javascript?

Okay, I did a little putzin' with your page. -Didn't check for any
extant errors, but replaced j/s with ss. See it here:

http://www.neredbojias.com/tsttst/expand_ex.php

Thanks for looking, coding and replying.

Your example works in FireFox but not in IE7... welcome to THE
PROBLEM... hehe

Hehehe, IE is always good for a novel challenge.

Try 'er agin:

http://www.neredbojias.com/tsttst/expand_ex.php

--
Neredbojias
http://www.neredbojias.com/
Great sights and sounds

Hi Neredbojias,

Thanks again for having a go, however you still don't get the cigar, here's
why...

1: You're cheating!!! (gasp), sorry, but your cell does not expand,,, you're
just reloading the same page but using php to alter the content... in effect
you're just displaying my static (non-expanding) cell with two different
version of the content.

2: (Forgivable coz I'm still working on this one). There seems to be an IE7
bug. Visit your test url in IE7, switch to another page on a different tab
for 3 seconds or more then switch back. Notice how the cell is no-longer
transparent?

Fancy another go?

I'm gonna have another attempt this afternoon so let's see who cracks it
first

Cheers

Andy

"Andrew Bailey" <andy (AT) REMOVETOEMAILMEmanyplay (DOT) com> wrote in
news:HUILj.54276$Ge4.16487 (AT) newsfe1-win (DOT) ntli.net:

Hi Guys,

I have developed some code that allows me to create transparent
tables, however some of these tables need to be able to expand and
shrink.

I can do it but it requires javascript to document.write certain parts
of the html differently depending on browser type.

THE QUESTION:

Is it possible to replicate my expanding cell example without
javascript?

THE EXAMPLE URL:

http://www.microbuild.com/microbuild...d_example.html

If what you are attempting to do is have different content for IE then
other browsers, then the answer may be the use of conditional comments.

<!--[if !IE]> <-->
<div>This content is for non-IE browsers.</div>
<!--> <![endif]-->

<!--[if IE]>
<div>This content is for IE browsers.</div>
<![endif]-->

--
BootNic Sunday April 13, 2008 2:13 PM
A person without a sense of humor is like a wagon without springs,
jolted by every pebble in the road.
*Henry Ward Beecher*

"BootNic" <bootnic.bounce (AT) gmail (DOT) com> wrote

"Andrew Bailey" <andy (AT) REMOVETOEMAILMEmanyplay (DOT) com> wrote in
news:HUILj.54276$Ge4.16487 (AT) newsfe1-win (DOT) ntli.net:

Hi Guys,

I have developed some code that allows me to create transparent
tables, however some of these tables need to be able to expand and
shrink.

I can do it but it requires javascript to document.write certain parts
of the html differently depending on browser type.

THE QUESTION:

Is it possible to replicate my expanding cell example without
javascript?

THE EXAMPLE URL:

http://www.microbuild.com/microbuild...d_example.html

If what you are attempting to do is have different content for IE then
other browsers, then the answer may be the use of conditional comments.

!--[if !IE]> <--
div>This content is for non-IE browsers.</div
!--> <![endif]--

!--[if IE]
div>This content is for IE browsers.</div
![endif]--

--
BootNic Sunday April 13, 2008 2:13 PM
A person without a sense of humor is like a wagon without springs,
jolted by every pebble in the road.
*Henry Ward Beecher*

Hi Bootnic,

Nope... I'm trying to do the OPPOSITE of what you think


Don't worry, you're not alone.


Andy

Hi G&G,

I have solved the problem and hence award myself the cigar


Take a peek...

http://www.microbuild.com/microbuild...d_example.html


Andy






"Andrew Bailey" <andy (AT) REMOVETOEMAILMEmanyplay (DOT) com> wrote

Hi Guys,

I have developed some code that allows me to create transparent tables,
however some of these tables need to be able to expand and shrink.

I can do it but it requires javascript to document.write certain parts of
the html differently depending on browser type.

THE QUESTION:

Is it possible to replicate my expanding cell example without javascript?

THE EXAMPLE URL:

http://www.microbuild.com/microbuild...d_example.html


Many thanks

Andy

Andrew Bailey wrote:

Hi G&G,

I have solved the problem and hence award myself the cigar


Take a peek...

http://www.microbuild.com/microbuild...d_example.html


Andy






"Andrew Bailey" <andy (AT) REMOVETOEMAILMEmanyplay (DOT) com> wrote in message
news:HUILj.54276$Ge4.16487 (AT) newsfe1-win (DOT) ntli.net...
Hi Guys,

I have developed some code that allows me to create transparent
tables, however some of these tables need to be able to expand and
shrink.

I can do it but it requires javascript to document.write certain parts
of the html differently depending on browser type.

THE QUESTION:

Is it possible to replicate my expanding cell example without javascript?

THE EXAMPLE URL:

http://www.microbuild.com/microbuild...d_example.html

You know smoking is bad for you, well anyway don't puff that cigar yet!
Don't you try your "solution" with JavaScript disabled. I thought no.
Maybe you should see for yourself before you "light up".

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Hi Jonathon,

I got to rush out so I only had a chance to turn off javascript in FF but
the only thing that didn't work (ref the top finished cell ONLY) was the
expand script which is to be expected.

The whole point of the post is to do with the cell, not the temporary
javascript code that is there just to create some expanding content.

Cheers for looking

Andy

You know smoking is bad for you, well anyway don't puff that cigar yet!
Don't you try your "solution" with JavaScript disabled. I thought no.
Maybe you should see for yourself before you "light up".

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

Andrew Bailey wrote:

I have solved the problem and hence award myself the cigar

"is non-corruptable and does not rely on javascript or css trickery...

Cool eh?."

No.

and when JavaScript is disabled, nothing happens. <smirk/

Back to the drawing board, bub. I'll take that cigar.

(btw, JavaScript has two capital letters in it.)

--
-bts
-A woman is just a woman, but a good sigline is a smoke!

Hi Beauregard,

The test url does contain some JavaScript but it's only there to provide a
way to expand the content within the test cell so of course it doesn't work
when JS is disabled.

The whole point of the exercise (As I have repeatedly stated) was the
rendering of a table cell with special qualities which I believe I have
done.

To avoid further confusion (I wish), here is the CRITICAL code...

<table cellspacing="0" cellpadding="0" width="500" height="20">
<td background="../images/website/cell_tl.png" width="20" height="20">
<td background="../images/website/cell_bg.png" width="*" height="20"
style="border-top: solid 1px #CFDEE9;">&nbsp;</td>
<td background="../images/website/cell_tr.png" width="20" height="20">
</table>

<table cellspacing="0" cellpadding="5" width="500" height="260">
<td background="../images/website/cell_bg.png" width="100%" height="100%"
valign="top" style="border-left: solid 1px #CFDEE9; border-right: solid 1px
#CFDEE9;">

CONTENT GOES HERE

</td>
</table>

<table cellspacing="0" cellpadding="0" width="500" height="20">
<td background="../images/website/cell_bl.png" width="20" height="20">
<td background="../images/website/cell_bg.png" width="*" height="20"
style="border-bottom: solid 1px #CFDEE9;">&nbsp;</td>
<td background="../images/website/cell_br.png" width="20" height="20">
</table>

....see any JavaScript in there?

The solution was actually quite simple, I just switched from .gif to .png
which has the transparency built into the image. Mind you, the corners were
quite tricky as each image has a 100% transparent area (outside the border),
a 100% opaque area (the actual border) and a 50% transparent area (inside
the border).

Cheers for looking, now give me my cigar back


Andy