Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Transparent Tables in Netscape

Posted on 1999-06-29
18
Medium Priority
?
258 Views
Last Modified: 2013-12-25
We need to know how to make a table transparent when itself is in a table. Only a problem with Netscape, IE works fine.

Help!!!!
0
Comment
Question by:Bart van der Wee
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
  • 2
  • +1
18 Comments
 
LVL 1

Expert Comment

by:Nuller
ID: 1863635
Well... if I understand your question, you want a table with no border? To do this:

<TABLE BORDER="0">

Then continue with your table definition.

You don't have to worry about background colors, both IE and Netscape default to none.
0
 
LVL 4

Author Comment

by:Bart van der Wee
ID: 1863636
Sorry but it the actual table colour that I need to change,
It appears to be transparent by default in IE but with netscape it isn't. I need to know how to set the table to transparent for both IE and Netscape.
0
 
LVL 1

Expert Comment

by:Nuller
ID: 1863637
Do you have a URL I can look at? Tables, by their very definition, are transparent. Next time, instead of rejecting an answer, just post a comment to clarify.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Author Comment

by:Bart van der Wee
ID: 1863638
Ok, heres a test url you can look at.
http://www.host.co.nz/expert/

Tables, by definition are transperant. But Netscape dont like, its all got to do with background images and netscape.

Have a look at the code.

And next time, instead of complaining, just post a comment to clarify. ;)
0
 
LVL 1

Expert Comment

by:Nuller
ID: 1863639
Ok, I see your mistake.

First of all, transparent means that you can see through it. That's it... it doesn't mean that you can see the background of the web page.

From what I can tell, you want to be able to see the background of the web page... the only way to do that is to make everything behind the foremost table transparent.

You said:
<!--This is a transperant gif, if you remove this image from the background="" tag then the table loads the background image of the background table, rather than just be transperant. -->

That table isn't loading anything... the table BEHIND it is loading ITS background image. The foreground table is transparent, so you see the background table's background image.

Oh... and BTW, I wouldn't critize someone who is trying to help you. The reason I said don't reject the answer is that that shows up on my record. Your question was unclear to begin with... I answered as best as I could.
0
 
LVL 4

Author Comment

by:Bart van der Wee
ID: 1863640
Yes, I do understand this but why does the page in Netscape differ to the page in IE? This is where my problem is.

Sorry for earlier comments - two of us are working on this problem so I have dealt out some attitude adjustment therapy
;) and increased the points accordingly - are you able to show where in the code the problem is?
Any more details that I can supply?
0
 
LVL 1

Expert Comment

by:Nuller
ID: 1863641
What version of both browsers are u using?

IE 3.0+ supports background graphics.
Netscape 4.0+ does as well...

Anything less than 4.0 for Netscape won't display the graphic.
0
 
LVL 4

Author Comment

by:Bart van der Wee
ID: 1863642
We are using IE 3.0 4.0 5.0 & Netscape 3.+ 4.6
Maybe its not a browser problem?

We have posted up at www.host.co.nz/expert/ some screen captures of what we see.


0
 
LVL 1

Expert Comment

by:Nuller
ID: 1863643
Ok... I think I know what's happening. In Netscape, the background table is attempting to tile the cell with the inner tables in it. Because Netscape can't tile through the tables in the cell, it instead tiles inside the tables in the cell. This is not what is supposed to happen, obviously.

To get rid of this I would suggest greating a solid table image the color of the bgcolor, and putting that inside the inner tables.

This, of course, isn't what your trying to do.


I messed with the code... a lot... and this is as close as I could get it:

<table width="600" border="1" bgcolor="#660033" background="http://www.host.co.nz/images/menu/yellow.gif" cellpadding="0" cellspacing="0">
        <tr>
          <td COLSPAN="2"><IMG SRC="http://www.host.co.nz/images/menu/yellow.gif"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td COLSPAN="2"><IMG SRC="http://www.host.co.nz/images/menu/yellow.gif"></td>
        </tr>
</table>

I have a feeling that the way that IE tiles the background without regarding cell contents is not duplicatable on Navigator.

Perhaps just giving in and creating a GIF image of what you want is the only way to go.

Sorry...
0
 
LVL 4

Author Comment

by:Bart van der Wee
ID: 1863644
Many Thanks nuller,

I'll leave this question open for a while and see what others have to say.

Post an answer in a weeks time and the points are yours ;)
0
 
LVL 1

Expert Comment

by:Nuller
ID: 1863645
thanks...

did my best... ;-)
0
 
LVL 6

Expert Comment

by:tecbuilder
ID: 1863646
I have run across the same problem that you had and the reason that Nuller gave for what is happening is accurate.  Some would say that this is a feature of Netscape.  <said with great sarcasim>

tecbuilder
0
 
LVL 1

Expert Comment

by:Nuller
ID: 1863647
hehaha... LOL!

I don't want to start any arguments... but I HATE Netscape.
Internet Explorer, since version 4.0 at least, has been FAR better than it's counterparts. Better in every way!

Anyway... thanks for the backup.
0
 
LVL 4

Accepted Solution

by:
brigmar earned 600 total points
ID: 1863648
heheh... I *REFUSE* to be beaten by Netscape's inadequacies..

If you just want the code, scroll to the bottom... If you want how I solved it, read on....

so... CSS at the ready.. here goes..

Netscape repeats the <TABLE> background anew for each table cell, effectively applying the background="whatever" to each <TD>. IE understands the <TABLE> background to apply to the table, and that each <TD> within can "layer" another background on top of that.
(..and we all 'think' the same way as IE, generally)

So, I thought "create a CSS layer with the background image":

<div style="background-image: url(yellow.gif);">
 <table>
  <table>
  </table>
 </table>
</div>

This got me partway there. The table background repeating correctly, but is ALSO repeating again for each cell.

So, I created a 1x1 transparent GIF file.... (spacer.gif), and set the background of the outer<TABLE> element to this:

<div style="background-image: url(yellow.gif);">
 <table background="spacer.gif">
  <table>
  </table>
 </table>
</div>

This worked to achieve the results you were looking for on NN. However, switching back to IE showed that the background tiling was extended right... past the table to the width of the browser window.

So, by enclosing the <DIV> tag in an empty, borderless table, the background image will only tile to the width/height of the enclosing <TABLE>, which is auto-sized to the size of the <TABLE> inside the <DIV>. *grin* :

<table border="0">
 <div style="background-image: url(yellow.gif);">
  <table background="spacer.gif">
   <table>
   </table>
  </table>
 </div>
<table>

*** THE CODE ***
<html><body bgcolor="#ffffff">
PRE-TABLE
<table border="0"><tr><td>
<div style="background-image:url(yellow.gif);">
<table border="1" background="spacer.gif">
<tr><td>T1R1C1</td><td>T1R1C2</td><td>T1R1C3</td><td>T1R1C4</td></tr>
<tr><td align="center" colspan="4">T1R2C1 : PRE-INNER TABLE
<table><tr><td>INNER TABLE</td></tr></table>
T1R2C1 : post-INNER TABLE</td></tr>
<tr><td>T1R3C1</td><td>T1R3C2</td><td>T1R3C3</td><td>T1R3C4</td></tr>
</table>
</div>
</td></tr></table>
POST-TABLE
</body></html>
*** END OF CODE ***

That should "do" you :)

Brian
0
 
LVL 4

Author Comment

by:Bart van der Wee
ID: 1863649
Thanks brigmar,

Will work with your code today and advise - OK?
I would like to solve this once and for all, having to split up images just to fit in tables is a real pest.
I need both browsers to work.

Bart ;)
0
 
LVL 4

Expert Comment

by:brigmar
ID: 1863650
Bart,

I have it running here on IE 4.01 and NN 4.08

... and a FYI.. get hold of a copy of macromedia Fireworks. It makes splicing images for tables a piece of cake :)

Brian

0
 
LVL 4

Author Comment

by:Bart van der Wee
ID: 1863651
Yes we have been doing this but with the number of new sites we are developing we can do without all this slicing and dicing - our motto is KIS   -  keep it simple!
0
 
LVL 4

Author Comment

by:Bart van der Wee
ID: 1863652
Thank you brigmar, I also *REFUSE* to be beaten by inadequacies.. wether it is IE or NN ;)


This is the answer I was after, thanks for your input Nuller.
0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

661 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question